Image Spectacle Viewer

/**
 * Simulates a "Spectacle Viewer" by creating an anaglyph 3D effect on an image.
 * This effect separates the red and cyan color channels of the image and offsets them horizontally.
 * The resulting image appears three-dimensional when viewed with traditional red-cyan 3D glasses.
 *
 * @param {HTMLImageElement} originalImg The source image object. It is assumed to be fully loaded and accessible (not cross-origin restricted).
 * @param {number} displacement The amount of horizontal separation between the red and cyan channels, in pixels. Defaults to 5. A larger value creates a more pronounced 3D effect.
 * @returns {Promise<HTMLCanvasElement>} A Promise that resolves to a new canvas element displaying the anaglyph image.
 */
async function processImage(originalImg, displacement = 5) {
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Create a temporary off-screen canvas to extract pixel data from the original image.
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = width;
    tempCanvas.height = height;
    // Use { willReadFrequently: true } as a performance hint for the browser.
    const tempCtx = tempCanvas.getContext('2d', {
        willReadFrequently: true
    });
    tempCtx.drawImage(originalImg, 0, 0);

    // Get the pixel data from the temporary canvas.
    const imageData = tempCtx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Create new ImageData objects to hold the separated color channels.
    const redChannel = new ImageData(width, height);
    const cyanChannel = new ImageData(width, height);

    // Iterate through the original image data and separate the channels pixel by pixel.
    for (let i = 0; i < data.length; i += 4) {
        // For the red layer, we only keep the red component.
        redChannel.data[i] = data[i]; // R
        redChannel.data[i + 1] = 0; // G
        redChannel.data[i + 2] = 0; // B
        redChannel.data[i + 3] = data[i + 3]; // Alpha

        // For the cyan layer, we keep the green and blue components.
        cyanChannel.data[i] = 0; // R
        cyanChannel.data[i + 1] = data[i + 1]; // G
        cyanChannel.data[i + 2] = data[i + 2]; // B
        cyanChannel.data[i + 3] = data[i + 3]; // Alpha
    }

    // Create the final canvas that will be returned.
    const finalCanvas = document.createElement('canvas');
    finalCanvas.width = width;
    finalCanvas.height = height;
    const finalCtx = finalCanvas.getContext('2d');

    const offset = Math.round(displacement);

    // Create ImageBitmap objects from our separated channel data.
    // This is an efficient way to draw ImageData to a canvas.
    const cyanBitmap = await createImageBitmap(cyanChannel);
    const redBitmap = await createImageBitmap(redChannel);

    // 1. Draw the cyan channel, shifted to the right.
    finalCtx.drawImage(cyanBitmap, offset, 0);

    // 2. Set the composite operation to 'lighter'. This makes overlapping colors additive.
    // Where red and cyan light mix, they will tend towards the original image colors.
    finalCtx.globalCompositeOperation = 'lighter';

    // 3. Draw the red channel, shifted to the left, blending it with the cyan channel.
    finalCtx.drawImage(redBitmap, -offset, 0);

    // Clean up the memory used by the ImageBitmap objects.
    cyanBitmap.close();
    redBitmap.close();

    return finalCanvas;
}