Image Cloud Effect Adder

async function processImage(originalImg, amount = "50", scale = "50", opacity = "0.8", color = "#ffffff") {
    // Validate inputs
    const numAmount = Math.max(0, Math.min(100, parseFloat(amount) || 50));
    const numScale = Math.max(0, Math.min(100, parseFloat(scale) || 50));
    const numOpacity = Math.max(0, Math.min(1, parseFloat(opacity) || 0.8));
    
    // Utility to convert hex color to 0-1 RGB components for feColorMatrix
    function hexToRGBVec(hex) {
        hex = String(hex).replace('#', '').trim();
        if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');
        if (hex.length !== 6) return { r: 1, g: 1, b: 1 }; // Default white
        return {
            r: (parseInt(hex.substring(0, 2), 16) / 255) || 0,
            g: (parseInt(hex.substring(2, 4), 16) / 255) || 0,
            b: (parseInt(hex.substring(4, 6), 16) / 255) || 0
        };
    }
    const rgbColor = hexToRGBVec(color);

    const width = originalImg.width;
    const height = originalImg.height;
    
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    
    // Draw the underlying image first
    ctx.drawImage(originalImg, 0, 0);
    
    // Calculate fractal noise parameters
    // Scale adjusts the relative visual size of the clouds
    const maxDim = Math.max(width, height);
    const minFeature = Math.max(10, maxDim * 0.05); // Small/frequent clouds 
    const maxFeature = Math.max(50, maxDim * 0.6);  // Huge scattered clouds
    const featureSize = minFeature + (numScale / 100) * (maxFeature - minFeature);
    
    // Frequencies X and Y slightly stretched horizontally for realism
    const freqX = (1 / featureSize * 0.6).toFixed(6);
    const freqY = (1 / featureSize).toFixed(6);
    
    // Coverage offset ranges roughly from -1.5 (blank space) to -0.5 (heavy overcast)
    const A_add = (-1.5 + (numAmount / 100) * 1.0).toFixed(3);
    const seed = Math.floor(Math.random() * 100000);
    
    // Generate the procedural cloud layer using an SVG fractal noise filter
    const svgString = `
    <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
      <filter id="cloud" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
        <feTurbulence type="fractalNoise" baseFrequency="${freqX} ${freqY}" numOctaves="5" seed="${seed}" />
        <feColorMatrix type="matrix" values="
          0 0 0 0 ${rgbColor.r}
          0 0 0 0 ${rgbColor.g}
          0 0 0 0 ${rgbColor.b}
          2 0 0 0 ${A_add}
        " />
      </filter>
      <rect x="0" y="0" width="100%" height="100%" fill="transparent" filter="url(#cloud)"/>
    </svg>`;
    
    const dataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString.trim())}`;
    
    const cloudImg = new Image();
    cloudImg.crossOrigin = 'Anonymous'; // Avoid strict canvas tainting limits on some browsers
    
    await new Promise((resolve) => {
        cloudImg.onload = resolve;
        cloudImg.onerror = () => {
            console.warn("Failed to generate or overlay the SVG cloud structure.");
            resolve(); // Fail safely without fully crashing the image load
        };
        cloudImg.src = dataUrl;
    });
    
    // Overlay the cloud image matching the requested opacity
    ctx.globalAlpha = numOpacity;
    ctx.drawImage(cloudImg, 0, 0);
    ctx.globalAlpha = 1.0; // Reset
    
    return canvas;
}