Create Images From HTML

The Problem:

I want a simple way to create an image from dynamically generated html.

So Recently I’ve been working a lot inside tinymce, a javascript html WYSIWYG editor. I’ve wrote a couple plugins to manage/upload files and images utilizing my flash uploader. Tinymce has a couple plugins you can buy, but if you’re a developer seems like a waste of money. Maybe I’ll write a basic tutorial on how to upload pics and insert them into tinymce next time. Anyway on top of that I wanted tinymce to work like word in that it would have paging. Once I got that paging working, for the most part, I wanted to have thumbnails of each page. This is where my problem comes in. Basically each page in tinymce is wrapped in a div with a unique id. Therefore I have access to the html of each page, but how can I create an image from just a string of html? I looked all over the web and there were tools to do it but all of them cost some money and seemed more complicated than it should be. I knew I needed some way to render the html server side. There are tools out there that are open source like Gecko and Webkit, but this just seemed more complicated than it should be to create an image.
So I started thinking of other ways and I knew specifically that php has built in pdf support. I ended up finding dompdf. The rendering engine for this seemed to be really accurate and supports both inline styles and css. After creating the pdf I found that ImageMagick can convert pdfs to an image using GhostScript, an interpreter for the PostScript language and portable document format.
After those are installed, it is really simple. In my situation I’m updating the thumbnails via ajax to keep them up to date. I’m also using jQuery to make the ajax call. I pass the id of the page and the content of the page. I then return the id of the page with the name of the image separated by a colon. Also if you were wondering, the id of the actual page is the same as the id of the thumbnail. This can be done because tinymce is actually in an iframe so technically there is only one id per page. Side Note: “Apparently a lot of people don’t realize that ids are supposed to be unique per page. If you want to style more than one element use classes not ids. People then tell me, ‘But I’ve never had a problem with using the same id.’ It’ll render just fine but if you ever use javascript and use document.getElementById(‘someid’) then you’ll have a problem. Anyway I digress, back to creating images.” Here is the code to make the ajax call.


   $.post('ajax/test.php', {id:pageid, content:str}, function(data){
	var d = data.split(':');
	$('#'+d[0]).html('<img src="'+d[1]+'" alt="thumbnail" />');
  });

Now here is the ajax page that actually does the conversion. I first create the pdf from the content I passed to it. I have to add the <html> <body> tags for this to work correctly. There is also a lot of things you can do when creating the pdf, just look at the documentation to learn more. I catch the output of the pdf and then put the content into a file called test.pdf. I then use the time() function to create a unique image name so the browser wont display a cached version of the image. Finally I call the system function which is used to execute an external command. In this case the command is ImageMagick’s convert function. Side Note: When trying to run “convert” in Windows without the path in front it will possibly fail because it is trying to execute Windows convert program. There are a couple ways to get around it. One way being to look in the PATH environment variables and set the ImageMagick path closer to the front in the PATH system variables so that it comes before the Windows convert program. Some people also said that changing ImageMagick’s convert.exe name to imconvert.exe and call that instead will solve the issue.

   
require_once("../dompdf-0.5.1/dompdf_config.inc.php");

 $id = $_POST['id'];
 $html = '<html><body>'.html_entity_decode($_POST['content']).'</body></html>';

 $paper = 'letter';
 $orientation = 'portrait';

 $old_limit = ini_set("memory_limit", "32M");

 $dompdf = new DOMPDF();
 $dompdf->load_html($html);
 $dompdf->set_paper($paper, $orientation);
 $dompdf->render();
 $pdf = $dompdf->output();
 file_put_contents("test.pdf", $pdf);

$imagesample =  'sample'.time().'.jpg';

$source = 'C:\\your\\director\\here\\test.pdf';
$dest = 'C:\\your\\directory\\here\\'.$imagesample;
system("C:\\ImageMagick-6.5.4-Q16\\convert.exe $source $dest", $ret);

echo $id.':'.$imagesample;

And that is it! Cheers!