GBA Image Effect Generator

function processImage(originalImg, maxDimension = 240, apply15BitColor = "true", drawLCDGrid = "false") {
    // Parse parameters
    const maxDim = Number(maxDimension) || 240;
    const is15Bit = String(apply15BitColor).toLowerCase() === "true";
    const isGrid = String(drawLCDGrid).toLowerCase() === "true";

    const width = originalImg.width;
    const height = originalImg.height;

    if (width === 0 || height === 0) {
        throw new Error("Invalid image dimensions.");
    }

    // Determine the Game Boy Advance downscaled resolution
    // GBA resolution is typically around 240x160.
    // We scale the image down so its largest dimension is `maxDim`.
    const ratio = width / height;
    let gbaW, gbaH;
    
    if (width > height) {
        gbaW = maxDim;
        gbaH = Math.max(1, Math.round(maxDim / ratio));
    } else {
        gbaH = maxDim;
        gbaW = Math.max(1, Math.round(maxDim * ratio));
    }

    // Create offscreen canvas for downscaling
    const offscreen = document.createElement('canvas');
    offscreen.width = gbaW;
    offscreen.height = gbaH;
    const offCtx = offscreen.getContext('2d', { willReadFrequently: true });
    
    // Draw the image scaled down (this creates the pixelated block shape)
    offCtx.drawImage(originalImg, 0, 0, gbaW, gbaH);

    // Apply 15-bit color quantization to match the real GBA color depth constraint
    // GBA uses 5 bits per channel (Red, Green, Blue), which corresponds to 32 steps (0-31).
    if (is15Bit) {
        const imgData = offCtx.getImageData(0, 0, gbaW, gbaH);
        const data = imgData.data;
        
        // 255 / 31 provides the exact multiplier to scale 0-31 up to 0-255
        const step = 255 / 31;
        
        for (let i = 0; i < data.length; i += 4) {
            data[i]     = Math.round(Math.round(data[i] / step) * step);
            data[i + 1] = Math.round(Math.round(data[i + 1] / step) * step);
            data[i + 2] = Math.round(Math.round(data[i + 2] / step) * step);
            // data[i+3] is the alpha channel, left alone.
        }
        offCtx.putImageData(imgData, 0, 0);
    }

    // Prepare final canvas to scale the image back up to its original size
    const resultCanvas = document.createElement('canvas');
    resultCanvas.width = width;
    resultCanvas.height = height;
    const ctx = resultCanvas.getContext('2d');

    // Disable image smoothing to preserve the hard edges of the pixel art
    ctx.imageSmoothingEnabled = false;
    ctx.mozImageSmoothingEnabled = false;
    ctx.webkitImageSmoothingEnabled = false;
    ctx.msImageSmoothingEnabled = false;

    // Scale it back up
    ctx.drawImage(offscreen, 0, 0, width, height);

    // Overlay an optional LCD pixel grid to simulate hardware screen gaps
    if (isGrid) {
        const scaleX = width / gbaW;
        const scaleY = height / gbaH;
        
        ctx.fillStyle = 'rgba(0, 0, 0, 0.15)'; // Subtle semi-transparent black for the grid
        
        // Draw vertical sub-pixel lines
        for (let i = 1; i < gbaW; i++) {
            const x = Math.round(i * scaleX);
            ctx.fillRect(x, 0, 1, height);
        }
        
        // Draw horizontal sub-pixel lines
        for (let i = 1; i < gbaH; i++) {
            const y = Math.round(i * scaleY);
            ctx.fillRect(0, y, width, 1);
        }
    }

    return resultCanvas;
}