Image Glow Effect Enhancer With Purple Tint

/**
 * Applies a glowing purple effect to an image and enhances its contrast.
 *
 * @param {HTMLImageElement} originalImg The original image element.
 * @param {number} [glowRadius=8] The radius of the glow effect in pixels. Higher values create a softer, more spread-out glow.
 * @param {number} [purpleAmount=40] The intensity of the purple tint. This value is added to the red and blue channels.
 * @param {number} [contrast=1.4] The contrast enhancement factor. Values > 1 increase contrast, making darks darker and lights lighter.
 * @returns {HTMLCanvasElement} A new canvas element with the applied effects.
 */
function processImage(originalImg, glowRadius = 8, purpleAmount = 40, contrast = 1.4) {
    // Create the final canvas to draw on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

    // --- Step 1: Create the base image with contrast and purple tint ---

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

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

    // Helper function to clamp color values between 0 and 255
    const clamp = (value) => Math.max(0, Math.min(255, value));

    // Loop through each pixel (represented by 4 values: R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        // Apply contrast
        // This formula adjusts the color value based on the contrast factor
        r = clamp(((r / 255 - 0.5) * contrast + 0.5) * 255);
        g = clamp(((g / 255 - 0.5) * contrast + 0.5) * 255);
        b = clamp(((b / 255 - 0.5) * contrast + 0.5) * 255);

        // Apply a purple tint by adding to the red and blue channels
        r = clamp(r + purpleAmount);
        b = clamp(b + purpleAmount);

        // Store the new color values back into the imageData array
        data[i] = r;
        data[i + 1] = g;
        data[i + 2] = b;
    }

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


    // --- Step 2: Create the glow layer ---

    // Create a temporary canvas for the glow effect
    const glowCanvas = document.createElement('canvas');
    const glowCtx = glowCanvas.getContext('2d');
    glowCanvas.width = canvas.width;
    glowCanvas.height = canvas.height;
    
    // Apply a blur filter to the temporary canvas context
    glowCtx.filter = `blur(${glowRadius}px)`;

    // Draw the tinted/contrasted image (from the main canvas) onto the
    // temporary canvas. The filter will be applied during this draw operation.
    glowCtx.drawImage(canvas, 0, 0);


    // --- Step 3: Composite the glow layer onto the base image ---

    // Set the global composite operation to 'lighter'. This creates an
    // additive blending effect, which is perfect for glows.
    ctx.globalCompositeOperation = 'lighter';

    // Draw the blurred glow canvas on top of the base image.
    // Drawing it twice can intensify the effect.
    ctx.drawImage(glowCanvas, 0, 0);
    
    // Reset the blending mode to the default
    ctx.globalCompositeOperation = 'source-over';

    // Return the final canvas with all effects applied
    return canvas;
}