Image Buffer Error Filter Effect Tool

function processImage(originalImg, p_chunkSize = 32, p_numGlitches = 50) {
    const canvas = document.createElement('canvas');
    // Add willReadFrequently hint for potential performance optimization in some browsers
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Use naturalWidth/Height for intrinsic image dimensions if available, fallback to width/height
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

    if (canvas.width === 0 || canvas.height === 0) {
        // If image is not loaded or has no dimensions, return an empty (or 0x0) canvas
        // console.warn("Image has zero width or height. Cannot process.");
        return canvas;
    }

    // Draw the original image onto the canvas
    // Ensure drawing respects the canvas dimensions determined (in case of scaling)
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Ensure parameters are numbers and validated
    let chunkSize = Number(p_chunkSize);
    let numGlitches = Number(p_numGlitches);

    // Validate chunkSize: must be a positive integer.
    if (isNaN(chunkSize) || chunkSize < 1) {
        // console.warn(`Invalid chunkSize: ${p_chunkSize}. Using default 32.`);
        chunkSize = 32; // Fallback to a sensible default
    } else {
        chunkSize = Math.floor(chunkSize); // Ensure it's an integer
    }

    // Validate numGlitches: must be a non-negative integer.
    if (isNaN(numGlitches) || numGlitches < 0) {
        // console.warn(`Invalid numGlitches: ${p_numGlitches}. Using default 50.`);
        numGlitches = 50; // Fallback to a sensible default
    } else {
        numGlitches = Math.floor(numGlitches); // Ensure it's an integer
    }

    if (numGlitches === 0) {
        return canvas; // No glitches to apply, return canvas with original image
    }
    
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This can happen if the originalImg is tainted (e.g. cross-origin)
        // console.error("Could not get ImageData, possibly due to cross-origin restrictions:", e);
        return canvas; // Return the canvas with the original image drawn
    }
    
    const data = imageData.data;
    const width = canvas.width;
    const height = canvas.height;

    const numChunksX = Math.floor(width / chunkSize);
    const numChunksY = Math.floor(height / chunkSize);

    if (numChunksX === 0 || numChunksY === 0) {
        // Chunk size is too large for the image dimensions, or image too small.
        // No glitch effect can be applied with these settings.
        // console.warn("Chunk size is too large for the image dimensions or image too small. No effect applied.");
        return canvas; // Return canvas with original image drawn
    }

    for (let i = 0; i < numGlitches; i++) {
        // Select random source and destination chunk coordinates
        const srcChunkCol = Math.floor(Math.random() * numChunksX);
        const srcChunkRow = Math.floor(Math.random() * numChunksY);
        
        const dstChunkCol = Math.floor(Math.random() * numChunksX);
        const dstChunkRow = Math.floor(Math.random() * numChunksY);

        // Calculate top-left pixel coordinates for source and destination chunks
        const sxStart = srcChunkCol * chunkSize;
        const syStart = srcChunkRow * chunkSize;
        const dxStart = dstChunkCol * chunkSize;
        const dyStart = dstChunkRow * chunkSize;

        // Copy pixels from the source chunk to the destination chunk
        for (let yOffset = 0; yOffset < chunkSize; yOffset++) {
            for (let xOffset = 0; xOffset < chunkSize; xOffset++) {
                const currentSrcX = sxStart + xOffset;
                const currentSrcY = syStart + yOffset;
                
                const currentDstX = dxStart + xOffset;
                const currentDstY = dyStart + yOffset;

                // Ensure we are within actual image bounds for both source and destination pixels.
                // This check is crucial if image dimensions are not exact multiples of chunkSize,
                // or if chunkSize is larger than image dimensions (though numChunksX/Y checks should prevent the latter).
                if (currentSrcX >= width || currentSrcY >= height || 
                    currentDstX >= width || currentDstY >= height) {
                    continue;
                }

                const srcPixelIndex = (currentSrcY * width + currentSrcX) * 4;
                const dstPixelIndex = (currentDstY * width + currentDstX) * 4;

                // Copy RGBA components
                data[dstPixelIndex]     = data[srcPixelIndex];     // Red
                data[dstPixelIndex + 1] = data[srcPixelIndex + 1]; // Green
                data[dstPixelIndex + 2] = data[srcPixelIndex + 2]; // Blue
                data[dstPixelIndex + 3] = data[srcPixelIndex + 3]; // Alpha
            }
        }
    }

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