Image Bima And Boma Converter

function processImage(originalImg, gapStr = "20", bgColor = "#ffffff", labelSizeStr = "40", labelColor = "#000000", leftText = "Бима", rightText = "Бома") {
    // Parse input parameters (ensuring type standardizing)
    let gap = parseInt(gapStr, 10);
    if (isNaN(gap) || gap < 0) gap = 20;

    let labelSize = parseInt(labelSizeStr, 10);
    if (isNaN(labelSize) || labelSize < 0) labelSize = 40;
    
    // Obtain original image dimensions safely
    let W = originalImg.naturalWidth || originalImg.width;
    let H = originalImg.naturalHeight || originalImg.height;

    // Calculate vertical space for text labels, if requested
    let textHeight = labelSize > 0 ? labelSize + 30 : 0; 
    
    let totalW = W * 2 + gap;
    let totalH = H + textHeight;
    
    // Initialize main canvas configuration and background
    let canvas = document.createElement("canvas");
    canvas.width = totalW;
    canvas.height = totalH;
    let ctx = canvas.getContext("2d");

    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Initialize offscreen canvas to extract raw original image data securely
    let origCanvas = document.createElement("canvas");
    origCanvas.width = W;
    origCanvas.height = H;
    let origCtx = origCanvas.getContext("2d");
    origCtx.drawImage(originalImg, 0, 0);
    
    let origData;
    try {
        origData = origCtx.getImageData(0, 0, W, H).data;
    } catch (e) {
        // Cross-origin fallback for external images if blocked by CORS
        console.warn("Canvas tainted by cross-origin image - process might be restricted");
        return canvas;
    }

    // Initialize another offscreen canvas to process the mirrored images (Bima and Boma)
    // This resolves alpha channel transparency issues onto colored backgrounds
    let bbCanvas = document.createElement("canvas");
    bbCanvas.width = totalW;
    bbCanvas.height = H;
    let bbCtx = bbCanvas.getContext("2d");
    let bbImageData = bbCtx.createImageData(totalW, H);
    let rData = bbImageData.data;

    let fHalf = W / 2;
    
    // Pixel-perfect symmetric mirroring mapping for true bisection 
    for (let y = 0; y < H; y++) {
        for (let x = 0; x < totalW; x++) {
            let destIdx = (y * totalW + x) * 4;

            if (x < W) {
                // "Bima" - Mirrored generation originating from the left half
                let srcX = (x < fHalf) ? x : (W - 1 - x);
                let srcIdx = (y * W + srcX) * 4;
                rData[destIdx] = origData[srcIdx];
                rData[destIdx+1] = origData[srcIdx+1];
                rData[destIdx+2] = origData[srcIdx+2];
                rData[destIdx+3] = origData[srcIdx+3];
                
            } else if (x >= W + gap) {
                // "Boma" - Mirrored generation originating from the right half
                let bomaX = x - (W + gap);
                let srcX = (bomaX < fHalf) ? (W - 1 - bomaX) : bomaX;
                let srcIdx = (y * W + srcX) * 4;
                rData[destIdx] = origData[srcIdx];
                rData[destIdx+1] = origData[srcIdx+1];
                rData[destIdx+2] = origData[srcIdx+2];
                rData[destIdx+3] = origData[srcIdx+3];
            }
            // Gap space natively remains 0 (transparent) since ImageData defaults to RGBA(0,0,0,0)
        }
    }
    
    // Plot final Bima and Boma combinations to their sub-canvas layer
    bbCtx.putImageData(bbImageData, 0, 0);

    // Stamp the resulting twin effect directly above the fully rendered background
    ctx.drawImage(bbCanvas, 0, 0);

    // Apply the captions
    if (labelSize > 0) {
        ctx.fillStyle = labelColor;
        ctx.font = `bold ${labelSize}px sans-serif`;
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        
        // Vertically aim text in center of the allocated height space beneath the images
        let textY = H + (textHeight / 2);
        
        ctx.fillText(leftText, W / 2, textY);
        ctx.fillText(rightText, W + gap + (W / 2), textY);
    }

    return canvas;
}