Image Purple Recoloring Tool

function processImage(originalImg) {
    // 1. Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 2. Set canvas dimensions to match the original image
    // Use naturalWidth/Height for the intrinsic dimensions of the image
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;
    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // 3. Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // 4. Get the image data (pixels) from the canvas
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error getting image data: ", e);
        // In case of cross-origin issues, getImageData can throw an error.
        // Display an error message on the canvas.
        ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the potentially drawn image

        // Define text properties
        const messageLine1 = "Error: Could not process image.";
        const messageLine2 = "Is it loaded from a different website (cross-origin issue)?";
        const fontSize = Math.min(16, canvas.width / (messageLine2.length / 1.8), canvas.height / 8); // Responsive font size
        ctx.font = `${fontSize}px Arial`; 
        ctx.textAlign = "center";
        
        // Add a semi-transparent background for better text visibility
        ctx.fillStyle = "rgba(230, 230, 230, 0.85)"; // Light gray background
        const textHeight = fontSize * 2.5; // Approximate height for two lines of text + padding
        ctx.fillRect(0, canvas.height / 2 - textHeight / 2, canvas.width, textHeight);

        // Draw the error text
        ctx.fillStyle = "red";
        ctx.fillText(messageLine1, canvas.width / 2, canvas.height / 2 - fontSize / 2 + fontSize * 0.1);
        ctx.fillText(messageLine2, canvas.width / 2, canvas.height / 2 + fontSize / 2 + fontSize * 0.3);
        
        return canvas; // Return the canvas with the error message
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray: R, G, B, A, R, G, B, A, ...

    // 5. Iterate through the pixel data and apply the purple recoloring
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];     // Red
        const g = data[i + 1]; // Green
        const b = data[i + 2]; // Blue
        // Alpha channel (data[i + 3]) is preserved

        // Calculate luminance (perceived brightness)
        // Standard formula for luminance: L = 0.2126*R + 0.7152*G + 0.0722*B
        const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;

        // Define the target purple color by factors for R, G, B components.
        // These factors will be multiplied by the luminance.
        // For a violet-like purple: R is moderate, G is low, B is high.
        const purpleFactorR = 0.8; // Red component factor
        const purpleFactorG = 0.4; // Green component factor (low, but not zero for a less "electric" purple)
        const purpleFactorB = 1.0; // Blue component factor (strongest)

        // Apply the purple color based on luminance
        data[i]     = luminance * purpleFactorR; // New Red
        data[i + 1] = luminance * purpleFactorG; // New Green
        data[i + 2] = luminance * purpleFactorB; // New Blue
        // Note: Uint8ClampedArray automatically clamps values to the 0-255 range.
    }

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

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