Architectural Plan To Blueprint-Style Image Converter

/**
 * Converts an architectural or structural plan image into a blueprint-style image.
 * This function processes an image pixel by pixel, converting light areas to a solid
 * blue and dark areas (lines, text) to white, preserving anti-aliasing and line weights.
 *
 * @param {HTMLImageElement} originalImg The original image object to be converted.
 * @returns {HTMLCanvasElement} A new canvas element displaying the blueprint-style image.
 */
function processImage(originalImg) {
    // 1. Create a new canvas element
    const canvas = document.createElement('canvas');
    // For performance with repeated getImageData/putImageData calls
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

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

    // 3. Draw the original image onto the canvas to access its pixel data
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // 4. Get the ImageData object, which contains the raw pixel data (RGBA) for the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // 5. Define the blueprint colors (dark blue for background, white for lines/text)
    const blueprintBlue = {
        r: 0,
        g: 34,
        b: 68
    }; // A dark navy blue, e.g., #002244
    const blueprintWhite = {
        r: 255,
        g: 255,
        b: 255
    };

    // 6. Iterate over every pixel in the image data array
    // The data array is a flat array of [R, G, B, A, R, G, B, A, ...]
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        const a = data[i + 3];

        // Calculate the grayscale luminance of the pixel.
        // This value represents how bright the pixel is (0=black, 255=white).
        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;

        // Invert the luminance to get a "darkness" factor. This factor will determine
        // the opacity of the white color on the blue background.
        // A black pixel (luminance=0) gets a whiteAlpha of 1 (fully white).
        // A white pixel (luminance=255) gets a whiteAlpha of 0 (fully blue background).
        // Gray pixels get intermediate values, preserving anti-aliasing.
        const whiteAlpha = (255 - luminance) / 255;

        // We also consider the original pixel's alpha channel.
        const originalAlpha = a / 255;
        const effectiveWhiteAlpha = whiteAlpha * originalAlpha;

        // Apply alpha blending to mix the white foreground with the blue background.
        // Formula: C_out = C_fg * A_fg + C_bg * (1 - A_fg)
        const finalR = blueprintWhite.r * effectiveWhiteAlpha + blueprintBlue.r * (1 - effectiveWhiteAlpha);
        const finalG = blueprintWhite.g * effectiveWhiteAlpha + blueprintBlue.g * (1 - effectiveWhiteAlpha);
        const finalB = blueprintWhite.b * effectiveWhiteAlpha + blueprintBlue.b * (1 - effectiveWhiteAlpha);

        // Update the pixel data in the imageData array
        data[i] = finalR;
        data[i + 1] = finalG;
        data[i + 2] = finalB;
        data[i + 3] = 255; // Ensure the final image is fully opaque for a "solid blue background"
    }

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

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