Image Cover Texture Generator

/**
 * Applies a series of effects to an image to generate a "cover texture" look,
 * combining noise, vignette, saturation control, scan lines, and color overlays.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} [noiseAmount=20] The intensity of the monochrome noise to add (a value from 0 to 100 is recommended).
 * @param {number} [vignetteAmount=0.5] The size and intensity of the vignette effect (0-1). 0 is no vignette, 1 creates a solid border.
 * @param {number} [saturation=80] The color saturation percentage of the image (0-200). 100 is original, 0 is grayscale.
 * @param {number} [scanlineOpacity=0.1] The opacity of the horizontal scan lines (0-1).
 * @param {string} [overlayColor=''] A CSS color string to overlay on the image (e.g., 'rgba(0,0,255,0.2)'). Leave empty for no overlay.
 * @param {string} [overlayBlendMode='overlay'] The canvas blend mode for the color overlay (e.g., 'multiply', 'screen', 'overlay').
 * @param {string} [vignetteColor='#000000'] The CSS color string for the vignette.
 * @returns {HTMLCanvasElement} A new canvas element with the processed image.
 */
function processImage(originalImg, noiseAmount = 20, vignetteAmount = 0.5, saturation = 80, scanlineOpacity = 0.1, overlayColor = '', overlayBlendMode = 'overlay', vignetteColor = '#000000') {
    // 1. Create canvas and get context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    canvas.width = w;
    canvas.height = h;

    // 2. Draw the original image with saturation adjustment
    // The filter property is applied to any subsequent drawing operations.
    ctx.filter = `saturate(${saturation}%)`;
    ctx.drawImage(originalImg, 0, 0, w, h);
    ctx.filter = 'none'; // Reset filter for subsequent operations

    // 3. Apply noise
    if (noiseAmount > 0) {
        const imageData = ctx.getImageData(0, 0, w, h);
        const data = imageData.data;
        const noiseValue = Math.abs(noiseAmount);

        for (let i = 0; i < data.length; i += 4) {
            // Add monochrome noise, clamped to 0-255 range
            const noise = (Math.random() - 0.5) * noiseValue;
            data[i] = Math.max(0, Math.min(255, data[i] + noise)); // Red
            data[i + 1] = Math.max(0, Math.min(255, data[i + 1] + noise)); // Green
            data[i + 2] = Math.max(0, Math.min(255, data[i + 2] + noise)); // Blue
        }
        ctx.putImageData(imageData, 0, 0);
    }

    // 4. Apply color overlay
    if (overlayColor) {
        ctx.globalCompositeOperation = overlayBlendMode;
        ctx.fillStyle = overlayColor;
        ctx.fillRect(0, 0, w, h);
        ctx.globalCompositeOperation = 'source-over'; // Reset blend mode
    }

    // 5. Apply scan lines
    if (scanlineOpacity > 0) {
        ctx.fillStyle = `rgba(0, 0, 0, ${Math.max(0, Math.min(1, scanlineOpacity))})`;
        for (let y = 0; y < h; y += 3) { // Draw lines every 3 pixels
            ctx.fillRect(0, y, w, 1);
        }
    }

    // 6. Apply vignette
    if (vignetteAmount > 0) {
        const sanitizedVignetteAmount = Math.max(0, Math.min(1, vignetteAmount));
        
        // Determine the vignette's radius
        const outerRadius = Math.sqrt(Math.pow(w / 2, 2) + Math.pow(h / 2, 2));
        const innerRadius = outerRadius * (1 - sanitizedVignetteAmount);

        // To handle any valid CSS color for the vignette, we parse it to get its RGB components.
        // This allows us to create a transparent version of the same color for the gradient.
        const colorCanvas = document.createElement('canvas');
        colorCanvas.width = 1;
        colorCanvas.height = 1;
        const colorCtx = colorCanvas.getContext('2d', { willReadFrequently: true });
        colorCtx.fillStyle = vignetteColor;
        colorCtx.fillRect(0, 0, 1, 1);
        const [r, g, b] = colorCtx.getImageData(0, 0, 1, 1).data;

        const gradient = ctx.createRadialGradient(
            w / 2, h / 2, innerRadius,
            w / 2, h / 2, outerRadius
        );

        gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 0)`);
        gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 1)`);

        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, w, h);
    }

    // 7. Return the final canvas
    return canvas;
}