Photo Ultraviolet Filter Effect Tool

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    // The willReadFrequently hint can be beneficial for performance in some browsers.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Handle cases where the image might not be fully loaded or has no dimensions
    if (width === 0 || height === 0) {
        // Return a minimal canvas or handle error as appropriate
        // For this example, returning a 1x1 canvas to meet "must return canvas"
        console.warn("Original image has zero dimensions. Returning a 1x1 canvas.");
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }

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

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

    let imageData;
    try {
        // Get the pixel data from the canvas
        imageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        // This can happen due to CORS restrictions if the image is from another domain
        // and the server doesn't send appropriate CORS headers.
        console.error("Could not get image data for processing (CORS issue?):", e);
        // In case of an error (e.g., canvas is tainted), return the canvas
        // with the original image drawn on it.
        return canvas;
    }
    
    const data = imageData.data;

    // Iterate over each pixel (RGBA components)
    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 (data[i + 3]) will be preserved

        // Apply the "Ultraviolet Filter Effect"
        // These coefficients are chosen to simulate an artistic UV/blacklight effect:
        // - Reds are made purplish.
        // - Greens are heavily suppressed.
        // - Blues are intensified and slightly mixed with red.
        // - White areas tend towards magenta/bright purple.
        
        const newR = r * 0.7 + b * 0.3;
        const newG = g * 0.2;
        const newB = b * 1.2 + r * 0.1;

        // Assign new values, clamping them to the valid [0, 255] range
        data[i] = Math.min(255, Math.max(0, newR));
        data[i + 1] = Math.min(255, Math.max(0, newG));
        data[i + 2] = Math.min(255, Math.max(0, newB));
    }

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

    return canvas;
}