Image Shutter Drag Filter Effect Tool

function processImage(originalImg, direction = "horizontal", strength = 10, numBlurs = 5) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure originalImg is loaded and has dimensions
    // HTMLImageElement uses naturalWidth/naturalHeight, other sources (like another canvas) use width/height
    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;

    // If image dimensions are zero, return an empty or minimally sized canvas
    if (w === 0 || h === 0) {
        canvas.width = w; // Could be 0
        canvas.height = h; // Could be 0
        // Optionally, log a warning, but problem usually implies no console logs
        // console.warn("Image Shutter Drag: Original image has zero width or height.");
        return canvas;
    }

    canvas.width = w;
    canvas.height = h;

    // Validate and sanitize parameters for strength
    let s = Number(strength);
    if (isNaN(s) || s < 0) {
        s = 0; // Default to 0 if invalid (NaN) or negative
    }

    // Validate and sanitize parameters for numBlurs
    let nb = Number(numBlurs);
    if (isNaN(nb)) {
        nb = 1; // Default to 1 if NaN
    } else {
        nb = Math.max(1, Math.round(nb)); // Must be an integer >= 1
    }
    
    // If strength is 0 (no drag) or numBlurs is 1 (single draw),
    // simply draw the original image once with full alpha and return.
    if (s === 0 || nb === 1) {
        ctx.drawImage(originalImg, 0, 0, w, h);
        return canvas;
    }

    // Set globalAlpha for each draw operation. 
    // Each draw will contribute partially to the final blended image.
    ctx.globalAlpha = 1.0 / nb;

    // Calculate the offset step for each draw operation.
    // Since nb >= 2 at this point (due to the check above), nb - 1 is safe (>= 1).
    const step = s / (nb - 1);

    // Loop to draw the image multiple times, each time slightly offset.
    // This creates the "drag" or "motion blur" effect.
    // The loop draws from the smallest offset to the largest.
    // Due to canvas's default 'source-over' compositing, images drawn later
    // are more prominent. So, the image at the largest offset (end of the drag)
    // will appear sharpest.
    for (let i = 0; i < nb; i++) {
        const currentDragOffset = i * step;
        let dx = 0; // Horizontal offset
        let dy = 0; // Vertical offset

        // Determine dx and dy based on the specified direction.
        // The offset (dx, dy) is applied to the top-left corner of the image when drawing.
        // A positive dx shifts the image to the right.
        // A positive dy shifts the image downwards.
        switch (direction.toLowerCase()) {
            case "horizontal": // Drag towards the right
                dx = currentDragOffset;
                break;
            case "vertical": // Drag downwards
                dy = currentDragOffset;
                break;
            case "diagonal-tl-br": // Drag from Top-Left towards Bottom-Right
                dx = currentDragOffset;
                dy = currentDragOffset;
                break;
            case "diagonal-tr-bl": // Drag from Top-Right towards Bottom-Left
                dx = -currentDragOffset; // Image effectively moves left
                dy = currentDragOffset;  // Image effectively moves down
                break;
            // For more comprehensive directions, additional cases can be added:
            // case "horizontal-left": dx = -currentDragOffset; break;
            // case "vertical-up": dy = -currentDragOffset; break;
            // case "diagonal-br-tl": dx = -currentDragOffset; dy = -currentDragOffset; break;
            // case "diagonal-bl-tr": dx = currentDragOffset; dy = -currentDragOffset; break;
            default: // If direction string is not recognized, default to horizontal (right)
                dx = currentDragOffset;
                break;
        }
        ctx.drawImage(originalImg, dx, dy, w, h);
    }

    // While ctx.globalAlpha would reset if this context were serially reused,
    // this function returns a new canvas each time, so explicit reset is not strictly needed
    // for correctness of *this* function call, but good practice if context might be passed around.
    // ctx.globalAlpha = 1.0; 

    return canvas;
}