Image Radial Blur Filter

async function processImage(originalImg, strength = 5, centerXRatio = 0.5, centerYRatio = 0.5, quality = 10) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    // Handle cases where image dimensions are zero.
    if (width === 0 || height === 0) {
        canvas.width = width; // Set canvas dims, could be 0x0
        canvas.height = height;
        // Attempt to draw, though it will likely be empty or draw nothing.
        try {
            if (width > 0 && height > 0) { // Only draw if dimensions are valid
                ctx.drawImage(originalImg, 0, 0, width, height);
            }
        } catch (e) {
            console.error("Error drawing an image with zero/invalid dimensions:", e);
        }
        return canvas;
    }
    
    canvas.width = width;
    canvas.height = height;

    const numSamples = Math.max(1, Math.floor(quality));

    // Optimization: If strength is non-positive or quality implies single sample (no blur),
    // draw the original image and return.
    if (strength <= 0 || numSamples <= 1) {
        try {
            ctx.drawImage(originalImg, 0, 0, width, height);
        } catch (e) {
            console.error("Error drawing original image:", e);
            // Canvas might be blank or partially drawn if error occurs here.
        }
        return canvas;
    }

    // Draw original image to a temporary canvas to get its pixel data.
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true }); // Hint for read-heavy operations
    tempCanvas.width = width;
    tempCanvas.height = height;

    try {
        tempCtx.drawImage(originalImg, 0, 0, width, height);
    } catch (e) {
        console.error("Error drawing image to temporary canvas (e.g., tainted canvas or invalid image):", e);
        // Fallback: draw original image to the main canvas and return.
        try {
            ctx.drawImage(originalImg, 0, 0, width, height);
        } catch (drawError) {
            console.error("Error drawing original image as fallback after temp canvas error:", drawError);
        }
        return canvas;
    }

    let originalImgData;
    try {
        originalImgData = tempCtx.getImageData(0, 0, width, height);
    } catch (e) {
        console.error("Could not get image data from temporary canvas (e.g., cross-origin restrictions):", e);
        // Fallback: draw original image to the main canvas and return.
        try {
            ctx.drawImage(originalImg, 0, 0, width, height);
        } catch (drawError) {
            console.error("Error drawing original image as fallback after getImageData error:", drawError);
        }
        return canvas;
    }
    const originalPixels = originalImgData.data;

    const outputImgData = ctx.createImageData(width, height);
    const outputPixels = outputImgData.data;

    const actualCenterX = centerXRatio * width;
    const actualCenterY = centerYRatio * height;

    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            let rSum = 0, gSum = 0, bSum = 0, aSum = 0;

            // Vector from blur center to current pixel (x, y)
            const dx = x - actualCenterX;
            const dy = y - actualCenterY;
            
            // Distance from center
            const dist = Math.sqrt(dx * dx + dy * dy);

            // Normalized direction vector from center to pixel
            let normDx = 0;
            let normDy = 0;
            if (dist !== 0) { // Avoid division by zero if (x,y) is the center
                normDx = dx / dist;
                normDy = dy / dist;
            }
            // If dist is 0 (pixel is at the center), normDx/normDy remain 0.
            // Samples will then be taken at (x,y), effectively not blurring the center point.

            for (let i = 0; i < numSamples; i++) {
                // Calculate sample position coefficient 't'.
                // It ranges from -1 to +1, distributing samples symmetrically around the current pixel (x,y)
                // along the radial line. If numSamples is 1, t = 0.
                let t = 0;
                if (numSamples > 1) {
                    t = (i / (numSamples - 1)) * 2.0 - 1.0;
                }
                
                // 'strength' defines the half-length of the sampling segment.
                // Offset from the current pixel (x,y) along the radial direction.
                const currentSampleOffset = t * strength;

                // Calculate coordinates of the source sample pixel
                const sampleX = Math.round(x + normDx * currentSampleOffset);
                const sampleY = Math.round(y + normDy * currentSampleOffset);

                // Clamp sample coordinates to be within image bounds
                const sx = Math.max(0, Math.min(width - 1, sampleX));
                const sy = Math.max(0, Math.min(height - 1, sampleY));

                // Get index for the 1D pixel array
                const inputIdx = (sy * width + sx) * 4;

                // Accumulate color and alpha values from the original image
                rSum += originalPixels[inputIdx];
                gSum += originalPixels[inputIdx + 1];
                bSum += originalPixels[inputIdx + 2];
                aSum += originalPixels[inputIdx + 3];
            }

            // Calculate average color and alpha for the output pixel
            const outputIdx = (y * width + x) * 4;
            outputPixels[outputIdx]     = rSum / numSamples;
            outputPixels[outputIdx + 1] = gSum / numSamples;
            outputPixels[outputIdx + 2] = bSum / numSamples;
            outputPixels[outputIdx + 3] = aSum / numSamples; // Average alpha as well
        }
    }

    // Put the processed pixel data onto the main canvas
    ctx.putImageData(outputImgData, 0, 0);
    
    return canvas;
}