CODEWITHSUNDEEP
phpjavascripthtmlimageweb
someonelse
someonelse

Reputation: 260

User friendly way to create a screenshot from a website

my visitors would like to be able to save some sites as an image-file, so they can look at it anytime offline. They visit my site with different devices (tablets, phones, pcs..) and different browsers so relying on third-party software is not a great option. (the imagefile format is pretty much irrelevant btw)

I would like my server to achieve this task for the users; Preferably with javascript, ajax, php otherwise anything else, if it's easy. The pages are dynamically created, but relatively simple html, some text, some jpg-images, no css - nothing fancy (like animated gifs or flash). the dynamical creation doesnt require session cookies or something, just url (and maybe get) information.

I dont have much of an idea how to do this - when I google i just find solutions for endusers, not for me. The only possibility i know of right now is to use the php-png functionality. That way my visitors can click on a link and be directed to a dynamic png file that they can download. But I'd have to "write" the pngs manually, php-png cant convert html to png, can it?

I only tried php-png once, ~5 years back; I remember it being a bit laborious. Is there a library for easier and extended functionality?

Everything summed up in one question: Whats the easiest way to make an image from a html website? It should be as easy as possible for the user primarly, and then for me.

;) Extra Credits: in case I find something that can create images dynamically. How do I get any Browser to automatically download a picture permanently in the download directory instead of showing just a temporarily saved preview?

Upvotes: 0

Views: 314

Answers (2)

Alastair McCormack
Alastair McCormack

Reputation: 27714

PDF's would be a better solution as they're scalable and can include hyperlinks. The process would be to render a page using a headless browser and output the rendered PDF. A quick Google revealed some interesting possibilities:

  1. Dompdf: http://code.google.com/p/dompdf/
  2. WebKit/KHTML based renderer: https://github.com/mreiferson/php-wkhtmltox
  3. Google Chrome Webkit Backed: http://phantomjs.org/ + https://github.com/diggin/php-PhantomjsRunner

Upvotes: 2

tucuxi
tucuxi

Reputation: 17945

If the pages you want people to download as images are your own, and you control the server that is serving them, you can use php-imagemagick to build the "screen-shot" images server-side (so users would choose between an HTML version and a single-image version; or would click on a button in the HTML version to download the image version). First you define a canvas, then you render text blocks and images on to it, and finally you save that as a PNG or JPG image.

Imagemagick does not offer much flexibility in the way of fonts; you may want to render the text-blocks using imagegetttftext instead, and then add those to the imagemagick image.

Since building images in this way can be server-side expensive, you would want to cache results.

Upvotes: 1

Related Questions