Image Data Encoder

/**
 * Encodes a text message into the pixels of an image using LSB (Least Significant Bit) steganography.
 *
 * @param {Image} originalImg The original JavaScript Image object.
 * @param {string} textToEncode The text message to hide inside the image. Defaults to a sample string.
 * @returns {HTMLCanvasElement} A new canvas element containing the image with the encoded data.
 *                               Returns the original image on a canvas if encoding fails (e.g., due to insufficient capacity).
 */
function processImage(originalImg, textToEncode = "^)0,808,02а59иыгешо") {
    // 1. Setup Canvas
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can improve performance for getImageData.
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // Draw the original image to the canvas to get its pixel data
    ctx.drawImage(originalImg, 0, 0);

    // 2. Handle empty text case
    if (textToEncode.length === 0) {
        console.warn("Text to encode is empty. Returning original image.");
        return canvas;
    }

    // 3. Convert text to UTF-8 bytes for robust character support
    const encoder = new TextEncoder();
    const encodedTextBytes = encoder.encode(textToEncode);

    // 4. Get image pixel data
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        // This can happen if the image is tainted (e.g., from a different origin)
        console.error("Could not get image data due to CORS policy. Returning original image.", e);
        // We cannot modify the pixels, so we return the canvas as is.
        return canvas;
    }
    const pixels = imageData.data;

    // 5. Check if the image has enough capacity to store the message
    // We need 32 bits for the length header, plus 8 bits for each byte of the encoded text.
    const requiredBits = 32 + (encodedTextBytes.length * 8);
    // Each pixel can store 3 bits (1 in R, 1 in G, 1 in B). Alpha channel is skipped.
    const availableBits = (pixels.length / 4) * 3;

    if (requiredBits > availableBits) {
        const errorMessage = `The provided text is too long to be hidden in this image.\nRequired bits: ${requiredBits}\nAvailable bits: ${availableBits}`;
        console.error(errorMessage);
        // In a real app, you might show a user-friendly UI message instead of an alert.
        // alert(errorMessage); 
        return canvas; // Return original image on the canvas
    }

    // 6. Encode the data into the pixel array using helper functions
    let bitIndex = 0;

    // Helper to write a single bit into the next available color channel's LSB
    const writeBit = (bit) => {
        const pixelIndex = Math.floor(bitIndex / 3);
        const componentIndex = bitIndex % 3; // 0 for R, 1 for G, 2 for B
        const dataIndex = pixelIndex * 4 + componentIndex;

        if (dataIndex < pixels.length) {
            // Modify the least significant bit (LSB) of the color component.
            // 0xFE is 11111110 in binary, which clears the LSB when used with AND.
            // Then, we OR with the bit to set it to 0 or 1.
            pixels[dataIndex] = (pixels[dataIndex] & 0xFE) | bit;
            bitIndex++;
        }
    };

    // Helper to write an 8-bit byte by writing each of its bits
    const writeByte = (byte) => {
        // Write from Most Significant Bit (MSB) to Least Significant Bit (LSB)
        for (let i = 7; i >= 0; i--) {
            const bit = (byte >> i) & 1;
            writeBit(bit);
        }
    };

    // Helper to write a 32-bit integer (for storing the message length)
    const writeInt32 = (num) => {
        writeByte((num >> 24) & 0xFF); // Highest byte
        writeByte((num >> 16) & 0xFF);
        writeByte((num >> 8) & 0xFF);
        writeByte(num & 0xFF); // Lowest byte
    };

    // First, encode the length of the UTF-8 byte array. This is crucial for the decoder.
    writeInt32(encodedTextBytes.length);

    // Next, encode each byte of the UTF-8 message.
    for (const byte of encodedTextBytes) {
        writeByte(byte);
    }

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

    // 8. Return the canvas containing the image with the hidden data
    return canvas;
}