How do I generate an image file defined by CSS properties? [closed]

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 9 years ago.

Is there any way to create image file (jpeg or png) from some html DIV which is defined by CSS style properties.

For Example:

#canvas_base {
 width: 400px;
 height: 200px;
 background-color: #1155aa;
}

div.text_div{
 font-size: 15px;
 font-family: Tahoma;
 color: #770000;
 line-height: 19px;
 position: absolute;
 top: 76px;
 left: 114px;
 display: inline-block;
 -webkit-transform: rotate(0deg);
} 
img.image_div{
 position: absolute;
 top: 14px;
 left: 61px;
 display: inline-block;
 width: 240px;
 height: 240px;
 -webkit-transform: rotate(0deg);
}

I'm working on a web application that users use to design their own business card. After submit they should recieve an jpeg mock-up sample (with designed business card) - something like this:

Can you give me some short guidance (name of PHP class, technology that should be used etc).

Answer 1

You should take a look at the GD library of PHP which enables you to create images and add texts.

Here's one article I wrote related with it with a class I created.

Answer 2

I suggest you use Phantomjs. This will allow you to create an HTML document and convert it into an image. You can them composite this image as you see fit using a graphics library.