Image Two Converter

function processImage(originalImg, conversionType = "two-images", gapWidth = 0, threshold = 128) {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    
    // Parse parameters to ensure valid numbers
    let gap = parseInt(gapWidth, 10);
    if (isNaN(gap)) gap = 0;
    
    let thresh = parseInt(threshold, 10);
    if (isNaN(thresh)) thresh = 128;

    // Based on the ambiguity of "Two" ("Два"), support three common interpretations:
    // 1. "2x-upscale" : Scales the image by a factor of two.
    // 2. "two-colors" : Converts the image to a two-color (black & white) binary format.
    // 3. "two-images" : Literally creates two copies of the image side-by-side.
    
    if (conversionType === "2x-upscale") {
        canvas.width = originalImg.width * 2;
        canvas.height = originalImg.height * 2;
        
        // Disable image smoothing for pixel-perfect 2x nearest-neighbor scaling if desired, 
        // otherwise let default bilinear smoothing happen.
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
        
    } else if (conversionType === "two-colors") {
        canvas.width = originalImg.width;
        canvas.height = originalImg.height;
        ctx.drawImage(originalImg, 0, 0);
        
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;
        
        for (let i = 0; i < data.length; i += 4) {
            // Skip fully transparent pixels
            if (data[i + 3] === 0) continue;

            // Calculate luminance using standard weights
            const r = data[i];
            const g = data[i + 1];
            const b = data[i + 2];
            const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
            
            // Snap to two colors: black or white based on threshold
            const colorValue = luminance >= thresh ? 255 : 0;
            
            data[i] = colorValue;       // Red
            data[i + 1] = colorValue;   // Green
            data[i + 2] = colorValue;   // Blue
            // Alpha remains unmodified
        }
        
        ctx.putImageData(imageData, 0, 0);
        
    } else {
        // Default: "two-images" -> Side-by-side duplication
        canvas.width = (originalImg.width * 2) + gap;
        canvas.height = originalImg.height;
        
        // Draw first image on the left
        ctx.drawImage(originalImg, 0, 0);
        
        // Draw second image on the right (after the gap)
        ctx.drawImage(originalImg, originalImg.width + gap, 0);
    }

    return canvas;
}