Image Gold Emblem Creator

/**
 * Converts an image with a transparent background into a gold emblem.
 * The effect works best on images with clear silhouettes (like icons or logos).
 *
 * @param {Image} originalImg The original Image object, which should have transparency.
 * @param {string} color1 The darkest shade of gold for the emblem's shadows.
 * @param {string} color2 The mid-tone shade of gold.
 * @param {string} color3 The lightest shade of gold for the highlights.
 * @param {number} intensity Controls the perceived depth/thickness of the emblem's bevel.
 * @param {number} blur Controls the softness of the shadows and highlights on the bevel.
 * @returns {HTMLCanvasElement} A canvas element displaying the golden emblem.
 */
function processImage(originalImg, color1 = '#B8860B', color2 = '#FFD700', color3 = '#FFFFE0', intensity = 5, blur = 4) {
    const {
        width,
        height
    } = originalImg;

    // 1. Create the final canvas
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Helper function to create a monochrome silhouette of the image.
    // This is used to create the shadow and highlight masks.
    const createShapeCanvas = (color) => {
        const shapeCanvas = document.createElement('canvas');
        shapeCanvas.width = width;
        shapeCanvas.height = height;
        const shapeCtx = shapeCanvas.getContext('2d', { willReadFrequently: true });
        shapeCtx.drawImage(originalImg, 0, 0);
        shapeCtx.globalCompositeOperation = 'source-in';
        shapeCtx.fillStyle = color;
        shapeCtx.fillRect(0, 0, width, height);
        return shapeCanvas;
    };

    // Create white and black versions of the input image's shape
    const whiteShape = createShapeCanvas('white');
    const blackShape = createShapeCanvas('black');

    // 2. Fill the canvas with a base gold gradient
    // This simulates a light source from the top-left
    const gradient = ctx.createLinearGradient(0, 0, width, height);
    gradient.addColorStop(0, color3); // Lightest color (top-left)
    gradient.addColorStop(0.5, color2); // Mid-tone color
    gradient.addColorStop(1, color1); // Darkest color (bottom-right)
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);

    // 3. Add the 3D bevel effect using blurred highlights and shadows.
    // We apply the blur filter to the context, which will affect all subsequent drawing operations.
    ctx.filter = `blur(${blur}px)`;

    // Draw the shadow layer.
    // 'multiply' blend mode darkens the base layer where the new layer is dark.
    // We draw the black shape offset to the bottom-right to create the shadow.
    ctx.globalCompositeOperation = 'multiply';
    ctx.drawImage(blackShape, intensity, intensity);

    // Draw the highlight layer.
    // 'lighter' (or 'screen') blend mode brightens the base layer where the new layer is light.
    // We draw the white shape offset to the top-left to create the highlight.
    ctx.globalCompositeOperation = 'lighter';
    ctx.drawImage(whiteShape, -intensity, -intensity);

    // 4. Add a sharp inner highlight to give the edge a hard, metallic feel.
    // We reset the filters to draw a sharp, un-blurred line.
    ctx.filter = 'none';
    const edgeIntensity = Math.ceil(intensity / 2);
    // We keep the 'lighter' blend mode to add this sharp highlight on top.
    ctx.drawImage(whiteShape, -edgeIntensity, -edgeIntensity);

    // 5. Mask the entire textured canvas with the original image's shape.
    // 'destination-in' keeps the existing canvas content ONLY where the new image is opaque.
    // This effectively cuts out our gold texture into the final shape.
    ctx.globalCompositeOperation = 'destination-in';
    ctx.drawImage(originalImg, 0, 0);

    return canvas;
}