Image to ASCII Art Converter 


    




body {
    font-family: 'Courier New', monospace;
    text-align: center;
    margin: 20px;
}

input {
    margin-bottom: 20px;
}


function convertImageToASCII() {
    const imageInput = document.getElementById('imageInput');
    const asciiOutput = document.getElementById('asciiOutput');

    const reader = new FileReader();

    reader.onload = function (e) {
        const img = new Image();
        img.src = e.target.result;

        img.onload = function () {
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');

            const aspectRatio = img.width / img.height;
            const maxWidth = 80; // Adjust the width as needed for your display

            let newWidth = maxWidth;
            let newHeight = maxWidth / aspectRatio;

            if (newHeight > 40) {
                newHeight = 40; // Limit the height for better visibility
                newWidth = newHeight * aspectRatio;
            }

            canvas.width = newWidth;
            canvas.height = newHeight;

            context.drawImage(img, 0, 0, newWidth, newHeight);

            const imageData = context.getImageData(0, 0, newWidth, newHeight);
            const pixels = imageData.data;

            let asciiResult = '';

            for (let i = 0; i < pixels.length; i += 4) {
                const brightness = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
                const asciiChar = getAsciiChar(brightness);
                asciiResult += asciiChar;
            }

            asciiOutput.textContent = asciiResult;
        };
    };

    reader.readAsDataURL(imageInput.files[0]);
}

function getAsciiChar(brightness) {
    const asciiChars = '@%#*+=-:. ';

    const scale = (brightness / 255) * (asciiChars.length - 1);
    const index = Math.round(scale);

    return asciiChars.charAt(index);
}































Comments











Post a Comment