Image Invisibility Effect Creator

function processImage(originalImg, opacity = 0.35, distortionAmplitude = 8, distortionFrequency = 25, glowColor = '#aaddff') {
    const width = originalImg.width;
    const height = originalImg.height;

    // Create a temporary canvas to read original pixel data
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = width;
    tempCanvas.height = height;
    const tempCtx = tempCanvas.getContext('2d');
    tempCtx.drawImage(originalImg, 0, 0);

    const imgData = tempCtx.getImageData(0, 0, width, height);
    const data = imgData.data;

    // Create a canvas for the distorted/faded "invisible" image
    const distortedCanvas = document.createElement('canvas');
    distortedCanvas.width = width;
    distortedCanvas.height = height;
    const distCtx = distortedCanvas.getContext('2d');

    const outputImageData = distCtx.createImageData(width, height);
    const outData = outputImageData.data;

    // Apply a mirage/refract distortion and change the opacity for the 'invisibility' look
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            // Wavy displacement map using sine/cosine functions for a magic spell distortion
            const dx = Math.sin(y / distortionFrequency) * distortionAmplitude;
            const dy = Math.cos(x / distortionFrequency) * distortionAmplitude;

            const nx = Math.floor(x + dx);
            const ny = Math.floor(y + dy);

            const destIdx = (y * width + x) * 4;

            // Only map pixels that are within the bounds of the original image
            if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
                const srcIdx = (ny * width + nx) * 4;
                outData[destIdx] = data[srcIdx];           // R
                outData[destIdx + 1] = data[srcIdx + 1];   // G
                outData[destIdx + 2] = data[srcIdx + 2];   // B
                // Reduce alpha to make it look transparent/invisible
                outData[destIdx + 3] = data[srcIdx + 3] * opacity; // A
            } else {
                // Out of bounds pixels are fully transparent
                outData[destIdx + 3] = 0;
            }
        }
    }

    distCtx.putImageData(outputImageData, 0, 0);

    // Create the final canvas to apply the magical shimmer/glow effect
    const finalCanvas = document.createElement('canvas');
    finalCanvas.width = width;
    finalCanvas.height = height;
    const fCtx = finalCanvas.getContext('2d');

    // Add a glowing shadow dropping effect
    fCtx.shadowColor = glowColor;
    fCtx.shadowBlur = 12;
    fCtx.drawImage(distortedCanvas, 0, 0);

    // To add the "spell" shimmer, we overlay the refracted image over itself with Screen blending
    fCtx.globalCompositeOperation = 'screen';
    fCtx.globalAlpha = 0.6;
    fCtx.drawImage(distortedCanvas, 0, 0);

    // Reset settings back for safety
    fCtx.globalAlpha = 1.0;
    fCtx.shadowBlur = 0;
    fCtx.globalCompositeOperation = 'source-over';

    return finalCanvas;
}