Nihilogic : JavaScript Image ASCIIfier

Utilizing magic and the <canvas> element to turn internet images into sexy ASCII art!

Download : jsascii.js

Example usage:


	<html>
	<head>
	<script type="text/javascript" src="jsascii.js"></script>
	</head>
	<body>

	<img src="example/microbe.png" 
		asciify="true" 
		asciiresolution="medium" 
		asciiscale="2" 
	/>

	</body>
	</html>

Original image:

ASCII image:

The ASCIIfier grabs the image from the page and paints it on a hidden canvas element.
The pixel data can then be retrieved from the canvas via getImageData() and converted into ASCII text. The original image is then replaced with the new ASCII image.
Only every other line in the image is used, since the characters used are twice as tall as they are wide.

The following custom attributes can be set on image elements to control the ASCII conversion:

asciify=(true/false)
Set to true to convert image to ASCII
asciiresolution=(low/medium/high)
Set to high to use all pixels in image, medium to use every other and low to use only one in four pixels.
asciiscale=(1-5)
Set to 1 to maintain the size of the original image, 2 to double the size, etc.
asciicolor=(true/false)
Set to true to render the characters in color.
asciiblock=(true/false)
Set to true to render the characters as colored blocks (only if asciicolor=true).
asciiinvert=(true/false)
Inverts the character lookup table, so bright becomes dark and vice versa.
asciichars=("...")
Use a custom character lookup table, default is " .,:;+i1tfLCG08@".

Additionally, background color and text color can set using CSS. Ie:


	<img src="example/microbe.png" 
		asciify="true" 
		style="background-color:black;color:white;"
	/>

Other examples:

Issues and compatibility:

Only works in <canvas> capable browsers (no IE)
Tested and should work in (at least) Firefox 2 + 3 and Opera 9.5+.
There are a bunch of issues with the rendering in Opera, so try different combinations of asciiresolution and asciiscale.

Comments: go here