Video And Image Upscaler Tool

function processImage(originalImg, scaleFactor = 2, version = 'v2', algorithm = 'smooth') {
    // scaleFactor: The multiplier for upscaling (e.g., 2 for 2x upscaling).
    // version: 'v1' (standard high-quality upscale) or 'v2' (enhanced upscale with sharpening).
    // algorithm: 'smooth' (bicubic/bilinear smoothing) or 'pixelart' (nearest-neighbor).

    const width = Math.floor(originalImg.width * scaleFactor);
    const height = Math.floor(originalImg.height * scaleFactor);

    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    
    // willReadFrequently is set for better performance during imageData extraction
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Setup scaling algorithm
    if (algorithm === 'pixelart') {
        ctx.imageSmoothingEnabled = false;
    } else {
        ctx.imageSmoothingEnabled = true;
        ctx.imageSmoothingQuality = 'high';
    }

    // Initial upscale rendering
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Apply "Videoup v2" enhancements: sharpening convolution to reduce upscale blur
    if (version === 'v2' && algorithm === 'smooth') {
        const imageData = ctx.getImageData(0, 0, width, height);
        const data = imageData.data;
        const src = new Uint8ClampedArray(data);
        
        const w = width;
        const h = height;

        // Apply a 3x3 sharpening kernel:
        // [  0, -1,  0 ]
        // [ -1,  5, -1 ]
        // [  0, -1,  0 ]
        for (let y = 1; y < h - 1; y++) {
            for (let x = 1; x < w - 1; x++) {
                const i = (y * w + x) * 4;
                
                const up = ((y - 1) * w + x) * 4;
                const down = ((y + 1) * w + x) * 4;
                const left = (y * w + x - 1) * 4;
                const right = (y * w + x + 1) * 4;

                // Red
                data[i] = (src[i] * 5) - src[up] - src[down] - src[left] - src[right];
                // Green
                data[i + 1] = (src[i + 1] * 5) - src[up + 1] - src[down + 1] - src[left + 1] - src[right + 1];
                // Blue
                data[i + 2] = (src[i + 2] * 5) - src[up + 2] - src[down + 2] - src[left + 2] - src[right + 2];
                
                // Alpha remains untouched (Uint8ClampedArray automatically clamps values to 0-255)
            }
        }
        
        ctx.putImageData(imageData, 0, 0);
    }

    return canvas;
}