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>

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

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


Edited by Dani: Formatting fixed

3 Years
Discussion Span
Last Post by cereal

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.