Image Upscaler Without Quality Loss

function processImage(originalImg, scaleFactor = 2, upscaleMethod = "smooth", sharpenStrength = 0) {
    // scaleFactor: multiplier for width/height (e.g., 2, 4).
    // upscaleMethod: "smooth" (uses native high-quality interpolation) or "pixelated" (preserves harsh edges perfect for pixel art).
    // sharpenStrength: a typical value between 0 and 1 representing edge enhancement applied to reduce blurriness.

    scaleFactor = Number(scaleFactor);
    if (isNaN(scaleFactor) || scaleFactor <= 0) scaleFactor = 2;
    
    sharpenStrength = Number(sharpenStrength);
    if (isNaN(sharpenStrength) || sharpenStrength < 0) sharpenStrength = 0;

    const canvas = document.createElement("canvas");
    canvas.width = Math.round(originalImg.width * scaleFactor);
    canvas.height = Math.round(originalImg.height * scaleFactor);
    
    const ctx = canvas.getContext("2d");
    
    // Configure scaling mode
    if (upscaleMethod.toLowerCase() === "pixelated") {
        ctx.imageSmoothingEnabled = false;
    } else {
        ctx.imageSmoothingEnabled = true;
        ctx.imageSmoothingQuality = "high";
    }
    
    // Draw and upscale the image
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    
    // Apply sharpen filter if strength > 0 to recover crisp edges
    if (sharpenStrength > 0) {
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;
        const w = canvas.width;
        const h = canvas.height;
        
        // Construct basic sharpening kernel based on strength
        const center = 1 + 4 * sharpenStrength;
        const edge = -sharpenStrength;
        const kernel = [
            0, edge, 0,
            edge, center, edge,
            0, edge, 0
        ];
        
        // Clone the source data buffer
        const src = new Uint8ClampedArray(data);
        
        for (let y = 0; y < h; y++) {
            for (let x = 0; x < w; x++) {
                const dstOff = (y * w + x) * 4;
                let r = 0, g = 0, b = 0;
                
                // Convolute 3x3
                for (let cy = 0; cy < 3; cy++) {
                    for (let cx = 0; cx < 3; cx++) {
                        let scy = y + cy - 1;
                        let scx = x + cx - 1;
                        
                        // Edge clamping to prevent black border artifacts
                        if (scy < 0) scy = 0; 
                        else if (scy >= h) scy = h - 1;
                        
                        if (scx < 0) scx = 0; 
                        else if (scx >= w) scx = w - 1;
                        
                        const srcOff = (scy * w + scx) * 4;
                        const wt = kernel[cy * 3 + cx];
                        
                        r += src[srcOff] * wt;
                        g += src[srcOff + 1] * wt;
                        b += src[srcOff + 2] * wt;
                    }
                }
                
                // Assign new pixel values
                data[dstOff]     = r;
                data[dstOff + 1] = g;
                data[dstOff + 2] = b;
                // Alpha (data[dstOff + 3]) remains safely untouched
            }
        }
        // Write the processed pixels back to the canvas
        ctx.putImageData(imageData, 0, 0);
    }
    
    return canvas;
}