Image Mystery Solver Tool

function processImage(originalImg, maxResolution = 800, themeColor = "#222222") {
    // A dashboard container to hold various mystery-solving filter results arrays
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.flexWrap = 'wrap';
    container.style.gap = '20px';
    container.style.padding = '20px';
    container.style.backgroundColor = themeColor;
    container.style.color = '#00ffcc';
    container.style.fontFamily = 'monospace, sans-serif';
    container.style.boxSizing = 'border-box';
    container.style.justifyContent = 'center';

    // Scale image down if it's too large to prevent browser freezing during multi-canvas processing
    let w = originalImg.width;
    let h = originalImg.height;
    if (w > maxResolution || h > maxResolution) {
        const ratio = Math.min(maxResolution / w, maxResolution / h);
        w = Math.floor(w * ratio);
        h = Math.floor(h * ratio);
    }

    // Common forensics techniques used to solve image mysteries (CTF/Steganography)
    const filters = [
        { name: "1. Original Image", type: "NONE" },
        { name: "2. LSB (Least Significant Bit) RGB", type: "LSB_RGB" },
        { name: "3. LSB Red Channel", type: "LSB_RED" },
        { name: "4. LSB Green Channel", type: "LSB_GREEN" },
        { name: "5. LSB Blue Channel", type: "LSB_BLUE" },
        { name: "6. Extreme Brightness (Reveal Dark)", type: "BRIGHT" },
        { name: "7. Extreme Contrast", type: "CONTRAST" },
        { name: "8. Color Inversion", type: "INVERT" },
        { name: "9. Extract Alpha Channel", type: "ALPHA" },
        { name: "10. Black & White Threshold", type: "THRESHOLD" }
    ];

    filters.forEach(filter => {
        const wrapper = document.createElement('div');
        wrapper.style.display = 'flex';
        wrapper.style.flexDirection = 'column';
        wrapper.style.alignItems = 'center';
        wrapper.style.backgroundColor = '#111';
        wrapper.style.border = '1px solid #00ffcc';
        wrapper.style.borderRadius = '8px';
        wrapper.style.padding = '10px';
        wrapper.style.width = '30%';
        wrapper.style.minWidth = '280px';
        wrapper.style.boxShadow = '0 4px 6px rgba(0,255,204,0.1)';

        const title = document.createElement('h3');
        title.textContent = filter.name;
        title.style.margin = '0 0 10px 0';
        title.style.fontSize = '14px';
        title.style.textAlign = 'center';

        const canvas = document.createElement('canvas');
        canvas.width = w;
        canvas.height = h;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(originalImg, 0, 0, w, h);

        if (filter.type !== "NONE") {
            const imgData = ctx.getImageData(0, 0, w, h);
            const data = imgData.data;

            for (let i = 0; i < data.length; i += 4) {
                let r = data[i];
                let g = data[i + 1];
                let b = data[i + 2];
                let a = data[i + 3];

                switch(filter.type) {
                    case "LSB_RGB":
                        data[i] = (r & 1) ? 255 : 0;
                        data[i + 1] = (g & 1) ? 255 : 0;
                        data[i + 2] = (b & 1) ? 255 : 0;
                        break;
                    case "LSB_RED":
                        data[i] = data[i + 1] = data[i + 2] = (r & 1) ? 255 : 0;
                        break;
                    case "LSB_GREEN":
                        data[i] = data[i + 1] = data[i + 2] = (g & 1) ? 255 : 0;
                        break;
                    case "LSB_BLUE":
                        data[i] = data[i + 1] = data[i + 2] = (b & 1) ? 255 : 0;
                        break;
                    case "BRIGHT":
                        data[i] = Math.min(255, r * 15);
                        data[i + 1] = Math.min(255, g * 15);
                        data[i + 2] = Math.min(255, b * 15);
                        break;
                    case "CONTRAST":
                        data[i] = r > 127 ? 255 : 0;
                        data[i + 1] = g > 127 ? 255 : 0;
                        data[i + 2] = b > 127 ? 255 : 0;
                        break;
                    case "INVERT":
                        data[i] = 255 - r;
                        data[i + 1] = 255 - g;
                        data[i + 2] = 255 - b;
                        break;
                    case "ALPHA":
                        data[i] = data[i + 1] = data[i + 2] = a;
                        data[i + 3] = 255;
                        break;
                    case "THRESHOLD":
                        let luminance = (0.299 * r + 0.587 * g + 0.114 * b);
                        let val = luminance > 127 ? 255 : 0;
                        data[i] = data[i + 1] = data[i + 2] = val;
                        break;
                }
            }
            ctx.putImageData(imgData, 0, 0);
        }

        canvas.style.maxWidth = '100%';
        canvas.style.height = 'auto';
        canvas.style.backgroundColor = '#000'; // To visualize transparency in Alpha mode

        wrapper.appendChild(title);
        wrapper.appendChild(canvas);
        container.appendChild(wrapper);
    });

    return container;
}