Image To Stylized Character Hero Generator

function processImage(originalImg, colorLevels = "5", edgeThreshold = "80", contrast = "130", saturation = "150") {
    const parsedLevels = Math.max(2, parseInt(colorLevels, 10) || 5);
    const threshold = parseInt(edgeThreshold, 10) || 80;
    const pContrast = parseInt(contrast, 10) || 130;
    const pSaturation = parseInt(saturation, 10) || 150;

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    
    canvas.width = width;
    canvas.height = height;

    // Apply baseline comic book saturation and contrast styling
    ctx.filter = `saturate(${pSaturation}%) contrast(${pContrast}%)`;
    ctx.drawImage(originalImg, 0, 0, width, height);
    ctx.filter = 'none';

    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;

    const outputData = new Uint8ClampedArray(data.length);
    const grayData = new Uint8Array(width * height);

    const levelStep = 255 / (parsedLevels - 1);

    // Pass 1: Posterize colors and generate grayscale intensity mapping
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        // Flat cel-shaded posterization effect
        outputData[i]     = Math.round(r / levelStep) * levelStep;
        outputData[i + 1] = Math.round(g / levelStep) * levelStep;
        outputData[i + 2] = Math.round(b / levelStep) * levelStep;
        outputData[i + 3] = data[i + 3];

        // Calculate lightness for edge detection map
        grayData[i / 4] = 0.299 * r + 0.587 * g + 0.114 * b;
    }

    // Pass 2: Blur the grayscale map slightly. This isolates major shapes and reduces noise for edge detection.
    const blurredGray = new Uint8Array(width * height);
    for (let y = 1; y < height - 1; y++) {
        for (let x = 1; x < width - 1; x++) {
            let idx = y * width + x;
            let sum = grayData[idx - width - 1] + grayData[idx - width] + grayData[idx - width + 1] +
                      grayData[idx - 1]         + grayData[idx]         + grayData[idx + 1] +
                      grayData[idx + width - 1] + grayData[idx + width] + grayData[idx + width + 1];
            blurredGray[idx] = sum / 9;
        }
    }

    // Pass 3: Sobel Filter Edge Detection for thick character ink outlines
    for (let y = 1; y < height - 1; y++) {
        for (let x = 1; x < width - 1; x++) {
            let idxP = y * width + x;

            // Sample surrounding blurred pixels
            let nw = blurredGray[idxP - width - 1];
            let n  = blurredGray[idxP - width];
            let ne = blurredGray[idxP - width + 1];
            let w  = blurredGray[idxP - 1];
            let e  = blurredGray[idxP + 1];
            let sw = blurredGray[idxP + width - 1];
            let s  = blurredGray[idxP + width];
            let se = blurredGray[idxP + width + 1];

            // Apply Sobel kernels
            let px = (ne + 2 * e + se) - (nw + 2 * w + sw);
            let py = (sw + 2 * s + se) - (nw + 2 * n + ne);

            let mag = Math.sqrt(px * px + py * py);

            if (mag > threshold) {
                let outIdx = idxP * 4;
                
                // Base edge pixel
                outputData[outIdx] = outputData[outIdx + 1] = outputData[outIdx + 2] = 0;
                
                // Thicken edges down and to the right mimicking comic inking weight
                if (x < width - 2 && y < height - 2) {
                    // Right neighbor
                    outputData[outIdx + 4] = outputData[outIdx + 5] = outputData[outIdx + 6] = 0; 
                    // Bottom neighbor
                    outputData[outIdx + width * 4] = outputData[outIdx + width * 4 + 1] = outputData[outIdx + width * 4 + 2] = 0;
                }
            }
        }
    }

    ctx.putImageData(new ImageData(outputData, width, height), 0, 0);

    return canvas;
}