Image Vignette Effect Application Tool

/**
 * Applies a vignette effect to an image.
 *
 * @param {Image} originalImg The original image object.
 * @param {number} [size=0.5] Controls the size of the clear central area (0 to 1). Larger values mean a larger clear area. 0 means the vignette starts right from the center, 1 means almost no vignette.
 * @param {number} [softness=0.5] Controls the softness or feathering of the vignette edge (0 to 1). 0 creates a hard edge, 1 creates a very smooth, gradual transition.
 * @param {number} [intensity=0.6] Controls the darkness/opacity of the vignette effect (0 to 1). 0 is fully transparent (no effect), 1 is fully opaque according to the specified color.
 * @param {string} [color='black'] The color of the vignette effect (e.g., 'black', '#202020', 'rgba(0,0,50,1)').
 * @returns {HTMLCanvasElement} A canvas element with the vignette effect applied.
 */
function processImage(originalImg, size = 0.5, softness = 0.5, intensity = 0.6, color = 'black') {
    // 1. Create canvas and context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure size, softness, and intensity are within valid ranges
    const clampedSize = Math.max(0, Math.min(1, size));
    const clampedSoftness = Math.max(0, Math.min(1, softness));
    const clampedIntensity = Math.max(0, Math.min(1, intensity));

    // Use naturalWidth/Height for accuracy if available
    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;
    canvas.width = w;
    canvas.height = h;

    // 2. Draw original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, w, h);

    // 3. Prepare vignette parameters
    const cx = w / 2;
    const cy = h / 2;

    // Calculate the maximum radius (distance to the farthest corner)
    // This ensures the gradient covers the entire image, regardless of aspect ratio
    const maxRadius = Math.sqrt(cx * cx + cy * cy);

    // Calculate gradient radii based on size and softness
    // r0: Radius where the vignette effect starts (fully transparent inside this radius)
    // r1: Radius where the vignette effect ends (reaches full intensity at this radius)

    // Let size determine the end of the fully transparent area relative to maxRadius
    const r0 = maxRadius * clampedSize;

    // Let softness determine how far the gradient spreads outwards from r0
    // If softness is 1, it spreads all the way to maxRadius.
    // If softness is 0, it theoretically ends at r0 (hard edge).
    const r1 = r0 + (maxRadius - r0) * clampedSoftness;

    // Ensure r1 is always slightly larger than r0 for a valid gradient,
    // especially handling the case when softness is 0.
    const effectiveR1 = Math.max(r1, r0 + 0.0001); // Add a tiny value

    // 4. Convert input color and intensity to RGBA strings for gradient stops
    // Helper function to parse any CSS color and apply an alpha value
    function getRgbaWithAlpha(cssColor, alpha) {
      try {
        // Create a temporary context to parse the color
        const tempCtx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
        tempCtx.fillStyle = cssColor;
        tempCtx.fillRect(0, 0, 1, 1); // Draw the color
        const [r, g, b] = tempCtx.getImageData(0, 0, 1, 1).data;
        // Ensure alpha is clamped between 0 and 1
        const clampedAlpha = Math.max(0, Math.min(1, alpha));
        return `rgba(${r}, ${g}, ${b}, ${clampedAlpha})`;
      } catch(e) {
        console.error("Failed to parse color:", cssColor, e);
        // Fallback to black if parsing fails
        const clampedAlpha = Math.max(0, Math.min(1, alpha));
        return `rgba(0, 0, 0, ${clampedAlpha})`;
      }
    }

    const transparentColor = getRgbaWithAlpha(color, 0); // Start color (fully transparent)
    const vignetteColor = getRgbaWithAlpha(color, clampedIntensity); // End color (target intensity)

    // 5. Create and apply radial gradient
    try {
        const gradient = ctx.createRadialGradient(cx, cy, r0, cx, cy, effectiveR1);

        // Add color stops: transparent at the inner radius, target color/intensity at the outer radius
        gradient.addColorStop(0, transparentColor);
        gradient.addColorStop(1, vignetteColor);

        // Apply the gradient overlay
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, w, h);
    } catch (e) {
        // Log error if gradient creation fails (e.g., invalid radii)
        console.error("Error creating vignette gradient:", e);
        // The canvas will still contain the original image in case of error here.
    }

    // 6. Return the canvas element
    return canvas;
}