Textify: Convert images to HTML text

http://hakim.se/experiments/html5/textify/

by nephics • 15 years ago

203 37 15 years ago

jasonkester2• 15 years ago

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.

hakim3• 15 years ago

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

JoachimSchipper• 15 years ago

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.

VMG• 15 years ago

    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

hakim3• 15 years ago

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

hartror2• 15 years ago

Best way to do updates is to deploy new versions to separate directories and just change a symlink. Bonus is you can quickly revert to the older version if you find an issue.

michael_dorfman• 15 years ago

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

AgnesLam• 15 years ago

For me, it works in Chrome but not IE.

arkem• 15 years ago

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

ssdsa2• 15 years ago

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

jasonkester2• 15 years ago

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.

owenmarshall• 15 years ago

I had a similarly amusing moment years back when I saw a bit-blit demo in the browser. All this excitement about something that was state of the art on Commodore 64s.

(And yes, I do understand how the ubiquitous nature of the web actually makes this important... but I still find it funny!)

aerotrain• 15 years ago

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

ssdsa2• 15 years ago

Sorry, but I didn't create any web interface for that back in 1997. :-) Instead, I wrote a C program to generate those HTML files. More information on that is here: http://home.wtal.de/ss/html/pnmtohtml/pnmtohtml.html - Sorry, in German. Maybe Google translate might be of some use: http://translate.google.de/translate?js=n&prev=_t&hl...

highace• 15 years ago

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

geekzgalore2• 15 years ago

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

hartror2• 15 years ago

Works fine for me.

Ubuntu 11.04 - Chrome 11

hakim3• 15 years ago

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.

justatdotin• 15 years ago

I really like it. well done.

hbrouwer• 15 years ago

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

Flam• 15 years ago

Hakim, you always make cool things. :)

how_impressive• 15 years ago

Why?

tincholio• 15 years ago

Why not?

elliptical• 15 years ago

And the purpose?

SonicSoul• 15 years ago

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?

cygwin98• 15 years ago

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

pmanacas• 15 years ago

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

antihero• 15 years ago

Using • you can recreate pointillism :)

wtracy• 15 years ago

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.)

HardyLeung• 15 years ago

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• 15 years ago

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.

romain_g• 15 years ago

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?

joshaidan• 15 years ago

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.

gojomo• 15 years ago

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

jzting• 15 years ago

Love it.

fcolaco• 15 years ago

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

Textify: Convert images to HTML text

Related Stories