ASCII Art Generator with Pure JavaScript – asciify

Category: Image , Javascript , Recommended | July 19, 2015
Author: z-------------
Views Total: 3,600 views
Official Page: Go to website
Last Update: July 19, 2015
License: MIT

Preview:

ASCII Art Generator with Pure JavaScript – asciify

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()

You Might Be Interested In:


Leave a Reply