Search code examples
phpcssgdlib

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

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

For Example:

div area on HTML page

#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:

enter image description here

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

Solution

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