Image Chaotic Interleaving Modifier

async function processImage(originalImg, seed = 12345) {
    /**
     * Performs a "chaotic interleaving" on an image by shuffling the least significant bits (LSBs)
     * of its color data. This creates a deep modification to the image's binary data
     * that is virtually invisible to the human eye. The process is deterministic based on the provided seed.
     *
     * @param {Image} originalImg The original image object to process.
     * @param {number} seed A numeric seed for the random number generator to ensure a deterministic "chaotic" shuffle.
     * @returns {HTMLCanvasElement} A canvas element with the modified image.
     */

    // A simple, seedable pseudo-random number generator (Mulberry32).
    // This allows the "chaotic" shuffle to be deterministic and repeatable for a given seed.
    function mulberry32(a) {
        return function() {
            a |= 0;
            a = a + 0x6D2B79F5 | 0;
            let t = Math.imul(a ^ a >>> 15, 1 | a);
            t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
            return ((t ^ t >>> 14) >>> 0) / 4294967296;
        }
    }

    // Fisher-Yates (aka Knuth) shuffle algorithm to shuffle an array in place.
    // It uses the provided PRNG to make the shuffle deterministic.
    function shuffle(array, prng) {
        let currentIndex = array.length;
        let randomIndex;
        // While there remain elements to shuffle.
        while (currentIndex !== 0) {
            // Pick a remaining element.
            randomIndex = Math.floor(prng() * currentIndex);
            currentIndex--;
            // And swap it with the current element.
            [array[currentIndex], array[randomIndex]] = [
                array[randomIndex], array[currentIndex]
            ];
        }
        return array;
    }

    // 1. Create a canvas and get its 2D context.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 2. Set canvas dimensions to match the image.
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // 3. Draw the original image onto the canvas and get its pixel data.
    ctx.drawImage(originalImg, 0, 0);
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data; // This is a Uint8ClampedArray: [R,G,B,A, R,G,B,A, ...]

    // 4. Extract the least significant bit (LSB) from each color component (R, G, B).
    // The alpha channel is ignored to prevent unintended transparency changes.
    const lsbs = [];
    for (let i = 0; i < data.length; i += 4) {
        lsbs.push(data[i] & 1);     // R channel LSB
        lsbs.push(data[i + 1] & 1); // G channel LSB
        lsbs.push(data[i + 2] & 1); // B channel LSB
    }

    // 5. Create a seeded random number generator and shuffle the LSBs "chaotically".
    const prng = mulberry32(seed);
    shuffle(lsbs, prng);

    // 6. Re-interleave the shuffled LSBs back into the image data.
    let lsbIndex = 0;
    for (let i = 0; i < data.length; i += 4) {
        // For each R, G, B component:
        // - Clear its current LSB by ANDing with 254 (11111110 in binary).
        // - Set the new LSB by ORing with the value from the shuffled LSBs array.
        data[i] = (data[i] & 0xFE) | lsbs[lsbIndex++];
        data[i + 1] = (data[i + 1] & 0xFE) | lsbs[lsbIndex++];
        data[i + 2] = (data[i + 2] & 0xFE) | lsbs[lsbIndex++];
    }

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

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