Image Metallic Effect Converter

/**
 * Converts an image to have a metallic effect.
 * This is achieved by converting the image to high-contrast grayscale
 * and then overlaying a gradient that simulates a metallic sheen.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @returns {HTMLCanvasElement} A new canvas element with the metallic effect applied.
 */
function processImage(originalImg) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

    // Step 1: Apply a filter to make the image high-contrast grayscale.
    // This forms the base of the metallic look.
    // The values for contrast and brightness can be tweaked for different results.
    ctx.filter = 'grayscale(100%) contrast(180%) brightness(120%)';

    // Draw the original image onto the canvas. The filter will be applied during this step.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Reset the filter so it doesn't affect subsequent drawing operations.
    ctx.filter = 'none';

    // Step 2: Create a linear gradient to simulate a metallic reflection or sheen.
    // This gradient goes from light to dark to light, mimicking light reflecting off a curved surface.
    const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
    gradient.addColorStop(0, 'rgba(255, 255, 255, 0.5)'); // Top highlight
    gradient.addColorStop(0.25, 'rgba(255, 255, 255, 0.2)');
    gradient.addColorStop(0.5, 'rgba(0, 0, 0, 0.3)');     // Mid-tone shadow
    gradient.addColorStop(0.75, 'rgba(255, 255, 255, 0.2)');
    gradient.addColorStop(1, 'rgba(0, 0, 0, 0.4)');       // Bottom shadow

    // Step 3: Apply the gradient over the grayscale image.
    // 'soft-light' or 'overlay' composite operations work well for this effect.
    // 'soft-light' provides a more subtle sheen.
    ctx.globalCompositeOperation = 'soft-light';
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Reset the composite operation to the default
    ctx.globalCompositeOperation = 'source-over';

    // Return the final canvas
    return canvas;
}