Image Copper Tone Filter Application

function processImage(originalImg) {
    // 1. Create a canvas
    const canvas = document.createElement('canvas');
    // Use naturalWidth/Height if available, otherwise fall back to width/height
    // This covers cases where the Image object might be an <img> element or a new Image()
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    canvas.width = width;
    canvas.height = height;

    // 2. Get the 2D rendering context
    const ctx = canvas.getContext('2d');

    // 3. Draw the original image onto the canvas
    // Check if width or height is zero, which can happen if the image isn't loaded
    if (width === 0 || height === 0) {
        console.error("Image has zero dimensions. Ensure it is loaded.");
        // Return an empty canvas or handle as an error, an empty canvas is a valid element
        return canvas;
    }
    ctx.drawImage(originalImg, 0, 0, width, height);

    // 4. Get image data
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error getting image data for copper tone filter: ", e);
        // This can happen due to cross-origin issues if the image is from a different domain
        // and lacks appropriate CORS headers.
        // In this case, the canvas contains the original image, so we return that.
        return canvas;
    }
    
    const data = imageData.data; // This is an Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

    // 5. Iterate through pixels and apply the copper tone effect
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Alpha channel is data[i+3] - we'll leave it as is.

        // Apply a sepia-like transformation first as a base
        // These coefficients are standard for sepia tone filters
        let sepiaR = (r * 0.393) + (g * 0.769) + (b * 0.189);
        let sepiaG = (r * 0.349) + (g * 0.686) + (b * 0.168);
        let sepiaB = (r * 0.272) + (g * 0.534) + (b * 0.131);

        // Now, adjust these sepia values to get a copper tone.
        // Copper is generally more reddish/orange than sepia.
        // We'll boost the reds, slightly adjust greens, and reduce blues.
        // These multipliers are chosen to shift the hue towards copper.
        let copperR = sepiaR * 1.15;
        let copperG = sepiaG * 0.95; 
        let copperB = sepiaB * 0.75;

        // Clamp values to the 0-255 range
        data[i]   = Math.min(255, copperR);
        data[i+1] = Math.min(255, copperG);
        data[i+2] = Math.min(255, copperB);
    }

    // 6. Update image data on the canvas
    ctx.putImageData(imageData, 0, 0);

    // 7. Return the canvas
    return canvas;
}