Image To Technical Blueprint Converter

/**
 * Converts an image into a technical blueprint-style drawing.
 *
 * This function takes an image and applies a series of filters to create a
 * blueprint effect: a solid blue background with a subtle grid, and the
 * image details rendered as white lines. The function preserves the original
 * image's content and aspect ratio, centering it on a standard-sized canvas.
 *
 * @param {HTMLImageElement} originalImg The source image object to convert. The image must be fully loaded before calling this function.
 * @param {number | string} lineThreshold A sensitivity value from 0 to 255. Lower values will only trace the darkest parts of the image, while higher values will include lighter details. Defaults to 128.
 * @returns {HTMLCanvasElement} A new canvas element containing the blueprint image.
 */
function processImage(originalImg, lineThreshold = 128) {
    // --- Configuration for the blueprint style ---
    const outputWidth = 1920;
    const outputHeight = 1080;
    const backgroundColor = '#0A2342'; // A deep, professional blue
    const gridColor = 'rgba(255, 255, 255, 0.1)'; // Subtle white grid
    const gridSpacing = 50;
    const finalLineThreshold = Number(lineThreshold);

    // 1. Create the final output canvas
    const finalCanvas = document.createElement('canvas');
    finalCanvas.width = outputWidth;
    finalCanvas.height = outputHeight;
    const ctx = finalCanvas.getContext('2d');

    // 2. Draw the blueprint background and grid
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, outputWidth, outputHeight);

    ctx.strokeStyle = gridColor;
    ctx.lineWidth = 1;
    ctx.beginPath();
    // Use a 0.5px offset for sharper 1px lines
    for (let x = 0.5; x < outputWidth; x += gridSpacing) {
        ctx.moveTo(x, 0);
        ctx.lineTo(x, outputHeight);
    }
    for (let y = 0.5; y < outputHeight; y += gridSpacing) {
        ctx.moveTo(0, y);
        ctx.lineTo(outputWidth, y);
    }
    ctx.stroke();

    // 3. Create a temporary canvas for processing the original image
    const tempCanvas = document.createElement('canvas');
    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;
    tempCanvas.width = imgWidth;
    tempCanvas.height = imgHeight;
    // Add willReadFrequently hint for potential performance improvement
    const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
    tempCtx.drawImage(originalImg, 0, 0);

    // 4. Process the image pixels to extract lines
    const imageData = tempCtx.getImageData(0, 0, imgWidth, imgHeight);
    const data = imageData.data;
    const lineColor = [255, 255, 255]; // Pure white for lines

    for (let i = 0; i < data.length; i += 4) {
        // Skip fully transparent pixels from the source (e.g., in PNGs)
        if (data[i + 3] === 0) {
            continue;
        }

        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];

        // Convert the pixel to grayscale using the standard luminance formula
        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;

        if (luminance < finalLineThreshold) {
            // If the pixel is darker than the threshold, treat it as a line.
            // The opacity of the line is proportional to its original darkness
            // to preserve shading and line weight.
            const opacity = 1 - (luminance / finalLineThreshold);
            data[i] = lineColor[0];
            data[i + 1] = lineColor[1];
            data[i + 2] = lineColor[2];
            // Boost opacity slightly for better visibility against the dark background
            data[i + 3] = Math.min(255, opacity * 255 * 1.5);
        } else {
            // If the pixel is lighter than the threshold, treat it as background
            // by making it fully transparent.
            data[i + 3] = 0;
        }
    }

    // 5. Put the processed pixel data (now a white-on-transparent line drawing) back
    tempCtx.putImageData(imageData, 0, 0);

    // 6. Calculate the correct size and position to draw the processed image onto the
    //    final canvas, preserving aspect ratio and centering it.
    const ratio = Math.min(outputWidth / imgWidth, outputHeight / imgHeight);
    const newWidth = imgWidth * ratio;
    const newHeight = imgHeight * ratio;
    const x = (outputWidth - newWidth) / 2;
    const y = (outputHeight - newHeight) / 2;

    // Use high-quality scaling for the final placement
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';
    ctx.drawImage(tempCanvas, x, y, newWidth, newHeight);

    // 7. Return the completed canvas
    return finalCanvas;
}