ASCII Art Generator with Pure JavaScript – asciify

Preview:

Description:

asciify is a super tiny JavaScript library that converts a picture into ASCII text.

How to use it:

Add the asciify JavaScript library to the document.

<script src="js/asciify.js"></script>

Create a file input to accept your pictures.

<form id="form">
  <input type="file" id="form_input">
</form>

Create an empty element to output the ASCII text.

<output id="output"></output>

The JavaScript to enable the ASCII art generator.

var formInput = document.querySelector("#form_input");
var outputElem = document.querySelector("#output");
formInput.addEventListener("change", function(){
  var file = this.files[0];
  
  var reader = new FileReader();
  reader.onload = function() {
    var dataURI = reader.result;
    var image = document.createElement("img");
    image.src = dataURI;
    image.onload = function(){
      outputElem.innerHTML = asciify.asciify(image)
        .replace(/\n/g, "<br>")
        .replace(/ /g, "&nbsp;");
    };
  };
  
  reader.readAsDataURL(file);
});

Changelog:

07/19/2018

• Define context.fillStyle outside drawImage()