Image Chaotic Deep Modifications Editor

/**
 * Applies chaotic, deep modifications to an image's pixel data,
 * designed to be nearly invisible to the human eye at low intensity levels.
 *
 * @param {Image} originalImg The original Image object to process. Must be fully loaded.
 * @param {number} [chaosLevel=0.5] A number between 0 and 1 representing the probability of any given pixel being modified. Higher values mean more pixels are altered.
 * @param {number} [intensity=1] An integer between 1 and 8 representing the "depth" of the modification. This controls how many of the least significant bits of each color channel are affected. An intensity of 1 is generally imperceptible.
 * @returns {HTMLCanvasElement} A new canvas element with the modified image.
 */
function processImage(originalImg, chaosLevel = 0.5, intensity = 1) {
    // Clamp the chaosLevel parameter to a valid range [0, 1]
    const finalChaosLevel = Math.max(0, Math.min(1, Number(chaosLevel)));

    // Clamp the intensity parameter to a valid integer range [1, 8]
    // Intensity represents the number of least significant bits to modify.
    const finalIntensity = Math.max(1, Math.min(8, Math.floor(Number(intensity))));

    // Create a new canvas element
    const canvas = document.createElement('canvas');
    
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    if (width === 0 || height === 0) {
        console.error("Image has zero width or height. Ensure the image is fully loaded before processing.");
        return canvas; // Return an empty canvas if the image is not loaded
    }

    canvas.width = width;
    canvas.height = height;

    // Get the 2D rendering context
    const ctx = canvas.getContext('2d');
    if (!ctx) {
        console.error("Could not get 2D context from canvas.");
        // If context fails, we can't do anything. Return an empty canvas.
        return canvas;
    }

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    // Get the ImageData object from the canvas. This might fail for cross-origin images.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        console.error("Could not get image data due to security restrictions (tainted canvas). Returning original image.", e);
        // If we can't get pixel data, we can't modify it. Return the canvas with the original image.
        return canvas;
    }

    const data = imageData.data;
    
    // A bitmask is a pattern of bits used for bitwise operations.
    // (1 << finalIntensity) calculates 2 to the power of finalIntensity.
    // Subtracting 1 creates a mask of `finalIntensity` ones.
    // e.g., intensity=3 -> (1 << 3) = 8 (0b1000) -> 8 - 1 = 7 (0b0111)
    const modificationMask = (1 << finalIntensity) - 1;

    // Iterate over each pixel in the image data. The data array is a flat 1D array
    // where each pixel is represented by 4 consecutive values (R, G, B, A).
    // So we increment our loop counter by 4 each time.
    for (let i = 0; i < data.length; i += 4) {
        // Use a random check to decide if the current pixel should be modified.
        // This creates a random, "chaotic" distribution of modified pixels.
        if (Math.random() < finalChaosLevel) {
            // For each color channel (Red, Green, Blue), generate a random
            // value within the bounds of our modification mask.
            const rMod = Math.floor(Math.random() * (modificationMask + 1));
            const gMod = Math.floor(Math.random() * (modificationMask + 1));
            const bMod = Math.floor(Math.random() * (modificationMask + 1));

            // Apply the modification to the pixel's color channels using the
            // bitwise XOR operator (^). XORing a value with a random modification
            // randomly flips the bits covered by the mask.
            data[i]     = data[i] ^ rMod;   // Red channel
            data[i + 1] = data[i + 1] ^ gMod; // Green channel
            data[i + 2] = data[i + 2] ^ bMod; // Blue channel
            // The alpha channel (data[i + 3]) is intentionally left untouched
            // to avoid causing unintended transparency effects.
        }
    }

    // After modifying the pixel data array, write it back to the canvas.
    ctx.putImageData(imageData, 0, 0);

    // Return the modified canvas element.
    return canvas;
}