Image Shimmer Effect Adder

function processImage(
    originalImg,
    shimmerColor = "rgba(255, 255, 255, 0.4)",
    angle = "45deg",
    thickness = "25%",
    duration = "3s",
    blendMode = "screen"
) {
    // Determine accurate dimensions from the original image
    const width = originalImg.naturalWidth || originalImg.width || 300;
    const height = originalImg.naturalHeight || originalImg.height || 300;

    // Create a robust container to hold the canvas and the animated overlay
    const container = document.createElement('div');
    container.style.position = 'relative';
    container.style.display = 'inline-block';
    container.style.overflow = 'hidden';
    container.style.width = width + 'px';
    container.style.height = height + 'px';
    container.style.maxWidth = '100%';
    
    // Create the base canvas to paint the original image
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    
    // Draw the entire original image
    ctx.drawImage(originalImg, 0, 0, width, height);
    
    canvas.style.display = 'block';
    canvas.style.width = '100%';
    canvas.style.height = '100%';

    // Generate a unique identifier to avoid collisions when rendering multiple elements
    const animId = 'shimmer_' + Math.random().toString(36).substring(2, 10);
    
    // Define the animation keyframes and the overlay class styling
    // Sweeps from -120% to 120% to prevent hard edge clipping perfectly.
    const style = document.createElement('style');
    style.textContent = `
        @keyframes ${animId} {
            0% { transform: translateX(-120%); }
            65% { transform: translateX(120%); }
            100% { transform: translateX(120%); }
        }
        .shimmer-overlay-${animId} {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                ${angle}, 
                transparent calc(50% - ${thickness}), 
                ${shimmerColor} 50%, 
                transparent calc(50% + ${thickness})
            );
            animation: ${animId} ${duration} infinite linear;
            mix-blend-mode: ${blendMode};
            will-change: transform;
            pointer-events: none;
            z-index: 10;
        }
    `;

    // Create the shimmer overlay
    const shimmerLayer = document.createElement('div');
    shimmerLayer.className = `shimmer-overlay-${animId}`;

    // Assemble components into the container
    container.appendChild(style);
    container.appendChild(canvas);
    container.appendChild(shimmerLayer);

    return container;
}