Weird Code Image Effect Generator

function processImage(
    originalImg,
    fontSize = 12,
    codeText = "{ 'id': '0x9A', 'payload': [ 0, 1, 1, 0 ], 'status': 'corrupted' } 0x00FF 0x00FE ",
    randomizeChars = 0,
    colorMode = "original",
    backgroundColor = "#000000",
    glitchEffect = 0
) {
    const width = originalImg.width;
    const height = originalImg.height;

    // Create source canvas to extract original image pixel data
    const srcCanvas = document.createElement('canvas');
    srcCanvas.width = width;
    srcCanvas.height = height;
    const srcCtx = srcCanvas.getContext('2d', { willReadFrequently: true });
    srcCtx.drawImage(originalImg, 0, 0, width, height);

    let imgData;
    try {
        imgData = srcCtx.getImageData(0, 0, width, height).data;
    } catch (e) {
        console.error("Failed to read image data. The canvas might be tainted.", e);
        return srcCanvas;
    }

    // Create destination canvas for the weird code effect
    const dstCanvas = document.createElement('canvas');
    dstCanvas.width = width;
    dstCanvas.height = height;
    const dstCtx = dstCanvas.getContext('2d');

    // Fill background
    dstCtx.fillStyle = backgroundColor;
    dstCtx.fillRect(0, 0, width, height);

    // Initialize font and typography settings
    let step = parseInt(fontSize, 10);
    if (isNaN(step) || step < 2) step = 12;

    dstCtx.font = `bold ${step}px 'Courier New', Courier, monospace`;
    dstCtx.textBaseline = 'middle';
    dstCtx.textAlign = 'center';

    const codeStr = String(codeText).length > 0 ? String(codeText) : "01";
    const isRandom = parseInt(randomizeChars, 10) === 1;
    const glitchVal = parseFloat(glitchEffect) || 0;
    const mode = String(colorMode).toLowerCase();
    
    let textIndex = 0;

    // Grid traversal to sample pixels and draw code characters
    for (let y = step / 2; y < height; y += step) {
        for (let x = step / 2; x < width; x += step) {
            const px = Math.floor(x);
            const py = Math.floor(y);
            const i = (py * width + px) * 4;
            
            const r = imgData[i];
            const g = imgData[i + 1];
            const b = imgData[i + 2];
            const a = imgData[i + 3];

            if (a < 10) continue; // Skip highly transparent pixels to retain silhouette

            // Decide which character to draw
            let char = "";
            if (isRandom) {
                char = codeStr.charAt(Math.floor(Math.random() * codeStr.length));
            } else {
                char = codeStr.charAt(textIndex % codeStr.length);
                textIndex++;
            }

            // A small optimization: don't compute / draw blank spaces
            if (char === ' ') continue;

            // Calculate luminance for effects
            const luma = 0.299 * r + 0.587 * g + 0.114 * b;
            let fillStyle = "";

            if (mode === "matrix") {
                fillStyle = `rgba(0, ${Math.floor(luma)}, 0, ${a / 255})`;
            } else if (mode === "grayscale" || mode === "monochrome") {
                fillStyle = `rgba(${Math.floor(luma)}, ${Math.floor(luma)}, ${Math.floor(luma)}, ${a / 255})`;
            } else if (mode === "hacker") {
                // Intense bright greens for highlights, darker greens for shadows
                const green = luma > 120 ? 255 : luma * 1.5;
                fillStyle = `rgba(0, ${Math.floor(green)}, 0, ${a / 255})`;
            } else {
                // Determine opacity from the alpha channel of original image
                fillStyle = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
            }

            let drawX = x;
            let drawY = y;
            
            // Randomly offset position or shift colors if glitch mode is enabled
            if (glitchVal > 0) {
                // Probability of glitching this block
                if ((Math.random() * 100) < glitchVal) {
                    drawX += (Math.random() - 0.5) * step * (glitchVal / 5);
                    drawY += (Math.random() - 0.5) * step * (glitchVal / 5);
                    
                    // Small chance to introduce neon magenta/cyan error hues
                    if (Math.random() < 0.3) {
                        fillStyle = Math.random() > 0.5 ? 'rgba(255, 0, 255, 0.9)' : 'rgba(0, 255, 255, 0.9)';
                    }
                }
            }

            dstCtx.fillStyle = fillStyle;
            dstCtx.fillText(char, drawX, drawY);
        }
    }

    return dstCanvas;
}