Image To Outline And Rough Contour Drawing Converter

/**
 * Converts an image into a black-and-white outline and rough contour drawing.
 * This function processes an image by converting it to grayscale and then applying a
 * simple edge detection algorithm to create a stylized, drawing-like effect.
 * The sensitivity of the edge detection can be controlled with the threshold parameter.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} threshold A number from 0 to 255 that determines the edge detection sensitivity.
 *   Lower values result in more detailed and finer lines. Higher values create a simpler,
 *   cleaner outline with only major contours. A good starting value is 25. Default is 25.
 * @returns {HTMLCanvasElement} A new canvas element containing the black and white contour drawing.
 */
function processImage(originalImg, threshold = 25) {
    // Create a new canvas to draw the result
    const outputCanvas = document.createElement('canvas');
    const outputCtx = outputCanvas.getContext('2d');

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

    // Use a temporary canvas to get the pixel data of the original image
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d');
    tempCanvas.width = width;
    tempCanvas.height = height;
    tempCtx.drawImage(originalImg, 0, 0);
    const imageData = tempCtx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Create a new ImageData object for the output drawing
    const outputImageData = outputCtx.createImageData(width, height);
    const outputData = outputImageData.data;

    // 1. First, convert the image to a flat grayscale array for simpler 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 formula for perceptually accurate grayscale
        const gray = 0.299 * r + 0.587 * g + 0.114 * b;
        grayData[i / 4] = gray;
    }

    // 2. Perform a simple edge detection algorithm.
    // For each pixel, compare its brightness to its right and bottom neighbors.
    // A large difference indicates an edge.
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const i = y * width + x;
            const outputIndex = i * 4;

            const currentGray = grayData[i];
            // To avoid boundary errors, use the current pixel's value if neighbor is out of bounds
            const rightGray = (x < width - 1) ? grayData[i + 1] : currentGray;
            const bottomGray = (y < height - 1) ? grayData[i + width] : currentGray;

            // Calculate the total difference (gradient)
            const delta = Math.abs(currentGray - rightGray) + Math.abs(currentGray - bottomGray);

            let color;
            if (delta > threshold) {
                // If the difference is above the threshold, it's an edge (draw black)
                color = 0;
            } else {
                // Otherwise, it's not an edge (draw white)
                color = 255;
            }

            outputData[outputIndex] = color; // Red
            outputData[outputIndex + 1] = color; // Green
            outputData[outputIndex + 2] = color; // Blue
            outputData[outputIndex + 3] = 255; // Alpha (fully opaque)
        }
    }

    // 3. Put the processed pixel data onto the output canvas
    outputCtx.putImageData(outputImageData, 0, 0);

    return outputCanvas;
}