Image Chaotic Noise And Blur Generator For Deepfake Detection Evasion

/**
 * Applies chaotic noise and a gaussian blur effect to an image. This technique is sometimes
 * used to degrade image quality in specific ways to attempt to evade AI detection systems,
 * such as those for deepfakes, by adding artifacts that such systems may not be trained on.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} [noiseIntensity=30] The intensity of the random noise. Affects the range of color deviation for each pixel. A value of 0 means no noise. Recommended range is 0-100.
 * @param {number} [blurRadius=2] The radius of the gaussian blur in pixels. A value of 0 means no blur.
 * @returns {HTMLCanvasElement} A new canvas element displaying the processed image with added blur and noise.
 */
function processImage(originalImg, noiseIntensity = 30, blurRadius = 2) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the intrinsic dimensions of the original image to avoid issues with CSS styling
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    // Set the canvas dimensions to match the image
    canvas.width = width;
    canvas.height = height;

    // Apply the blur filter first, if a radius is specified.
    // This blurs the original image details.
    if (blurRadius > 0) {
        ctx.filter = `blur(${blurRadius}px)`;
    }

    // Draw the image onto the canvas. The blur filter (if set) is applied during this step.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Reset the filter so it doesn't affect subsequent pixel manipulation (like putImageData)
    ctx.filter = 'none';

    // Add chaotic noise if a non-zero intensity is specified
    if (noiseIntensity > 0) {
        // Get the pixel data from the canvas (which now contains the blurred image)
        const imageData = ctx.getImageData(0, 0, width, height);
        const data = imageData.data;

        // Iterate over each pixel in the image data array.
        // The array is a flat [R, G, B, A, R, G, B, A, ...] structure, so we step by 4.
        for (let i = 0; i < data.length; i += 4) {
            // Skip fully transparent pixels to avoid adding noise to empty areas
            if (data[i + 3] === 0) {
                continue;
            }

            // Generate a random noise value for each color channel (R, G, B).
            // (Math.random() - 0.5) gives a range of -0.5 to 0.5.
            // Multiplying by 2 * noiseIntensity scales it to a range of -noiseIntensity to +noiseIntensity.
            const redNoise = (Math.random() - 0.5) * 2 * noiseIntensity;
            const greenNoise = (Math.random() - 0.5) * 2 * noiseIntensity;
            const blueNoise = (Math.random() - 0.5) * 2 * noiseIntensity;

            // Add the noise to the original pixel data and clamp the result to the valid 0-255 color range.
            data[i] = Math.max(0, Math.min(255, data[i] + redNoise));
            data[i + 1] = Math.max(0, Math.min(255, data[i + 1] + greenNoise));
            data[i + 2] = Math.max(0, Math.min(255, data[i + 2] + blueNoise));
            // The alpha channel (data[i + 3]) is left unchanged to preserve transparency.
        }

        // Put the modified pixel data back onto the canvas.
        ctx.putImageData(imageData, 0, 0);
    }

    // Return the canvas element containing the final processed image.
    return canvas;
}