Image Recolor To Purple Tool

function processImage(originalImg) {
    // 1. Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // Opt-in for performance with getImageData/putImageData

    // 2. Set canvas dimensions to match the original image
    // Use naturalWidth/Height for the actual dimensions of the image content
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Handle cases where image dimensions might be zero (e.g., image not loaded or invalid)
    if (canvas.width === 0 || canvas.height === 0) {
        // Return an empty or minimal canvas, or throw an error
        // For now, returning the (potentially 0x0) canvas is fine.
        // Drawing an empty image to a 0x0 canvas will do nothing.
    }

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

    // 4. Get the image data from the canvas
    // This can throw a security error if the image is cross-origin and the canvas is tainted.
    // The problem implies the image is accessible.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error getting image data: ", e);
        // Return the canvas with the original image drawn, if we can't process it
        // Or, you could return an error indicator or the original image element.
        // For this problem, returning the canvas (even if tainted and unprocessed) is an option.
        // A more robust solution might involve returning an error or a message.
        // However, sticking to returning a canvas as per instructions:
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = originalImg.naturalWidth || 100;
        errorCanvas.height = originalImg.naturalHeight || 30;
        const errorCtx = errorCanvas.getContext('2d');
        errorCtx.fillStyle = 'red';
        errorCtx.fillRect(0,0,errorCanvas.width, errorCanvas.height);
        errorCtx.fillStyle = 'white';
        errorCtx.font = '12px Arial';
        errorCtx.textAlign = 'center';
        errorCtx.fillText('Error processing image (CORS?)', errorCanvas.width/2, errorCanvas.height/2);
        return errorCanvas; // Or simply return the 'canvas' from above, which would contain the original image.
                           // For now, let's assume image data is accessible.
                           // If not, the original `canvas` will be returned after the try-catch block
                           // with the original image drawn on it.
    }
    
    // If getImageData failed (e.g. for a 0x0 canvas), imageData might be null or pixels empty.
    // This check handles cases like 0-width/height images.
    if (!imageData || !imageData.data) {
        return canvas; // Return original canvas if no data.
    }
    
    const pixels = imageData.data; // This is a Uint8ClampedArray

    // Target purple color #6F3C89
    const targetR = 0x6F; // 111 in decimal
    const targetG = 0x3C; // 60 in decimal
    const targetB = 0x89; // 137 in decimal

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

        // If the pixel is fully transparent, we can skip it or leave it as is.
        // The original alpha is preserved anyway.
        if (a === 0) {
            continue;
        }

        // Calculate luminance (a common way to get grayscale intensity)
        // Standard formula: L = 0.299*R + 0.587*G + 0.114*B
        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
        
        // Normalize luminance to a 0-1 factor
        const luminanceFactor = luminance / 255;

        // Apply the target purple color, scaled by the luminanceFactor
        // This creates a "duotone" or "monochrome" effect with the target color.
        // Darker parts of the original image become darker shades of purple.
        // Lighter parts of the original image become lighter shades of purple (up to the full target purple).
        pixels[i] = Math.round(luminanceFactor * targetR);     // New Red
        pixels[i + 1] = Math.round(luminanceFactor * targetG); // New Green
        pixels[i + 2] = Math.round(luminanceFactor * targetB); // New Blue
        // pixels[i + 3] (alpha) remains unchanged to preserve original transparency
    }

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

    // 7. Return the canvas
    return canvas;
}