jsAscii - ASCII art from images with Javascript and Canvas

jsAscii - ASCII art from images with Javascript and Canvas ascii art, canvas, javascript
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/

posted Sunday, March 16, 2008 by Jacob Seidelin

⇓ 15 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 8:52 AM CupBoy

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

March 17, 2008 10:09 AM Anonymous

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

Very nice technique!!

April 9, 2008 2:27 AM huh?

Huge props on this. I love it.

April 16, 2008 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 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 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 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 12:19 AM Victor Noagbodji

I understand. Thanks.

July 15, 2008 8:21 AM Haden

This is amazing.. great work here..

April 30, 2009 6:18 AM Anonymous

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

March 26, 2010 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 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 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 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 4:05 PM