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/
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/
It doesn't work in Safari 3.0
March 17, 2008 at 8:52 AM Jacob SeidelinApart from that, it's fantastic when tested out on FF...
Well Done
Yea, it appears that Safari lacks the getImageData() method.
March 17, 2008 at 10:09 AM AnonymousThanks!
No problem with my safari ( Version 3.1 (5525.13) )
April 9, 2008 at 2:27 AM CAgetImageData works perfectly!
Very nice technique!!
Huge props on this. I love it.
April 16, 2008 at 5:04 PM Anonymousit'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 NoagbodjiDoesn'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 NoagbodjiJacob, it seems like Firefox 3 isn't allowing line 53 of jsascii.js
July 14, 2008 at 6:16 PM Jacob SeidelinError: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: "file:///C:/Documents%20and%20Settings/Victor/Desktop/jsascii.js Line: 53"]
@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 NoagbodjiI understand. Thanks.
July 15, 2008 at 8:21 AM HadenThis is amazing.. great work here..
April 30, 2009 at 6:18 AM Anonymousja ein chat unter http://www.coldtube.com
March 26, 2010 at 10:09 AM ZibriWith chrome I can't use it in a local file.
June 13, 2010 at 6:27 AM AnonymousIt 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)
Dears,
November 22, 2010 at 2:26 AM AnonymousI 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
Me again (XP/Firefox 4) doesnt works...
November 22, 2010 at 2:37 AM fabiantheblindI 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.
Hi, fist of all.
December 6, 2010 at 4:05 PM RaptorThanx 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
Its simply amazing, all the js and of course pixastic. Simply outstanding job!
May 8, 2013 at 2:24 AM Unknownit's not running in google chrome
November 19, 2013 at 7:59 AM UnknownSivilce tedavisi ı have a problem. My browser error everytime.
May 29, 2014 at 7:17 PM