Textify: Convert images to HTML text(hakim.se)
hakim.se
Textify: Convert images to HTML text
http://hakim.se/experiments/html5/textify/
37 comments
Thanks for the comment. Will definitely add functionality for sharing images. I also just purchased textify.it and will be moving this project there.
I did something similar in 1997 (!): http://home.wtal.de/ss/html/pnmtohtml/baby_032.html
What do you think?
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.
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.
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!)
(And yes, I do understand how the ubiquitous nature of the web actually makes this important... but I still find it funny!)
Aha! this is amazing. Is there a web interface to upload and try ?
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...
"Convert images to HTML text. Drag and drop images on to the page to start murdering your browser!"
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.
I agree. The tab hogs memory and kills the browser.
Works fine for me.
Ubuntu 11.04 - Chrome 11
Ubuntu 11.04 - Chrome 11
Windows XP - Firefox 5.0a2.
Works today though.
Maybe it's me, but I can't get this to work (in either Chrome 12 or IE9).
For me, it works in Chrome but not IE.
Try deleting all characters from "Character set" and click APPLY SETTINGS :-)
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.
And now I start pondering the scalability of the algorithm.
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
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?
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.
Looks like it also uses dat.gui for drawing.
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 3I 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.
The submission needs a lot of characters, though.
I somewhat expected JS-based OCR. But this is cool, too!
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?
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
Also, it would be great, if someone implements figlet[1] using html5.
[1] www.figlet.org
This is cool! There's a typo in the controls, it says "Back & White" when it should be "Black & White"
Hakim, you always make cool things. :)
I dragged in a screenshot of OSX. Makes the dock look cool ;-)
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?
I really like it. well done.
Love it.
And the purpose?
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.