Image Parchment Paper Creator

/**
 * Applies a parchment paper effect to an image, making it look like it was drawn
 * on old, textured paper with darkened edges.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {string} [baseColor='#f3e5ab'] The base color of the parchment paper in a CSS color format.
 * @param {number} [textureIntensity=0.25] The intensity of the paper grain/noise. Recommended range is 0 to 1.
 * @param {number} [vignetteStart=0.3] The starting point of the darkened edge effect, from 0 (center) to 1 (edge). A smaller number produces a larger vignette.
 * @param {string} [vignetteColor='rgba(80, 50, 20, 0.35)'] The color and opacity of the darkened edges.
 * @returns {HTMLCanvasElement} A new canvas element with the parchment effect applied.
 */
async function processImage(
    originalImg,
    baseColor = '#f3e5ab',
    textureIntensity = 0.25,
    vignetteStart = 0.3,
    vignetteColor = 'rgba(80, 50, 20, 0.35)'
) {
    // 1. Create a canvas and set its dimensions to match the original image.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // 2. Fill the canvas with the base parchment color.
    ctx.fillStyle = baseColor;
    ctx.fillRect(0, 0, width, height);

    // 3. Add a random noise texture to simulate paper grain.
    if (textureIntensity > 0) {
        const imageData = ctx.getImageData(0, 0, width, height);
        const data = imageData.data;
        // Clamp the intensity to a practical range for visual effect.
        const actualIntensity = Math.max(0, Math.min(1, textureIntensity)) * 255;

        for (let i = 0; i < data.length; i += 4) {
            // Generate a random grayscale noise value.
            const noise = (Math.random() - 0.5) * actualIntensity;

            // Apply the same noise value to R, G, and B channels to create grayscale noise.
            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
            // The alpha channel (data[i + 3]) remains unchanged.
        }
        ctx.putImageData(imageData, 0, 0);
    }

    // 4. Blend the original image onto the parchment texture.
    // 'multiply' mode is excellent for this, as it makes white parts of the image
    // transparent and darkens the paper with the image's content, like ink.
    ctx.globalCompositeOperation = 'multiply';
    ctx.drawImage(originalImg, 0, 0, width, height);

    // 5. Reset the composite operation for subsequent drawing.
    ctx.globalCompositeOperation = 'source-over';

    // 6. Add a vignette effect for darkened, aged edges.
    if (vignetteStart < 1) {
        const centerX = width / 2;
        const centerY = height / 2;
        
        // Calculate the radius to the furthest corner to ensure the gradient covers the entire canvas.
        const outerRadius = Math.sqrt(centerX * centerX + centerY * centerY);
        // The inner radius is where the vignette effect begins.
        const innerRadius = outerRadius * Math.max(0, Math.min(1, vignetteStart));

        // Create a radial gradient from transparent in the center to the vignette color at the edges.
        const gradient = ctx.createRadialGradient(centerX, centerY, innerRadius, centerX, centerY, outerRadius);
        gradient.addColorStop(0, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, vignetteColor);

        // Apply the vignette over the entire canvas.
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, width, height);
    }

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