Photo Amber Preserved Filter Effect Tool

/**
 * Applies an Amber Preserved Filter Effect to an image.
 * The effect gives the image a warm, yellowish-orange tint, similar to objects preserved in amber.
 *
 * @param {HTMLImageElement} originalImg - The original image object. The image should be loaded before processing.
 * @param {number} [strength=0.8] - The strength of the amber effect, ranging from 0.0 (no effect) to 1.0 (full effect).
 * @returns {HTMLCanvasElement} A canvas element with the amber effect applied.
 */
function processImage(originalImg, strength = 0.8) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Determine the dimensions from the original image.
    // Use naturalWidth/Height if available and positive, as they represent the intrinsic dimensions.
    // Fallback to width/height if natural dimensions aren't available (e.g., SVG or not fully loaded).
    const imgWidth = (originalImg.naturalWidth && originalImg.naturalWidth > 0) ? originalImg.naturalWidth : originalImg.width;
    const imgHeight = (originalImg.naturalHeight && originalImg.naturalHeight > 0) ? originalImg.naturalHeight : originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // If strength is 0, no effect needs to be applied.
    // Return the canvas with the original image drawn on it.
    if (strength === 0) {
        return canvas;
    }

    // Clamp the strength parameter to ensure it's within the valid range [0, 1].
    strength = Math.max(0, Math.min(1, strength));

    // Get the pixel data from the canvas.
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray

    // Iterate over each pixel in the image data.
    // Each pixel is represented by 4 consecutive values in the array: R, G, B, A.
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];     // Original Red channel value
        const g = data[i + 1]; // Original Green channel value
        const b = data[i + 2]; // Original Blue channel value
        // data[i + 3] is the Alpha channel; we'll leave it unchanged to preserve transparency.

        // Define the target color transformation for a 100% amber effect.
        // These coefficients are chosen to produce a warm, amber-like appearance:
        // - Red component is enhanced and takes some green to become more orange.
        // - Green component is preserved and takes some red to become more yellowish/orange.
        // - Blue component is significantly reduced to give the warm tone.
        const r_target = (r * 0.90) + (g * 0.30) + (b * 0.05);
        const g_target = (r * 0.20) + (g * 0.70) + (b * 0.05);
        const b_target = (r * 0.00) + (g * 0.10) + (b * 0.50);

        // Linearly interpolate between the original pixel color and the target amber color
        // using the strength parameter.
        // Formula: new_value = (1 - strength) * original_value + strength * target_value
        data[i]   = (1 - strength) * r + strength * r_target;
        data[i+1] = (1 - strength) * g + strength * g_target;
        data[i+2] = (1 - strength) * b + strength * b_target;
        
        // Note on clamping:
        // `imageData.data` is a Uint8ClampedArray. This means that when a value is assigned,
        // it is automatically clamped to the range [0, 255] and rounded to the nearest integer.
        // For example, if `data[i]` is assigned `300`, it will store `255`.
        // If assigned `-10`, it will store `0`. If assigned `123.7`, it will store `124`.
        // So, explicit Math.min/max clamping is not strictly necessary here.
    }

    // Put the modified pixel data back onto the canvas.
    ctx.putImageData(imageData, 0, 0);

    // Return the canvas element with the applied effect.
    return canvas;
}