Image Stained Glass Window Frame Creator

function processImage(originalImg, frameThickness = 20, frameColor = "saddlebrown", numPanesXY = "10,10", leadColor = "black", leadThickness = 2) {

    // Parse and validate parameters
    const [colsStr, rowsStr] = (numPanesXY || "10,10").split(',');
    let numCols = parseInt(colsStr, 10);
    let numRows = parseInt(rowsStr, 10);

    if (isNaN(numCols) || numCols <= 0) numCols = 10;
    if (isNaN(numRows) || numRows <= 0) numRows = 10;

    frameThickness = Math.max(0, Number(frameThickness));
    leadThickness = Math.max(0, Number(leadThickness));

    const imgWidth = originalImg.width;
    const imgHeight = originalImg.height;

    // Create the output canvas
    const canvas = document.createElement('canvas');
    canvas.width = imgWidth + 2 * frameThickness;
    canvas.height = imgHeight + 2 * frameThickness;
    const ctx = canvas.getContext('2d');

    // 1. Draw the outer frame background
    if (frameThickness > 0) {
        ctx.fillStyle = frameColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    // If image has no dimensions, content drawing is skipped.
    // The frame (if any) is already drawn.
    if (imgWidth === 0 || imgHeight === 0) {
        return canvas;
    }

    // 2. Prepare for cell color sampling
    // Create a small canvas to draw a scaled-down version of the image.
    // Each pixel on this sampling canvas will represent the color of a "pane".
    const samplingCanvas = document.createElement('canvas');
    samplingCanvas.width = numCols;
    samplingCanvas.height = numRows;
    const samplingCtx = samplingCanvas.getContext('2d');
    
    // Disable image smoothing on the sampling canvas for a sharper, pixelated look when scaled down.
    samplingCtx.imageSmoothingEnabled = false;
    // For cross-browser compatibility for imageSmoothingEnabled:
    samplingCtx.webkitImageSmoothingEnabled = false;
    samplingCtx.mozImageSmoothingEnabled = false;
    samplingCtx.msImageSmoothingEnabled = false;
    
    samplingCtx.drawImage(originalImg, 0, 0, numCols, numRows);

    // 3. Draw the "stained glass" cells (panes)
    for (let r = 0; r < numRows; r++) {
        // Calculate Y coordinates for the current row of cells, ensuring they are pixel-aligned
        const cellY = frameThickness + Math.round(r * imgHeight / numRows);
        const cellBottomY = frameThickness + Math.round((r + 1) * imgHeight / numRows);
        const cellRectH = cellBottomY - cellY;

        if (cellRectH <= 0) continue; // Skip if cell height is zero or negative (due to rounding with small imgHeight)

        for (let c = 0; c < numCols; c++) {
            // Get the color for the current pane from the sampling canvas
            const cellImageData = samplingCtx.getImageData(c, r, 1, 1); // (c,r) are coordinates on samplingCanvas
            const pixelData = cellImageData.data;
            
            ctx.fillStyle = `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`;
            
            // Calculate X coordinates for the current cell, ensuring pixel-alignment
            const cellX = frameThickness + Math.round(c * imgWidth / numCols);
            const cellRightX = frameThickness + Math.round((c + 1) * imgWidth / numCols);
            const cellRectW = cellRightX - cellX;

            if (cellRectW <= 0) continue; // Skip if cell width is zero or negative
            
            ctx.fillRect(cellX, cellY, cellRectW, cellRectH);
        }
    }

    // 4. Draw lead lines between panes and around the content area
    if (leadThickness > 0) {
        ctx.strokeStyle = leadColor;
        ctx.lineWidth = leadThickness;

        // Vertical lines
        for (let c = 0; c <= numCols; c++) {
            const lineX = frameThickness + Math.round(c * imgWidth / numCols);
            ctx.beginPath();
            ctx.moveTo(lineX, frameThickness);
            ctx.lineTo(lineX, frameThickness + imgHeight); // Spans the full image content height
            ctx.stroke();
        }

        // Horizontal lines
        for (let r = 0; r <= numRows; r++) {
            const lineY = frameThickness + Math.round(r * imgHeight / numRows);
            ctx.beginPath();
            ctx.moveTo(frameThickness, lineY);
            ctx.lineTo(frameThickness + imgWidth, lineY); // Spans the full image content width
            ctx.stroke();
        }
    }
    
    return canvas;
}