Convert any image to ASCII art using HTML 5's canvas and JavaScript.
Authors: Tom Falkner, Jayson Falkner
Do you like ASCII art but hate making it by hand? We sure do. Here we'll make a JS and HTML 5 canvas ASCII art creator that will convert a normal image in to sweet ASCII art. The whole thing runs client side and you can embed it in your web page with the following two steps.
Step 1: Add the JQuery and ASCII Apocalypse and Auto ASCII Apocalypse libraries to your page.
<html>
<body>
<h1>My awesome page</h1>
This image will become ASCII art.
<img src="img/a.png" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="/ascii-apocalypse/1.0/ascii-apocalypse.js"></script>
<script src="/ascii-apocalypse/1.0/ascii-apocalypse-auto.js"></script>
</body>
</html>Step 2: Watch any image with class="ASCIIfy" automatically convert to ASCII art.
<img src="army-of-darkness.jpg"/>
<img src="hello-kitty.jpg"/>
The code works mostly by leveraging the HTML 5 canvas. The original image is loaded in memory, converted to chunks, then compared against ASCII art chunks we generate on the fly. We keep the best match and use it in the final output image. JavaScript is used for all the code and it should run in any modern browser.
We'll describe the JavaScript more in a later posting, including the API it exposes for selectively converting images to ASCII art and for picking characters and colors to use. Take a look at the source if you want to use these features.