Show HN: I wrote a script to turn a webpage into bitmap HTML. (Caution: huge) | Hacker News Reader

Show HN: I wrote a script to turn a webpage into bitmap HTML. (Caution: huge)

elliottkember.com

53 pointselliottkember32 comments

Perhaps this could be a good start for another coding contest: The most inefficient webpage.

The object: take a copy of the Google search page and represent it in the most inefficient, bloated way possible. There would be two divisions: time-bloat and space-bloat.

Rules: Every piece of code must be involved in displaying something visibly on the page. Every statement in the Javascript must be making forward progress toward displaying the page.

The functionality of the page must be exactly the same as the original.

Any other rules?

(There wouldn't be any loading and waiting on external resources, of course.)

Calculate `h=SHA256(original_page)` and `n=len(original_page)`.

    do
      page = gen_random_bytes(n)
    while (h != SHA256(page))
    print page

It can be even generated client-side!

Can't the same hash mean different data?

Well, sure. But if you add another check for likelihood that `page` is fairly-correct html in utf8, there should be around one correct result really :) If you get 2, the other one is probably a <form> you can use to sell your soul to satan - do not hit submit if you get it.

The problem with this, is that the random bytes in one iteration of the loop might be closer to the page than the next iteration, so there would be reverse progress in that instance. This entry would be disqualified.

    page_bytes = bytes(size_of(bytes_of(page)))
    do
      page_bytes += 1
    while (page_bytes != bytes_of(page))
    print page

This is cool, but when I first clicked it I thought it was transforming my current webpage into HTML/bitmap somehow. I was amazed. Then I realized it's a statically generated page. If you could make this into a bookmarklet that transformed the current page, then I'd be REALLY impressed. :)

Then turn it back into HTML with an experiment of mine: https://github.com/andershaig/img-con - It takes an image, writes a span with a background-color for each pixel. Turns a 100x100 image into a 7 MB HTML file.

Uh - that's exactly what this script does!

You're right and I should have paid more attention. I had thought you were generating just the image from a web page. Having actually worked on something similar, I can say I'm very very impressed with the load time.

Probably mostly the Gzip - the code is very repetitive. The RLE helps too.

Bonus points for apparently using RLE for same-colour runs of pixels. :)

Thanks! I did it without first, but it was way too big and crashed the browser.

Oh, the humanity. Why would you do this (apart from "Because I can")?

Finally a pixel-perfect display on any browser! With no-license font embedding.

I laughed.

But, there's another way - use a damn scripted gif or png</obvious>

...or for monochrome pages, is an xbm smaller?

update: oh yeah, i forgot, xbm files are C, though I suppose you could meta script them with more C.

people who really dont want their text stolen are going to see the massive bandwidth we have now and start just using images. protects it from anything but ocr.

Wolfram Alpha does this. I think it helps with writing formulae.

Source https://github.com/elliottkember/img2html.rb

and all of the sudden, the new years clock done in sql seems useful.

hope you don't go over your bandwidth quota ;)

I think it's to early to call this a startup... you need to think about your potential revenue sources. ;~)

Bandwidth deals? :)

If you are just looking to make a self-contained file that has the page as image, I would suggest you simply embed the image as base64.

I made a bitmap -> <table> once, that was pure hell like this. ;-)

Why didn't we think of doing this before we had Canvas!

...oh that's why.

Nice! this reminds of a script I wrote that turned images into svg: https://gist.github.com/761332

how?

I would assume he takes a screenshot of the page (xbrow.se is one utility for it) and then picks the colour from each point and displays it... quite simple to do, why is probably a better question :p

I thought he said he does it with javascript!

I just looked via Twitter and found he has posted it on Github, seems I was right: https://github.com/elliottkember/img2html.rb

And you'd be amazed to know that khtml (KDE's rendering engine, used by Konqueror) renders it instantly!

Now if only links worked. Then you would have created a modern image mapping service. I like it.

this week, i've been converting HTML output into PNG images. i used the preview feature of an HTML to PDF dll we have lying around.

basically doesn't get rendered at all in ie9. big surprise.

Reply on news.ycombinator.com