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.

Solution 1

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/

Solution 2

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.

Solution 3

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).

Solution 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/

Solution 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.

View more solutions

Comments

[AlenBer]

I had the same idea, having a default template and just overide the text data over it. Is it a better practice to do the processing on the server side or somehow on the client side !?

[AlenBer]

Doesn't that means that the end-user would have to have installed Adobe PDF !? I was looking for an image format just because it does not need to have anything installed execpt the browser, and the page width/height would also be auto-generated so the end-user would not worry about priting it correctly.

[tom91136]

client side would decrease server load, but then all users need to meet the "client side requirements" like some java applet

[tom91136]

I believe PDF is a format widely used and very few computer doesnt have PDF reader, just like flash. but anyway, you can still use my suggestion on the GD + image template part

[Mat]

relying solely on the client isn't always a good idea, no guarantees on javascript. server side there is more load, but for your needs this wouldn't take very long to as it's just echoing variables to screen and possibly creating an image. unless your voucher will be downloaded by millions i would vote server side.

[AlenBer]

I will give the first link a try, it seems to be a simple solution :) Thanks all for the great answers.

[FabricioG]

this method would need to render the page client side BEFORE the screen shot can be taken.

[dev7]

This solution will have CORS issues and potentially other http/s same protocol issue. Not recommended.