Image High Pass Filter Tool

function processImage(originalImg, radius = 10, grayscale = 0) {
    // Ensure parameters are parsed correctly
    radius = parseFloat(radius);
    if (isNaN(radius) || radius < 0) radius = 10;
    
    // Grayscale parameter (0 for False, 1 for True)
    grayscale = parseInt(grayscale);
    if (isNaN(grayscale)) grayscale = 0;

    const width = originalImg.width;
    const height = originalImg.height;

    // Canvas for the original image
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    const originalData = ctx.getImageData(0, 0, width, height);

    // Canvas for the blurred version (low pass)
    const blurCanvas = document.createElement('canvas');
    blurCanvas.width = width;
    blurCanvas.height = height;
    const blurCtx = blurCanvas.getContext('2d');
    
    // Apply built-in canvas blur
    blurCtx.filter = `blur(${radius}px)`;
    blurCtx.drawImage(originalImg, 0, 0);
    const blurData = blurCtx.getImageData(0, 0, width, height);

    // Prepare output image data
    const outData = ctx.createImageData(width, height);
    
    const d1 = originalData.data;
    const d2 = blurData.data;
    const dst = outData.data;

    // Apply High Pass Filter formula: (Original - Blurred) + Offset(128)
    for (let i = 0; i < d1.length; i += 4) {
        let r = d1[i]     - d2[i]     + 128;
        let g = d1[i+1]   - d2[i+1]   + 128;
        let b = d1[i+2]   - d2[i+2]   + 128;

        // Apply grayscale conversion if requested
        if (grayscale === 1) {
            let lum = 0.299 * r + 0.587 * g + 0.114 * b;
            r = g = b = lum;
        }

        // Clamp the values between 0 and 255
        dst[i]     = r < 0 ? 0 : (r > 255 ? 255 : r);
        dst[i+1]   = g < 0 ? 0 : (g > 255 ? 255 : g);
        dst[i+2]   = b < 0 ? 0 : (b > 255 ? 255 : b);
        
        // Preserve original alpha transparency
        dst[i+3]   = d1[i+3];
    }

    ctx.putImageData(outData, 0, 0);
    return canvas;
}