Image CRT Lens Effect Enhancer For Nostalgic Wallpaper Design

/**
 * Enhances an image with a CRT lens effect featuring barrel distortion, vignette,
 * soft edge blur, scanlines, chromatic aberration, and luminous bloom to simulate
 * a retro display experience.
 *
 * @param {HTMLImageElement} originalImg The source image object.
 * @param {number} [distortion=0.2] The amount of barrel distortion (range ~0 to 1). Higher values create a more pronounced curve.
 * @param {number} [aberrationAmount=3.0] The strength of the chromatic aberration (color fringing) at the edges (range ~0 to 10).
 * @param {number} [bloomIntensity=0.3] The intensity of the luminous bloom effect for bright areas (range 0 to 1).
 * @param {number} [scanlineOpacity=0.1] The opacity of the horizontal scanlines (range 0 to 1). Set to 0 to disable.
 * @param {number} [vignetteIntensity=0.8] The darkness of the vignette at the corners (range 0 to 1).
 * @param {number} [vignetteSmoothness=0.7] The smoothness of the vignette's fade towards the center (range 0 to 1).
 * @returns {HTMLCanvasElement} A new canvas element displaying the processed image.
 */
function processImage(originalImg, distortion = 0.2, aberrationAmount = 3.0, bloomIntensity = 0.3, scanlineOpacity = 0.1, vignetteIntensity = 0.8, vignetteSmoothness = 0.7) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    canvas.width = w;
    canvas.height = h;

    // --- Pass 1: Barrel Distortion & Chromatic Aberration ---
    // This pass redraws the image with a lens distortion effect.
    // It's performance-intensive as it processes pixels one by one.
    const sourceCanvas = document.createElement('canvas');
    sourceCanvas.width = w;
    sourceCanvas.height = h;
    const sourceCtx = sourceCanvas.getContext('2d', { willReadFrequently: true });
    sourceCtx.drawImage(originalImg, 0, 0, w, h);
    const sourceData = sourceCtx.getImageData(0, 0, w, h);
    const distortedData = ctx.createImageData(w, h);

    const cx = w / 2;
    const cy = h / 2;
    const maxDist = Math.sqrt(cx * cx + cy * cy);
    const aberration = aberrationAmount / 500.0;

    const getPixel = (data, x, y) => {
        x = Math.floor(x);
        y = Math.floor(y);
        if (x < 0 || x >= w || y < 0 || y >= h) {
            return [0, 0, 0, 0];
        }
        const i = (y * w + x) * 4;
        return [data.data[i], data.data[i + 1], data.data[i + 2], data.data[i + 3]];
    };

    for (let y = 0; y < h; y++) {
        for (let x = 0; x < w; x++) {
            const dx = x - cx;
            const dy = y - cy;
            const d = Math.sqrt(dx * dx + dy * dy);
            const normDist = d / maxDist;
            
            const k = distortion * Math.pow(normDist, 2);
            const mag = 1 / (1 + k);

            const sx = cx + dx * mag;
            const sy = cy + dy * mag;

            const sx_r = cx + dx * (mag - aberration);
            const sy_r = cy + dy * (mag - aberration);
            const sx_b = cx + dx * (mag + aberration);
            const sy_b = cy + dy * (mag + aberration);
            
            const r = getPixel(sourceData, sx_r, sy_r)[0];
            const g = getPixel(sourceData, sx, sy)[1];
            const b = getPixel(sourceData, sx_b, sy_b)[2];
            const a = getPixel(sourceData, sx, sy)[3];

            const dest_i = (y * w + x) * 4;
            distortedData.data[dest_i] = r;
            distortedData.data[dest_i + 1] = g;
            distortedData.data[dest_i + 2] = b;
            distortedData.data[dest_i + 3] = a;
        }
    }
    ctx.putImageData(distortedData, 0, 0);

    // --- Soft Edge Blur ---
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = w; tempCanvas.height = h;
    const tempCtx = tempCanvas.getContext('2d');
    tempCtx.filter = 'blur(0.5px)';
    tempCtx.drawImage(canvas, 0, 0);
    ctx.clearRect(0, 0, w, h);
    ctx.drawImage(tempCanvas, 0, 0);

    // --- Pass 2: Luminous Bloom ---
    if (bloomIntensity > 0) {
        const bloomCanvas = document.createElement('canvas');
        bloomCanvas.width = w; bloomCanvas.height = h;
        const bloomCtx = bloomCanvas.getContext('2d', { willReadFrequently: true });
        bloomCtx.drawImage(canvas, 0, 0);

        const bloomData = bloomCtx.getImageData(0, 0, w, h);
        const lumaThreshold = 180;
        for (let i = 0; i < bloomData.data.length; i += 4) {
            const luma = 0.2126 * bloomData.data[i] + 0.7152 * bloomData.data[i+1] + 0.0722 * bloomData.data[i+2];
            if (luma < lumaThreshold) {
                bloomData.data[i] = bloomData.data[i+1] = bloomData.data[i+2] = 0;
            }
        }
        bloomCtx.putImageData(bloomData, 0, 0);
        
        bloomCtx.filter = `blur(${bloomIntensity * 20}px)`;
        bloomCtx.drawImage(bloomCanvas, 0, 0);

        ctx.globalCompositeOperation = 'screen';
        ctx.globalAlpha = bloomIntensity;
        ctx.drawImage(bloomCanvas, 0, 0);
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 1.0;
    }

    // --- Pass 3: Scanlines ---
    if (scanlineOpacity > 0) {
        ctx.fillStyle = `rgba(0, 0, 0, ${scanlineOpacity})`;
        for (let y = 0; y < h; y += 3) {
            ctx.fillRect(0, y, w, 1);
        }
    }

    // --- Pass 4: Vignette ---
    if (vignetteIntensity > 0) {
        const outerRadius = Math.sqrt(cx * cx + cy * cy);
        const gradient = ctx.createRadialGradient(cx, cy, outerRadius * (1 - vignetteSmoothness), cx, cy, outerRadius);
        gradient.addColorStop(0, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, `rgba(0,0,0,${vignetteIntensity})`);
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, w, h);
    }
    
    // --- Pass 5: Curved Screen Bezel ---
    const cornerRadius = w * 0.04;
    ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.rect(0, 0, w, h);
    ctx.moveTo(cornerRadius, 0);
    ctx.lineTo(w - cornerRadius, 0);
    ctx.arcTo(w, 0, w, cornerRadius, cornerRadius);
    ctx.lineTo(w, h - cornerRadius);
    ctx.arcTo(w, h, w - cornerRadius, h, cornerRadius);
    ctx.lineTo(cornerRadius, h);
    ctx.arcTo(0, h, 0, h - cornerRadius, cornerRadius);
    ctx.lineTo(0, cornerRadius);
    ctx.arcTo(0, 0, cornerRadius, 0, cornerRadius);
    ctx.closePath();
    ctx.fill('evenodd');

    return canvas;
}