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


ASCII Art Generator with Pure JavaScript – asciify


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">

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;");



  • Define context.fillStyle outside drawImage()

You Might Be Interested In:

Leave a Reply