Check out my
new book!
HTML5 Games book
jsAscii - ASCII art from images with Javascript and Canvas
Here is a little thing that will take any picture on a page and convert it to sexy ASCII art.
It uses the <canvas> tag and the getImageData method to read pixel data, so support is limited to Firefox, the latest Opera 9.50 beta and WebKit nightlies (no IE), and even then Opera has problems rendering the ASCII art when small font sizes are used.

Note that if you try to run this code on your local desktop or on images from a foreign host, you'll get a security error. This will only work from a website and only on images on that host.

Demos, example code and download link at: http://www.nihilogic.dk/labs/jsascii/


⇓ 18 comments Antonio

It doesn't work in Safari 3.0

Apart from that, it's fantastic when tested out on FF...

Well Done

March 17, 2008 at 8:52 AM
CupBoy

Yea, it appears that Safari lacks the getImageData() method.
Thanks!

March 17, 2008 at 10:09 AM
Anonymous

No problem with my safari ( Version 3.1 (5525.13) )
getImageData works perfectly!

Very nice technique!!

April 9, 2008 at 2:27 AM
huh?

Huge props on this. I love it.

April 16, 2008 at 5:04 PM
Anonymous

it's a really good script - but you should use 'monospace' instead of 'courier new' as font, so that it also is displayed correctly on systems without courier new font

May 30, 2008 at 6:45 AM
Victor Noagbodji

Doesn't work in my Firefox 3. I tried everything, I don't see what I'm not doing correctly.

July 14, 2008 at 4:40 PM
Victor Noagbodji

Jacob, it seems like Firefox 3 isn't allowing line 53 of jsascii.js

Error: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: "file:///C:/Documents%20and%20Settings/Victor/Desktop/jsascii.js Line: 53"]

July 14, 2008 at 6:16 PM
Jacob Seidelin

@victor: It looks like you're running it from your desktop. Firefox will throw a security error when running on local files or files from another host. If you upload it to your webhost, it should work just fine.

July 15, 2008 at 12:19 AM
Victor Noagbodji

I understand. Thanks.

July 15, 2008 at 8:21 AM
Haden

This is amazing.. great work here..

April 30, 2009 at 6:18 AM
Anonymous

ja ein chat unter http://www.coldtube.com

March 26, 2010 at 10:09 AM
Zibri

With chrome I can't use it in a local file.
It throws

Uncaught Error: SECURITY_ERR: DOM Exception 18 jsascii.js: 52

How to make it work in local files??

(No problem if the page is on a webaserver)

June 13, 2010 at 6:27 AM
Anonymous

Dears,

I try JS code and HTML code as local on my PC running XP, Firefox 4.0 without success.

Please send on this blog compltete and simple HTML code as demo (and may be CSS)

Sincerely

November 22, 2010 at 2:26 AM
Anonymous

Me again (XP/Firefox 4) doesnt works...

I try exemple on Safari... Works fine!

Is there a solution on Firefox?
Is there a solution with overprint for daisywheel printer some years ago, I had a COBOL program. But loss... And I dont remember the color/Brightness... conversion to character scheme.

Where I can find overprinting/surprint algorithm. I try to find that by Google without success.

November 22, 2010 at 2:37 AM
fabiantheblind

Hi, fist of all.
Thanx for sharing your code.

I'm trying to read out (with InDesign CS4) a ascii art i placed ( with your code ) on my website.
But i know so little html just JS in InDesign.
Can you tell me where i can get the real string in your code?
I can connect to the site but i get only the html page i set up. Do i have to send something to your javascript?
Like the images url?
or can i somehow just recive the string?

Many questions. Would be great to get a hint.

:F

December 6, 2010 at 4:05 PM
Raptor

Its simply amazing, all the js and of course pixastic. Simply outstanding job!

May 8, 2013 at 2:24 AM
Anup Panwar

it's not running in google chrome

November 19, 2013 at 7:59 AM
Saglik Birey

Sivilce tedavisi ı have a problem. My browser error everytime.

May 29, 2014 at 7:17 PM
Post a Comment