Please bookmark this page to avoid losing your image tool!

Image Data Encoder

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
/**
 * 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;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Data Encoder tool allows users to embed a text message within the pixels of an image using Least Significant Bit (LSB) steganography. This technique enables the concealment of information within digital images without visibly altering their appearance. This tool can be useful for secure communication, watermarking, or creating personalized images that contain hidden messages. It is especially beneficial for those looking to add text-based data to images for privacy or artistic purposes.

Leave a Reply

Your email address will not be published. Required fields are marked *