Image ASCII Text Generator

function processImage(originalImg, characterSet = "@%#*+=-:. ", scale = 0.4, fontSize = 6, lineHeight = 0.8, textColor = '#000000', backgroundColor = '#ffffff') {
    // This constant is used to correct the aspect ratio of the image,
    // because characters in monospaced fonts are typically taller than they are wide.
    const FONT_ASPECT_RATIO = 0.5;
    const finalCharSet = characterSet && characterSet.length > 0 ? characterSet : "@%#*+=-:. ";

    // 1. Create a small canvas to sample the image's pixels
    const samplingCanvas = document.createElement('canvas');
    const samplingCtx = samplingCanvas.getContext('2d', {
        willReadFrequently: true
    });

    // 2. Calculate the dimensions for the sampling canvas.
    // We scale the image down and then apply the font aspect ratio correction.
    // A maximum width is enforced to prevent performance issues with large images.
    const maxSamplingWidth = 150;
    const originalAspectRatio = originalImg.height / originalImg.width;

    let samplingWidth = originalImg.width * scale;
    if (samplingWidth > maxSamplingWidth) {
        samplingWidth = maxSamplingWidth;
    }
    let samplingHeight = samplingWidth * originalAspectRatio * FONT_ASPECT_RATIO;

    samplingWidth = Math.max(1, Math.floor(samplingWidth));
    samplingHeight = Math.max(1, Math.floor(samplingHeight));

    samplingCanvas.width = samplingWidth;
    samplingCanvas.height = samplingHeight;

    // 3. Draw the original image onto the small sampling canvas
    samplingCtx.drawImage(originalImg, 0, 0, samplingWidth, samplingHeight);

    // 4. Get the pixel data from the sampling canvas
    let imageData;
    try {
        imageData = samplingCtx.getImageData(0, 0, samplingWidth, samplingHeight);
    } catch (e) {
        console.error("Could not get image data.", e);
        // Return a blank canvas on error (e.g., tainted canvas)
        return document.createElement('canvas');
    }
    const data = imageData.data;

    // 5. Generate the rows of ASCII characters
    const asciiRows = [];
    const numChars = finalCharSet.length;
    for (let y = 0; y < samplingHeight; y++) {
        let row = '';
        for (let x = 0; x < samplingWidth; x++) {
            const index = (y * samplingWidth + x) * 4;
            const r = data[index];
            const g = data[index + 1];
            const b = data[index + 2];
            const a = data[index + 3];

            // Use the sparsest character for transparent pixels
            if (a < 128) {
                row += finalCharSet.charAt(numChars - 1);
                continue;
            }

            // Calculate the perceived brightness of the pixel (luma)
            const brightness = (0.2126 * r + 0.7152 * g + 0.0722 * b);

            // Map the brightness (0-255) to a character in the character set.
            // The character set should be ordered from most dense to least dense.
            // Dark pixels (low brightness) should map to dense characters (low index).
            // Bright pixels (high brightness) map to sparse characters (high index).
            const charIndex = Math.floor((brightness / 255) * (numChars - 1));
            row += finalCharSet.charAt(charIndex);
        }
        asciiRows.push(row);
    }

    // 6. Create the final output canvas
    const outputCanvas = document.createElement('canvas');
    const outputCtx = outputCanvas.getContext('2d');
    const fontFamily = "'Courier New', Courier, monospace"; // A web-safe monospaced font

    // Approximate character dimensions based on font size.
    // For Courier, width is typically 60% of the point size.
    const charWidth = fontSize * 0.6;
    const charHeight = fontSize * lineHeight;

    outputCanvas.width = Math.ceil(samplingWidth * charWidth);
    outputCanvas.height = Math.ceil(samplingHeight * charHeight);

    // 7. Draw the background
    outputCtx.fillStyle = backgroundColor;
    outputCtx.fillRect(0, 0, outputCanvas.width, outputCanvas.height);

    // 8. Set font properties and draw the ASCII text onto the output canvas
    outputCtx.font = `${fontSize}px ${fontFamily}`;
    outputCtx.fillStyle = textColor;
    outputCtx.textAlign = 'left';
    outputCtx.textBaseline = 'top';

    for (let i = 0; i < asciiRows.length; i++) {
        outputCtx.fillText(asciiRows[i], 0, i * charHeight);
    }

    // 9. Return the final canvas element
    return outputCanvas;
}