Textify: Convert images to HTML text

[jasonkester]

Nice.

One thing that's obviously missing is a way to link to the image you've just created. I have a nice looking photo sitting there, but seemingly the only way to share it is to view source, copy, paste into a new HTML file and upload it to a server somewhere.

Have it start each new session at a random URL that you can share, and this will get very popular very fast.

[hakim]

Thanks for the comment. Will definitely add functionality for sharing images. I also just purchased textify.it and will be moving this project there.

[ssdsa]

I did something similar in 1997 (!): http://home.wtal.de/ss/html/pnmtohtml/baby_032.html What do you think?

[jasonkester]

That's awesome. It's amazing how much we could actually do back in the days of Netscape and IE version 4 and below.

Performance on the machines of the day was actually better than modern HTML5 stuff on modern hardware because the DOM was so much simpler and tuned toward performance. I could actually watch the little games I made using DIVs/LAYERs and pixel art images slow down during the 2000s as new browsers came out. It's only now, with quad core processors that they're back up to the speed they used to run on a Pentium.

[aerotrain]

Aha! this is amazing. Is there a web interface to upload and try ?

[highace]

"Convert images to HTML text. Drag and drop images on to the page to start murdering your browser!"

[hakim]

I added an option for rendering on a canvas element instead of adding elements to the DOM. It performs a lot better this way since there's no DOM reflow/layout to worry about.

[geekzgalore]

I agree. The tab hogs memory and kills the browser.

[michael_dorfman]

Maybe it's me, but I can't get this to work (in either Chrome 12 or IE9).

[AgnesLam]

For me, it works in Chrome but not IE.

[pmanacas]

Try deleting all characters from "Character set" and click APPLY SETTINGS :-)

[joshaidan]

I love the quality of the image when you set the character quantity to max, but I notice the speed of the rendering gets progressively slower with each pass.

And now I start pondering the scalability of the algorithm.

[antihero]

Using • you can recreate pointillism :)

[wtracy]

I got some neat painterly effects with /\|

(Be prepared to crank it up to something like 50000 characters if you don't want half the image to be background color, though.)

[fcolaco]

We released an App for Android/iPhone/iPad/iWhatever a few weeks ago with the same concept, but using artwork elements to recreate the photo, instead of text. It's called Pixeroid :) http://pixeroid.com Update coming soon

[HardyLeung]

This is cool! If you could use characters with different font sizes it may look better. Also kinda slow. You wanna explain a bit what you do? Is it just image -> choose a random point set -> draw? Is this based on Canvas or CSS?

[jaredwill]

http://textify.it/js/hakim.textify.min.js: "Recreates bitmap images using HTML text. Images are drawn onto a canvas element so that the pixels can be read. Letters, with colors matching the image pixels, are then placed at random locations on the screen."

Looks like it also uses dat.gui for drawing.

[VMG]

    Fatal error: main(): Failed opening required 'server/util.php' 
    (include_path='.:/hsphere/shared/apache/libexec/php4ext/php/') in 
    /hsphere/local/home/hakim/hakim.se/experiments/html5/textify/index.php on line 3

[hakim]

You must've reloaded just as I was uploading a small update.

[JoachimSchipper]

I was expecting automatic ASCII art, like http://aa-project.sourceforge.net/gallery/, but this is nice too.

The submission needs a lot of characters, though.

[gojomo]

I somewhat expected JS-based OCR. But this is cool, too!

[romain_g]

That is really great! Besides export options, what would it take to be able to modify the density over certain areas of the output image?

[cygwin98]

Not exactly the ascii art I expected. But still very cool anyway.

Also, it would be great, if someone implements figlet[1] using html5.

[1] www.figlet.org

[arkem]

This is cool! There's a typo in the controls, it says "Back & White" when it should be "Black & White"

[Flam]

Hakim, you always make cool things. :)

[hbrouwer]

I dragged in a screenshot of OSX. Makes the dock look cool ;-)

[SonicSoul]

worked great for me. awesome! i've been wanting to learn Processing so i could create public apps like this that do fun things to photos.. has anyone done that?

[justatdotin]

I really like it. well done.

[jzting]

Love it.