Hello Friends,

Am working on a greeting card project (like www.funkypigeon.com) where after customizing a card, you can submit it to DB and a thumbnail of what you created will be generated.

At submitting the card, I generate d customization in txt like below.But how do i generate a thumnail from this text div. HELP PLS

<!--TEXT DIVS-->
<table class="draggable cardinputs ui-draggable" id="f1" contenttype="text" style="z-index: 4; position: absolute; top: 30px; left: 100px; padding: 3px; height: 20px; width: 150px; text-align: center; vertical-align: middle; border: 2px solid rgb(221, 221, 221);"><tbody><tr><td style="font-family: &quot;PassionOne-Bold&quot;; font-size: 20px;">Happy Birthday Daddy</td></tr></tbody></table>


<table class="draggable cardinputs ui-draggable" id="f1a" contenttype="text" style="z-index: 3; position: absolute; top: 290px; left: 100px; padding: 3px; height: 20px; width: 150px; text-align: center; vertical-align: middle; border: 2px solid rgb(221, 221, 221); font-weight: bold;"><tbody><tr><td style="font-family: &quot;Bangers&quot;; font-size: 16px;">From: Mummy</td></tr></tbody></table>



<!--BG DIV OVER-->
<div class="draggable cardinputs ui-draggable" id="f2" contenttype="image" style="z-index: 2; text-align: center; position: absolute; top: 95px; left: 72px; padding: 0px; height: 160px; width: 200px; border: 2px solid rgb(204, 0, 0);"></div>

<!--FRONT CARD BG HOLDER-->
<div id="frontimgbg" style="z-index: 1; background-image: url(&quot;http://localhost/cards/admin/upload/frontbgs/frozen.jpg&quot;);"></div>

<!--BG DIV HOLDER-->
<div id="customimg" contenttype="image" style="z-index: 0; text-align: center; position: absolute; top: 85px; padding: 0px; height: 180px; width: 300px; background: url(&quot;http://localhost/cards/admin/upload/photos/Picture0002.jpg&quot;) no-repeat scroll center top / auto 100% transparent; left: 22px;"></div>

Thanks

Wait, let's try to simply the task:

  1. you want to write text to an image?
  2. Or you want to extract text from an existing HTML code?

I want to convert a div content (which in clude text & background image) to an image (thimbnail).

Ok, that's clear, my point is this:

If you can generate that div through PHP, then you don't need to convert it, you have to use the same data source to create a different result, through an image library as GD or Imagick.

If you're working on static HTML, or external pages, then it becomes complex, you could use DOMDocument and then an image library to create the result.

That's why I'm asking those questions.