Programmatically create image from web-page or a single DIV

Question

Is there any way to programmatically create (client or server side (PHP)) a image from a specific DIV or a complete (web) page? I'm currently creating a web-site for free coupons and the idea is when the end-user clicks on the "Print" button, the app opens a new tab/window with all the selected coupons as a single image (JPG, PNG or etc..) in A4 format ready for printing. Each coupons has it's own data (Article name, price, description etc..) so I need it to be done programmatically over a coupon-template I designed.

I do not ask you to write code for me, just to suggest a solution I could use/develop. If not already exist, I will upload/publish it for free :)

Update: I did it with the PHP GD library :) Still not satisfied with the idea to use Images instead of PDF, because each printing results with different Coupon sizes (images) on different PC's. That's why PDF may would be a better solution. You can see/test it on demo.svikuponi.ba - Just select a few Coupons and click the PRINTAJ button above.

Answer 1

Here is a great way for you to create images on the client side: http://smus.com/screen-capture-for-chrome-os

You can take this and create a web app that will work nicely on webkit (for other browsers - I'll look at JS polyfills).

Answer 2

You cannot create image from div for sure but yes you can create dynamic images in php using its gd library. Following links will help:

http://php.net/manual/en/function.imagecreate.php

http://phptutorial.info/learn/create_images/

Answer 3

Did anyone mention html2canvas and/or jsfeedback ?

It create a page screenshot completely in javascript, then you can send to the server via ajax..

Obviously, CSS support lack some things.

Answer 4

In php, there is many image related functions like imagettftext() in GD library for details, check this out http://php.net/manual/en/book.image.php if GD is not enough, you can try imagick as well

for the template, you can try creating a true color handle in php from your file(image) and add the text part or something else with all kinds of effects and bar codes etc.

but in your case, i would suggest dynamic PDF creation since it would better with formatting instead of plain image, the pdf lib : http://www.fpdf.org/

Answer 5

you could easily have a background image of your token/voucher and overlay the text using some php variables.

i believe it is possible to create a unique bar-code with php imaging too.

Answer 6

It is possible to get a screenshot from a webpage, but this is quite a hassle. You need to start a webbrowser to render the page and get a screenshot from that.

You are probably better of by parsing some specification and feeding it to a couple of GD or Imagick functions. This is less versatile, but easier to manage.