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























Popular posts from this blog




























 let image = null; let canvas = document.getElementById('editorCanvas'); let ctx = canvas.getContext('2d');  function loadImage(input) {     const file = input.files[0];     if (file) {         const reader = new FileReader();         reader.onload = function (e) {             image = new Image();             image.src = e.target.result;             image.onload = function () {                 canvas.width = image.width;                 canvas.height = image.height;                 ctx.drawImage(image, 0, 0, canvas.width, canvas.height);             };         };         reader.readAsDataURL(file);     } }  function cropImage() {     // Add crop functionality }  function rotateImage() {     // Add rotate functionality }  function applyFilter() {     // Add filter functionality }  function downloadImage() {     const dataURL = canvas.toDataURL('image/png');     const link = document.createElement('a');     link.href = dataURL;     link.download = 'edi...








Read more