Please bookmark this page to avoid losing your image tool!

Image Metallic Effect Converter

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
/**
 * 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;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Metallic Effect Converter allows users to transform their images to display a striking metallic effect. This tool works by converting images into high-contrast grayscale, simulating a metallic sheen through a specially applied gradient overlay. Ideal for enhancing digital artwork, promotional materials, or personal projects, this converter can help create visually appealing images that stand out with a unique metallic finish.

Leave a Reply

Your email address will not be published. Required fields are marked *