Image To Technical Blueprint Style Converter

/**
 * Converts an image into a technical blueprint style drawing.
 * This function takes an image and applies an edge-detection filter to create a line-drawing
 * effect, then composites it onto a blue, gridded background typical of blueprints.
 *
 * @param {HTMLImageElement} originalImg The source image object to be converted.
 * @param {number} [outputWidth=1920] The width of the final blueprint canvas.
 * @param {number} [outputHeight=1080] The height of the final blueprint canvas.
 * @param {number} [gridSpacing=40] The spacing in pixels for the background grid lines.
 * @param {number} [edgeThreshold=50] The sensitivity for edge detection. A lower value detects more edges, making lines appear thicker. Range is typically 0-255.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with a canvas element containing the blueprint-style image.
 */
async function processImage(originalImg, outputWidth = 1920, outputHeight = 1080, gridSpacing = 40, edgeThreshold = 50) {
    // 1. Create the final canvas and set up its context
    const finalCanvas = document.createElement('canvas');
    finalCanvas.width = outputWidth;
    finalCanvas.height = outputHeight;
    const finalCtx = finalCanvas.getContext('2d');

    // 2. Draw the solid blue background as specified
    finalCtx.fillStyle = '#0A3D91';
    finalCtx.fillRect(0, 0, outputWidth, outputHeight);

    // 3. Draw the subtle blueprint grid
    // The prompt's description for grid color (#0A3D91) would be invisible on the same-colored background.
    // A subtle, transparent white is used as a practical and aesthetic interpretation.
    finalCtx.beginPath();
    finalCtx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
    finalCtx.lineWidth = 1;
    // Use a 0.5px offset for sharp, crisp 1px lines
    for (let x = 0.5; x < outputWidth; x += gridSpacing) {
        finalCtx.moveTo(x, 0);
        finalCtx.lineTo(x, outputHeight);
    }
    for (let y = 0.5; y < outputHeight; y += gridSpacing) {
        finalCtx.moveTo(0, y);
        finalCtx.lineTo(outputWidth, y);
    }
    finalCtx.stroke();

    // 4. Calculate dimensions to fit the original image within the output size while preserving aspect ratio
    const imgAspectRatio = originalImg.width / originalImg.height;
    let newWidth = outputWidth;
    let newHeight = newWidth / imgAspectRatio;
    if (newHeight > outputHeight) {
        newHeight = outputHeight;
        newWidth = newHeight * imgAspectRatio;
    }
    // Ensure dimensions are integers for precise pixel operations
    newWidth = Math.floor(newWidth);
    newHeight = Math.floor(newHeight);

    // 5. Create a temporary canvas for processing the image
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = newWidth;
    tempCanvas.height = newHeight;
    // Use { willReadFrequently: true } hint for performance gains with repeated getImageData calls
    const tempCtx = tempCanvas.getContext('2d', {
        willReadFrequently: true
    });
    tempCtx.drawImage(originalImg, 0, 0, newWidth, newHeight);

    // 6. Get image data and convert it to grayscale for edge detection processing
    const imageData = tempCtx.getImageData(0, 0, newWidth, newHeight);
    const pixels = imageData.data;
    const grayscaleData = new Uint8ClampedArray(newWidth * newHeight);
    for (let i = 0; i < pixels.length; i += 4) {
        // Using the luminosity method for a standard grayscale conversion
        const grayscale = pixels[i] * 0.299 + pixels[i + 1] * 0.587 + pixels[i + 2] * 0.114;
        grayscaleData[i / 4] = grayscale;
    }

    // 7. Apply a Sobel edge detection filter to create the line drawing effect
    const outputImageData = tempCtx.createImageData(newWidth, newHeight);
    const outputPixels = outputImageData.data;

    // Sobel kernels for detecting horizontal and vertical edges
    const sobelX = [
        [-1, 0, 1],
        [-2, 0, 2],
        [-1, 0, 1]
    ];
    const sobelY = [
        [-1, -2, -1],
        [0, 0, 0],
        [1, 2, 1]
    ];

    // Iterate over each pixel (excluding the 1px border to avoid out-of-bounds access)
    for (let y = 1; y < newHeight - 1; y++) {
        for (let x = 1; x < newWidth - 1; x++) {
            let gx = 0;
            let gy = 0;

            // Apply the 3x3 Sobel kernels to the pixel's neighborhood
            for (let j = -1; j <= 1; j++) {
                for (let i = -1; i <= 1; i++) {
                    const grayValue = grayscaleData[(y + j) * newWidth + (x + i)];
                    gx += grayValue * sobelX[j + 1][i + 1];
                    gy += grayValue * sobelY[j + 1][i + 1];
                }
            }

            const magnitude = Math.sqrt(gx * gx + gy * gy);

            // If the gradient magnitude is above the threshold, mark it as a white edge pixel
            if (magnitude > edgeThreshold) {
                const index = (y * newWidth + x) * 4;
                outputPixels[index] = 255; // R
                outputPixels[index + 1] = 255; // G
                outputPixels[index + 2] = 255; // B
                outputPixels[index + 3] = 255; // Alpha (fully opaque)
            }
        }
    }

    // 8. Put the generated white lines (on a transparent background) onto the temp canvas
    tempCtx.putImageData(outputImageData, 0, 0);

    // 9. Draw the processed image, centered, onto the final blueprint canvas
    const drawX = (outputWidth - newWidth) / 2;
    const drawY = (outputHeight - newHeight) / 2;
    finalCtx.drawImage(tempCanvas, drawX, drawY);

    // 10. Return the final canvas element
    return finalCanvas;
}