Image To CAD Blueprint Generator

/**
 * Converts an image into a CAD-style technical blueprint.
 * This function applies an edge detection algorithm to extract lines from the source image,
 * then renders them in white over a classic blue blueprint background with a grid.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} [edgeThreshold=80] The sensitivity for edge detection. Lower values detect more (fainter) lines, higher values detect only stronger lines. Range is typically 0-255.
 * @param {number} [gridSize=20] The size of the grid squares in pixels. Set to 0 to disable the grid.
 * @returns {HTMLCanvasElement} A canvas element containing the blueprint image.
 */
async function processImage(originalImg, edgeThreshold = 80, gridSize = 20) {
    const width = originalImg.width;
    const height = originalImg.height;

    // 1. Create the final canvas and set its size
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // 2. Draw the blueprint background
    ctx.fillStyle = '#0A3D91';
    ctx.fillRect(0, 0, width, height);

    // Draw the grid if gridSize is greater than 0
    if (gridSize > 0) {
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
        ctx.lineWidth = 0.5;
        for (let x = 0.5; x < width; x += gridSize) {
            ctx.beginPath();
            ctx.moveTo(x, 0);
            ctx.lineTo(x, height);
            ctx.stroke();
        }
        for (let y = 0.5; y < height; y += gridSize) {
            ctx.beginPath();
            ctx.moveTo(0, y);
            ctx.lineTo(width, y);
            ctx.stroke();
        }
    }

    // 3. Process the image to extract edges
    // Use a temporary canvas to get the image's pixel data
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = width;
    tempCanvas.height = height;
    const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
    tempCtx.drawImage(originalImg, 0, 0, width, height);
    const imageData = tempCtx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // a. Convert the image to grayscale for easier processing
    const grayData = new Uint8ClampedArray(width * height);
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Use the luminosity method for grayscale conversion
        const gray = 0.299 * r + 0.587 * g + 0.114 * b;
        grayData[i / 4] = gray;
    }

    // b. Apply the Sobel operator for edge detection
    const sobelData = new Float32Array(width * height);
    const sobelX = [
        [-1, 0, 1],
        [-2, 0, 2],
        [-1, 0, 1]
    ];
    const sobelY = [
        [-1, -2, -1],
        [0, 0, 0],
        [1, 2, 1]
    ];

    // Convolve the grayscale image with the Sobel kernels
    for (let y = 1; y < height - 1; y++) {
        for (let x = 1; x < width - 1; x++) {
            let pixelX = 0;
            let pixelY = 0;
            const currentIndex = y * width + x;

            for (let i = -1; i <= 1; i++) {
                for (let j = -1; j <= 1; j++) {
                    const grayValue = grayData[(y + i) * width + (x + j)];
                    pixelX += grayValue * sobelX[i + 1][j + 1];
                    pixelY += grayValue * sobelY[i + 1][j + 1];
                }
            }
            
            // Calculate the magnitude of the gradient
            const magnitude = Math.sqrt(pixelX * pixelX + pixelY * pixelY);
            sobelData[currentIndex] = magnitude;
        }
    }

    // 4. Create the final line drawing layer
    const outputImageData = ctx.createImageData(width, height);
    const outputData = outputImageData.data;

    for (let i = 0; i < sobelData.length; i++) {
        const magnitude = sobelData[i];
        
        // If the magnitude is above the threshold, it's an edge
        if (magnitude > edgeThreshold) {
            const index = i * 4;
            outputData[index] = 255;     // R
            outputData[index + 1] = 255; // G
            outputData[index + 2] = 255; // B
            // The alpha is determined by the edge strength to simulate line weight
            // Stronger edges will be more opaque
            outputData[index + 3] = Math.min(255, magnitude * 1.5); // A
        }
    }

    // 5. Draw the line drawing layer on top of the blue background
    // This is done by putting the generated image data onto a temporary canvas
    // and then drawing that canvas onto our main canvas.
    const outputCanvas = document.createElement('canvas');
    outputCanvas.width = width;
    outputCanvas.height = height;
    const outputCtx = outputCanvas.getContext('2d');
    outputCtx.putImageData(outputImageData, 0, 0);

    ctx.drawImage(outputCanvas, 0, 0);

    // 6. Return the final canvas
    return canvas;
}