Architectural Plan To Technical Blueprint Image Converter

/**
 * Converts an architectural or structural plan image into a technical blueprint-style image.
 * The function places the processed plan onto a standard-sized canvas with a solid
 * blue background and a subtle grid, ensuring a consistent blueprint appearance.
 *
 * @param {HTMLImageElement} originalImg The original image element of the plan. Assumed to be black/dark lines on a white/light background.
 * @param {number} [width=1920] The width of the output blueprint canvas.
 * @param {number} [height=1080] The height of the output blueprint canvas.
 * @param {string} [backgroundColor='#003366'] The solid blue background color of the blueprint.
 * @param {string} [gridColor='#335588'] The color of the subtle blueprint grid lines.
 * @param {number} [gridSize=20] The spacing of the grid cells in pixels.
 * @param {string} [lineColor='#FFFFFF'] The color for the plan's lines, text, and symbols (defaults to white).
 * @returns {HTMLCanvasElement} A canvas element containing the final blueprint image.
 */
function processImage(originalImg, width = 1920, height = 1080, backgroundColor = '#003366', gridColor = '#335588', gridSize = 20, lineColor = '#FFFFFF') {
    // 1. Create the final output canvas with the specified standard dimensions
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

    // 2. Draw the blueprint background
    // 2a. Fill the entire canvas with the solid blue background color
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 2b. Draw the subtle grid over the background
    ctx.strokeStyle = gridColor;
    ctx.lineWidth = 0.5; // Use a thin line for a subtle effect

    // Draw vertical grid lines
    for (let x = 0; x <= canvas.width; x += gridSize) {
        ctx.beginPath();
        ctx.moveTo(x, 0);
        ctx.lineTo(x, canvas.height);
        ctx.stroke();
    }
    // Draw horizontal grid lines
    for (let y = 0; y <= canvas.height; y += gridSize) {
        ctx.beginPath();
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
        ctx.stroke();
    }

    // 3. Process the original image to extract and colorize the plan
    // 3a. Create a temporary canvas for pixel manipulation
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = originalImg.naturalWidth;
    tempCanvas.height = originalImg.naturalHeight;
    const tempCtx = tempCanvas.getContext('2d', {
        willReadFrequently: true
    });
    tempCtx.drawImage(originalImg, 0, 0);

    // 3b. Get the pixel data from the original image
    const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
    const data = imageData.data;

    // Parse the hex line color into its RGB components for pixel manipulation
    const rLine = parseInt(lineColor.substring(1, 3), 16);
    const gLine = parseInt(lineColor.substring(3, 5), 16);
    const bLine = parseInt(lineColor.substring(5, 7), 16);

    // 3c. Iterate through each pixel to apply the blueprint effect
    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 luminance (brightness) of the pixel
        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;

        // Invert the luminance to create an alpha value. This makes dark lines from the
        // original image opaque and light backgrounds transparent, preserving anti-aliasing and line weight.
        const newAlpha = (255 - luminance) * (a / 255);

        // Set the new pixel color to the specified lineColor
        data[i] = rLine;
        data[i + 1] = gLine;
        data[i + 2] = bLine;
        // Apply the newly calculated alpha to the pixel
        data[i + 3] = newAlpha;
    }

    // 3d. Put the modified pixel data back onto the temporary canvas
    tempCtx.putImageData(imageData, 0, 0);

    // 4. Draw the processed plan onto the final canvas, scaled and centered
    // 4a. Calculate the correct scaling factor to fit the image entirely within the canvas without cropping, preserving aspect ratio
    const scale = Math.min(canvas.width / originalImg.naturalWidth, canvas.height / originalImg.naturalHeight);
    const renderWidth = originalImg.naturalWidth * scale;
    const renderHeight = originalImg.naturalHeight * scale;

    // 4b. Calculate coordinates to center the image on the canvas
    const x = (canvas.width - renderWidth) / 2;
    const y = (canvas.height - renderHeight) / 2;

    // 4c. Draw the processed image (from tempCanvas) onto the final blueprint canvas
    ctx.drawImage(tempCanvas, x, y, renderWidth, renderHeight);

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