Photo Face Hiding Tool

async function processImage(originalImg, method = "pixelate", optionValue = 20, fillColor = "black", emojiCharacter = "😀") {

    // 1. Initial Image loading check
    if (!originalImg.complete || originalImg.naturalWidth === 0) {
        console.warn("Image not fully loaded or is invalid. Ensure the Image object is fully loaded and valid before calling processImage.");
        // Create a canvas to display an error message
        const errorCanvas = document.createElement('canvas');
        // Try to use provided dimensions if available and valid, otherwise fallback.
        errorCanvas.width = (originalImg.width && originalImg.width > 0) ? originalImg.width : 300;
        errorCanvas.height = (originalImg.height && originalImg.height > 0) ? originalImg.height : 150;
        const errorCtx = errorCanvas.getContext('2d');
        errorCtx.fillStyle = "lightgray";
        errorCtx.fillRect(0, 0, errorCanvas.width, errorCanvas.height);
        errorCtx.fillStyle = "red";
        errorCtx.textAlign = "center";
        errorCtx.textBaseline = "middle";
        errorCtx.font = "16px Arial";
        errorCtx.fillText("Error: Image not loaded or invalid.", errorCanvas.width / 2, errorCanvas.height / 2);
        return errorCanvas;
    }

    // 2. Canvas Setup
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    
    // Draw the original image onto the canvas. This will be the base.
    // If face detection fails or no faces are found, this original image will be returned.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Helper Functions (defined inside processImage to encapsulate them)

    // Helper for pico.js: convert RGBA to grayscale
    function rgba_to_grayscale(rgba, nrows, ncols) {
        const gray = new Uint8Array(nrows * ncols);
        for (let r = 0; r < nrows; ++r) {
            for (let c = 0; c < ncols; ++c) {
                // Gray = 0.299*R + 0.587*G + 0.114*B
                // Using pico.js's common approximation: (2*R + 7*G + 1*B) / 10
                gray[r * ncols + c] = (
                    2 * rgba[r*4*ncols + c*4 + 0] +
                    7 * rgba[r*4*ncols + c*4 + 1] +
                    1 * rgba[r*4*ncols + c*4 + 2]
                ) / 10;
            }
        }
        return gray;
    }

    // Helper function for "pixelate" method
    function pixelateFace(context, x, y, width, height, blockSize = 20) {
        blockSize = Math.max(1, Math.floor(blockSize)); 
        const P_x = Math.round(x);
        const P_y = Math.round(y);
        const P_width = Math.round(width);
        const P_height = Math.round(height);

        if (P_width <= 0 || P_height <= 0) return;

        // Get image data for the face region
        const imageData = context.getImageData(P_x, P_y, P_width, P_height);
        const data = imageData.data;

        for (let j = 0; j < P_height; j += blockSize) {
            for (let i = 0; i < P_width; i += blockSize) {
                const currentBlockHeight = Math.min(blockSize, P_height - j);
                const currentBlockWidth = Math.min(blockSize, P_width - i);
                
                let r_sum = 0, g_sum = 0, b_sum = 0, a_sum = 0;
                let count = 0;

                for (let bj = 0; bj < currentBlockHeight; bj++) {
                    for (let bi = 0; bi < currentBlockWidth; bi++) {
                        const pixelStartIndex = ((j + bj) * P_width + (i + bi)) * 4;
                        r_sum += data[pixelStartIndex];
                        g_sum += data[pixelStartIndex + 1];
                        b_sum += data[pixelStartIndex + 2];
                        a_sum += data[pixelStartIndex + 3];
                        count++;
                    }
                }
                
                const avgR = r_sum / count;
                const avgG = g_sum / count;
                const avgB = b_sum / count;
                const avgA = a_sum / count;

                for (let bj = 0; bj < currentBlockHeight; bj++) {
                    for (let bi = 0; bi < currentBlockWidth; bi++) {
                        const pixelStartIndex = ((j + bj) * P_width + (i + bi)) * 4;
                        data[pixelStartIndex]     = avgR;
                        data[pixelStartIndex + 1] = avgG;
                        data[pixelStartIndex + 2] = avgB;
                        data[pixelStartIndex + 3] = avgA;
                    }
                }
            }
        }
        context.putImageData(imageData, P_x, P_y);
    }

    // Helper function for "blur" method
    function blurFace(mainCtx, x, y, width, height, blurRadius = 10, sourceCanvas, imageToBlurFrom) {
        const actualX = Math.max(0, Math.round(x));
        const actualY = Math.max(0, Math.round(y));
        const actualWidth = Math.max(0, Math.round(width + Math.min(0, x - actualX))); // Adjust width/height if x/y were negative and clamped
        const actualHeight = Math.max(0, Math.round(height + Math.min(0, y - actualY)));
        
        if (actualWidth <= 0 || actualHeight <= 0) return;

        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = actualWidth;
        tempCanvas.height = actualHeight;
        const tempCtx = tempCanvas.getContext('2d');

        tempCtx.drawImage(
            imageToBlurFrom, // Source image
            actualX, actualY, actualWidth, actualHeight, // Source rectangle (from original image)
            0, 0, actualWidth, actualHeight             // Destination rectangle (on temp canvas)
        );

        tempCtx.filter = `blur(${blurRadius}px)`;
        tempCtx.drawImage(tempCanvas, 0, 0); // Draw onto itself to apply filter
        
        mainCtx.drawImage(tempCanvas, actualX, actualY); // Draw blurred region back to main canvas
    }

    // Helper function for "emoji" method
    function drawEmoji(context, x, y, width, height, emojiChar = "😀") {
        const fontSize = Math.min(width, height) * 0.9;
        context.font = `${fontSize}px sans-serif`;
        context.textAlign = 'center';
        context.textBaseline = 'middle';
        // Small Y offset usually helps center emojis visually
        context.fillText(emojiChar, x + width / 2, y + height / 2 + fontSize * 0.1);
    }

    // 3. Load Face Detection Library (pico.js) and Cascade File
    try {
        if (typeof pico === 'undefined') {
            await new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = 'https://cdn.jsdelivr.net/npm/picojs@2.0.4/pico.js';
                script.async = true;
                script.onload = resolve;
                script.onerror = () => reject(new Error("Failed to load pico.js library."));
                document.head.appendChild(script);
            });
        }

        let facefinder_classify_region;
        const cascadeFileUrl = 'https://cdn.jsdelivr.net/gh/nenadmarkus/picojs/examples/facefinder';
        
        // Use a specific global cache name for this tool's cascade data
        if (window.photoFaceHidingToolCascade) {
            facefinder_classify_region = window.photoFaceHidingToolCascade;
        } else {
            const response = await fetch(cascadeFileUrl);
            if (!response.ok) throw new Error(`Failed to fetch cascade file from ${cascadeFileUrl}: ${response.statusText}`);
            const buffer = await response.arrayBuffer();
            const bytes = new Int8Array(buffer);
            facefinder_classify_region = pico.unpack_cascade(bytes);
            window.photoFaceHidingToolCascade = facefinder_classify_region; // Cache for future calls
            console.log('Face detection cascade loaded & cached.');
        }

        // 4. Prepare Image Data for Pico.js
        const grauScaleRgba = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
        const imageForPico = {
            "pixels": rgba_to_grayscale(grauScaleRgba, canvas.height, canvas.width),
            "nrows": canvas.height,
            "ncols": canvas.width,
            "ldim": canvas.width
        };

        const minDimension = Math.min(canvas.width, canvas.height);
        const picoParams = {
            "shiftfactor": 0.1, // Move detection window by 10% of its size
            "scalefactor": 1.1, // Resize detection window by 10% each step
            "minsize": Math.max(20, Math.floor(minDimension * 0.10)), // Min face size: 10% of smallest dimension, but at least 20px
            "maxsize": Math.floor(minDimension * 0.80) // Max face size: 80% of smallest dimension
        };

        // 5. Run Face Detection
        let dets = pico.run_cascade(imageForPico, facefinder_classify_region, picoParams);
        // Cluster detections (merge overlapping ones) using an IoU threshold of 0.2
        dets = pico.cluster_detections(dets, 0.2);

        // 6. Apply Hiding Method to Detected Faces
        // It's crucial to redraw the original image before applying modifications if multiple faces are processed,
        // especially for methods like blur, to ensure modifications are based on pristine pixels.
        // Since we draw original image at the very beginning and then draw modifications on top, this is fine.
        // If blurFace draws from mainCanvas instead of originalImg this note would be more critical.
        // current blurFace (drawing from `imageToBlurFrom` == originalImg) is good.

        let facesFound = 0;
        for (let i = 0; i < dets.length; ++i) {
            const det = dets[i];
            // Check detection confidence score (det[3])
            if (det[3] > 50.0) { // Confidence threshold, 50.0 is a common suggestion for pico.js
                facesFound++;
                const faceX = det[1] - det[2] / 2; // Center X - radius
                const faceY = det[0] - det[2] / 2; // Center Y - radius
                const faceSize = det[2];           // Diameter (size)

                let currentOptionValue = (typeof optionValue === 'number' && !isNaN(optionValue)) ? optionValue : 20;

                switch (method.toLowerCase()) {
                    case "pixelate":
                        pixelateFace(ctx, faceX, faceY, faceSize, faceSize, currentOptionValue);
                        break;
                    case "blur":
                        blurFace(ctx, faceX, faceY, faceSize, faceSize, currentOptionValue, canvas, originalImg);
                        break;
                    case "blackout":
                        ctx.fillStyle = (typeof fillColor === 'string') ? fillColor : "black";
                        ctx.fillRect(faceX, faceY, faceSize, faceSize);
                        break;
                    case "emoji":
                        drawEmoji(ctx, faceX, faceY, faceSize, faceSize, (typeof emojiCharacter === 'string') ? emojiCharacter : "😀");
                        break;
                    default: // Default to pixelate if method is unknown
                        pixelateFace(ctx, faceX, faceY, faceSize, faceSize, currentOptionValue);
                }
            }
        }
        if(facesFound === 0) console.log("No faces found matching the criteria.");

    } catch (error) {
        console.error("Error during face detection or processing:", error);
        // Draw an error message on the canvas if processing fails
        // The canvas already contains the original image or an error message from image loading.
        // Add a small error indication on top.
        ctx.fillStyle = "rgba(255, 0, 0, 0.7)"; 
        ctx.fillRect(0, 0, canvas.width, 30); // Red bar at the top
        ctx.fillStyle = "white";
        ctx.font = "16px Arial";
        ctx.textAlign = "left";
        ctx.textBaseline = "middle";
        ctx.fillText("Face hiding failed: " + error.message.substring(0, 50) + "...", 10, 15);
    }

    // 7. Return the Processed Canvas
    return canvas;
}