Image Sketch Generator For ELEKTRI4KA

/**
 * Generates a sketch-style image based on the "ELEKTRI4KA" tool description.
 * This function converts an image into a pencil-like sketch by performing the following steps:
 * 1. Creates a grayscale version of the image.
 * 2. Creates an inverted and blurred version of the grayscale image.
 * 3. Blends these two layers using a "color dodge" composite operation, which creates the sketch lines.
 * 4. Applies a final threshold filter to clean up the background, making it pure white.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {number} blurAmount=8 The radius of the Gaussian blur in pixels. A larger value creates thicker, softer lines, resembling a softer pencil. Default is 8.
 * @param {number} lineThreshold=250 A brightness value from 0 (black) to 255 (white). Any pixel in the final sketch lighter than this value will be made pure white. This helps to remove noise and create a clean background. Default is 250.
 * @returns {HTMLCanvasElement} A new canvas element containing the generated sketch image.
 */
function processImage(originalImg, blurAmount = 8, lineThreshold = 250) {
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Create the final canvas that will be returned
    const finalCanvas = document.createElement('canvas');
    finalCanvas.width = width;
    finalCanvas.height = height;
    const finalCtx = finalCanvas.getContext('2d');

    // Create an offscreen canvas to hold the grayscale layer
    const grayCanvas = document.createElement('canvas');
    grayCanvas.width = width;
    grayCanvas.height = height;
    const grayCtx = grayCanvas.getContext('2d', { willReadFrequently: true });

    // --- Step 1: Create the grayscale base layer ---
    // Apply a grayscale filter and draw the original image
    grayCtx.filter = 'grayscale(100%)';
    grayCtx.drawImage(originalImg, 0, 0, width, height);
    grayCtx.filter = 'none'; // Reset filter for subsequent operations

    // --- Step 2: Create the inverted and blurred layer ---
    // This layer will be used to 'dodge' the grayscale layer to create lines
    const invertedCanvas = document.createElement('canvas');
    invertedCanvas.width = width;
    invertedCanvas.height = height;
    const invertedCtx = invertedCanvas.getContext('2d');

    // Apply invert and blur filters and draw the grayscale image
    invertedCtx.filter = `invert(100%) blur(${Math.max(1, blurAmount)}px)`;
    invertedCtx.drawImage(grayCanvas, 0, 0, width, height);
    invertedCtx.filter = 'none'; // Reset filter

    // --- Step 3: Blend the layers to create the sketch effect ---
    // First, draw the grayscale image onto the final canvas
    finalCtx.drawImage(grayCanvas, 0, 0);

    // Then, use the 'color-dodge' blend mode to merge the inverted-blurred layer.
    // This operation divides the bottom layer by the inverted top layer,
    // brightening the image and creating the characteristic sketch lines where there are edges.
    finalCtx.globalCompositeOperation = 'color-dodge';
    finalCtx.drawImage(invertedCanvas, 0, 0);

    // Reset the composite operation to default
    finalCtx.globalCompositeOperation = 'source-over';

    // --- Step 4: Final cleanup (High-pass filter) ---
    // This step turns light gray noise in the background into pure white for a cleaner look.
    const imageData = finalCtx.getImageData(0, 0, width, height);
    const data = imageData.data;
    const clampedThreshold = Math.max(0, Math.min(255, lineThreshold)); // Ensure threshold is 0-255

    for (let i = 0; i < data.length; i += 4) {
        // Since the image is effectively grayscale, we can check any of the R, G, or B channels.
        const lightness = data[i];
        if (lightness > clampedThreshold && lightness < 255) {
            // Set pixel to pure white
            data[i] = 255;      // Red
            data[i + 1] = 255;  // Green
            data[i + 2] = 255;  // Blue
        }
    }
    // Put the cleaned-up pixel data back onto the canvas
    finalCtx.putImageData(imageData, 0, 0);

    return finalCanvas;
}