Image Percussion Score Filter Effect Tool

function processImage(originalImg, threshold = 128) {
    // Ensure threshold is a number and clamp it within the valid range (0-255)
    const numThreshold = Number(threshold);
    const clampedThreshold = Math.max(0, Math.min(255, isNaN(numThreshold) ? 128 : numThreshold));

    // 1. Create a canvas element
    const canvas = document.createElement('canvas');
    
    // Use naturalWidth and naturalHeight to get the original image dimensions
    // This assumes originalImg is a loaded HTMLImageElement
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Get the 2D rendering context.
    // { willReadFrequently: true } is a performance hint for repeated getImageData/putImageData calls.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    if (!ctx) {
        console.error("Failed to get 2D context from canvas.");
        // Return an empty canvas or handle error as appropriate
        return canvas; 
    }

    // 2. Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // 3. Get the image data from the canvas
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error getting image data (possibly due to tainted canvas from cross-origin image):", e);
        // If we can't get image data, we can't process it.
        // We'll return the canvas with the original image drawn on it.
        return canvas;
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray

    // 4. Process the pixels
    // Iterate over each pixel (each pixel has 4 components: R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];      // Red
        const g = data[i + 1];  // Green
        const b = data[i + 2];  // Blue
        // const a = data[i + 3]; // Alpha - we'll set it to fully opaque

        // Convert the pixel to grayscale using the luminosity method
        // (standard coefficients for perceived brightness)
        const grayscale = 0.299 * r + 0.587 * g + 0.114 * b;

        // Apply the threshold to determine if the pixel should be black or white
        // This creates a high-contrast, "score-like" effect.
        let outputColor;
        if (grayscale > clampedThreshold) {
            outputColor = 255; // White
        } else {
            outputColor = 0;   // Black
        }

        // Set the new R, G, B values
        data[i] = outputColor;
        data[i + 1] = outputColor;
        data[i + 2] = outputColor;
        // Set alpha to fully opaque for a solid effect
        data[i + 3] = 255; 
    }

    // 5. Put the modified image data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // 6. Return the canvas element
    return canvas;
}