5 ms·

Textify: Convert images to HTML text

203 points by nephics 15y ago

jasonkester 15y 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.
- hakim 15y 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 15y ago
I was expecting automatic ASCII art, like http://aa-project.sourceforge.net/gallery/ http://aa-project.sourceforge.net/gallery/, but this is nice too. The submission needs a lot of characters, though.
VMG 15y 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
- hakim 15y ago
  You must've reloaded just as I was uploading a small update.
  - hartror 15y 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 15y ago
Maybe it's me, but I can't get this to work (in either Chrome 12 or IE9).
- AgnesLam 15y ago
  For me, it works in Chrome but not IE.
arkem 15y ago
This is cool! There's a typo in the controls, it says "Back & White" when it should be "Black & White"
ssdsa 15y ago
I did something similar in 1997 (!): http://home.wtal.de/ss/html/pnmtohtml/baby_032.html http://home.wtal.de/ss/html/pnmtohtml/baby_032.html What do you think?
- jasonkester 15y 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 15y 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 15y ago
  Aha! this is amazing. Is there a web interface to upload and try ?
  - ssdsa 15y 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 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=de&ie=UTF-8&layout=2&eotf=1&sl=de&tl=en&u=http%3A%2F%2Fhome.wtal.de%2Fss%2Fhtml%2Fpnmtohtml%2Fpnmtohtml.html http://translate.google.de/translate?js=n&prev=_t&hl...
highace 15y ago
"Convert images to HTML text. Drag and drop images on to the page to start murdering your browser!"
- geekzgalore 15y ago
  I agree. The tab hogs memory and kills the browser.
  - hartror 15y ago
    Works fine for me. Ubuntu 11.04 - Chrome 11
    - geekzgalore 15y ago
      Windows XP - Firefox 5.0a2. Works today though.
- hakim 15y 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 15y ago
I really like it. well done.
hbrouwer 15y ago
I dragged in a screenshot of OSX. Makes the dock look cool ;-)
Flam 15y ago
Hakim, you always make cool things. :)
how_impressive 15y ago
Why?
- tincholio 15y ago
  Why not?
elliptical 15y ago
And the purpose?
SonicSoul 15y 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 15y 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 15y ago
Try deleting all characters from "Character set" and click APPLY SETTINGS :-)
antihero 15y ago
Using • you can recreate pointillism :)
- wtracy 15y 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 15y 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 15y ago
  http://textify.it/js/hakim.textify.min.js 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 15y 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 15y 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 15y ago
I somewhat expected JS-based OCR. But this is cool, too!
jzting 15y ago
Love it.
fcolaco 15y 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 http://pixeroid.com Update coming soon

203 points by nephics 15y 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.

hakim 15y 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 15y ago

I was expecting automatic ASCII art, like http://aa-project.sourceforge.net/gallery/ http://aa-project.sourceforge.net/gallery/, but this is nice too. The submission needs a lot of characters, though.

VMG 15y 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

hakim 15y ago
You must've reloaded just as I was uploading a small update.
- hartror 15y 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 15y ago

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

AgnesLam 15y ago
For me, it works in Chrome but not IE.

arkem 15y ago

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

ssdsa 15y ago

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

jasonkester 15y 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 15y 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 15y ago
Aha! this is amazing. Is there a web interface to upload and try ?
- ssdsa 15y 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 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=de&ie=UTF-8&layout=2&eotf=1&sl=de&tl=en&u=http%3A%2F%2Fhome.wtal.de%2Fss%2Fhtml%2Fpnmtohtml%2Fpnmtohtml.html http://translate.google.de/translate?js=n&prev=_t&hl...

highace 15y ago

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

geekzgalore 15y ago
I agree. The tab hogs memory and kills the browser.
- hartror 15y ago
  Works fine for me. Ubuntu 11.04 - Chrome 11
  - geekzgalore 15y ago
    Windows XP - Firefox 5.0a2. Works today though.
hakim 15y 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 15y ago

I really like it. well done.

hbrouwer 15y ago

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

Flam 15y ago

Hakim, you always make cool things. :)

how_impressive 15y ago

Why?

tincholio 15y ago
Why not?

elliptical 15y ago

And the purpose?

SonicSoul 15y 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 15y 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 15y ago

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

antihero 15y ago

Using • you can recreate pointillism :)

wtracy 15y 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 15y 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 15y ago
http://textify.it/js/hakim.textify.min.js 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 15y 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 15y 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 15y ago

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

jzting 15y ago

Love it.

fcolaco 15y 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 http://pixeroid.com Update coming soon