Image Dead Pixel Filter Effect Tool

async function processImage(originalImg, deadPixelColor = "black", deadPixelDensity = 0.001) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Ensure the image is loaded and use its natural dimensions
    // naturalWidth/Height are the intrinsic dimensions of the image
    // width/height can be the rendered dimensions if based on an <img> tag
    let W = originalImg.naturalWidth;
    let H = originalImg.naturalHeight;

    // Fallback if naturalWidth/Height are 0 (e.g., image not loaded or not a raster image)
    if (!W || !H) {
        W = originalImg.width;
        H = originalImg.height;
    }

    // If dimensions are still zero (e.g. image source is invalid or image not loaded)
    // return an empty canvas or handle error as appropriate.
    if (!W || !H) {
        console.error("Image has zero dimensions. Ensure the image is loaded and valid.");
        canvas.width = 0;
        canvas.height = 0;
        return canvas; // Return an empty canvas
    }

    canvas.width = W;
    canvas.height = H;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, W, H);

    // Get the image data
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, W, H);
    } catch (e) {
        // This can happen due to cross-origin issues if the image is tainted
        console.error("Could not get image data. If the image is from a different origin, ensure CORS policy allows it.", e);
        // Return the canvas with the original image drawn, without the effect
        return canvas;
    }
    
    const data = imageData.data;

    // Normalize deadPixelDensity (ensure it's a number between 0 and 1)
    let density = parseFloat(deadPixelDensity);
    if (isNaN(density) || density < 0) {
        density = 0;
    } else if (density > 1) {
        density = 1;
    }

    // Parse the dead pixel color string into R, G, B values
    let rDead, gDead, bDead;
    try {
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = 1;
        tempCanvas.height = 1;
        const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true }); // willReadFrequently useful for getImageData
        tempCtx.fillStyle = deadPixelColor;
        tempCtx.fillRect(0, 0, 1, 1);
        const colorData = tempCtx.getImageData(0, 0, 1, 1).data;
        rDead = colorData[0];
        gDead = colorData[1];
        bDead = colorData[2];
    } catch (e) {
        console.error("Error parsing deadPixelColor. Defaulting to black.", e);
        rDead = 0;
        gDead = 0;
        bDead = 0;
    }

    // Apply the dead pixel effect
    // Iterate through each pixel (each pixel is 4 bytes: R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        if (Math.random() < density) {
            data[i] = rDead;       // Red channel
            data[i + 1] = gDead;   // Green channel
            data[i + 2] = bDead;   // Blue channel
            data[i + 3] = 255;     // Alpha channel (make dead pixel fully opaque)
        }
    }

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

    return canvas;
}