Image Data Matrix Filter Effect Tool

function processImage(originalImg, cellSize = 8, threshold = 128, darkColor = "black", lightColor = "white", gapSize = 1) {
    // Sanitize and ensure correct types for parameters, falling back to signature defaults if necessary.
    let numCellSize = Number(cellSize);
    if (isNaN(numCellSize) || numCellSize <= 0) {
        numCellSize = 8; // Default cellSize from signature
    }

    let numThreshold = Number(threshold);
    if (isNaN(numThreshold)) {
        numThreshold = 128; // Default threshold from signature
    }
    numThreshold = Math.max(0, Math.min(255, numThreshold)); // Clamp threshold to 0-255 range

    let strDarkColor = String(darkColor);
    // Fallback to signature default if an empty string, "null", or "undefined" is passed.
    if (strDarkColor === "" || strDarkColor === "null" || strDarkColor === "undefined") {
        strDarkColor = "black"; // Default darkColor from signature
    }

    let strLightColor = String(lightColor);
    if (strLightColor === "" || strLightColor === "null" || strLightColor === "undefined") {
        strLightColor = "white"; // Default lightColor from signature
    }

    let numGapSize = Number(gapSize);
    if (isNaN(numGapSize) || numGapSize < 0) {
        numGapSize = 1; // Default gapSize from signature
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for intrinsic image dimensions, fallback to width/height
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // If image has no dimensions (e.g., not loaded yet or invalid image)
    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Image has zero dimensions. Returning empty canvas.");
        return canvas; // Return an empty (but sized) canvas or handle as error
    }

    // Create a temporary canvas to draw the original image and get its pixel data
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d');
    tempCanvas.width = imgWidth;
    tempCanvas.height = imgHeight;
    
    let imageData;
    try {
        tempCtx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
        imageData = tempCtx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error getting image data:", e);
        // Draw an error message on the output canvas
        ctx.fillStyle = "rgba(200, 200, 200, 0.8)"; // Light gray background for error message visibility
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "red";
        ctx.font = "16px Arial";
        ctx.textAlign = "center";
        const message = "Error processing image.";
        const subMessage = e.name === "SecurityError" ? "(Possibly CORS issue)" : "(Image load/access error)";
        ctx.fillText(message, canvas.width / 2, canvas.height / 2 - 10);
        ctx.font = "12px Arial";
        ctx.fillText(subMessage, canvas.width / 2, canvas.height / 2 + 10);
        return canvas;
    }
    const data = imageData.data;

    // Fill the output canvas with the lightColor. This color will form the gaps between cells.
    ctx.fillStyle = strLightColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Calculate the actual size of the colored part of the cell, considering the gap
    const actualCellDrawSize = Math.max(0, numCellSize - numGapSize);

    // If cells are entirely consumed by gaps (e.g., gapSize >= cellSize),
    // the canvas is already correctly filled with lightColor.
    if (actualCellDrawSize === 0) {
        return canvas;
    }

    // Iterate over the image in blocks of numCellSize x numCellSize
    for (let y = 0; y < imgHeight; y += numCellSize) {
        for (let x = 0; x < imgWidth; x += numCellSize) {
            let totalBrightness = 0;
            let pixelCount = 0;

            // Define the actual block of pixels from the original image to average.
            // This block's dimensions might be smaller than numCellSize at image edges.
            const blockW = Math.min(numCellSize, imgWidth - x);
            const blockH = Math.min(numCellSize, imgHeight - y);

            // Calculate the average brightness of the pixels in the current block
            for (let by = 0; by < blockH; by++) {
                for (let bx = 0; bx < blockW; bx++) {
                    const R_idx = ((y + by) * imgWidth + (x + bx)) * 4;
                    // Data array contains R,G,B,A values for each pixel
                    const r = data[R_idx];
                    const g = data[R_idx + 1];
                    const b = data[R_idx + 2];
                    
                    // Using the luminosity formula for brightness perception
                    const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
                    totalBrightness += brightness;
                    pixelCount++;
                }
            }

            if (pixelCount === 0) {
                continue; // Should not happen if imgWidth/Height > 0
            }

            const averageBrightness = totalBrightness / pixelCount;

            // If the average brightness is below the threshold, the cell is considered "dark"
            if (averageBrightness < numThreshold) {
                ctx.fillStyle = strDarkColor;
                // Draw the cell on the output canvas.
                // The cell is drawn at position (x,y) with dimensions actualCellDrawSize x actualCellDrawSize.
                // The remaining area (numGapSize) within the numCellSize grid slot will show the background (strLightColor), forming the_gap.
                ctx.fillRect(x, y, actualCellDrawSize, actualCellDrawSize);
            }
            // If averageBrightness >= numThreshold, the cell is "light".
            // Since the canvas is pre-filled with strLightColor, no drawing is needed for these light cells.
        }
    }

    return canvas;
}