How to convert div content into image in php

Question

Is there any way in php to convert the html div content to jpg/png image?

 <div class="canvas-object" style="background-color: rgb(247, 213, 183);">  
        <img id="img1" class="img" src="logo.png" style="width:110px; height:54px;">
        <div>This is a sample text</div>
    </div>

Thanks!!

Google ... your best buddy! -> SO Solution maybe -> http://stackoverflow.com/questions/18581379/how-to-save-the-contents-of-a-div-as-a-image — Goikiu, Jan 08 '14 at 13:03
This is far more complex than you think in pure PHP. If you want to render HTML into image basically you need a complex browser engine. You may try to postback the image from clientside where it is shown. — Attila, Jan 08 '14 at 13:03

score 2 · Answer 1 · answered Jan 08 '14 at 13:16

Yes I have Done This Using html2canvas function but this is quite complex

Download Html2canvas from read the documentation

https://github.com/niklasvh/html2canvas/releases

You need to have 2 page a) One HTML page with Javascript on it b) another page to handle the request from this page(better if you ajax to pass the request)

          html2canvas($("#droppable2") , {
     onrendered: function(canvas) {
         dataURL = canvas.toDataURL("image/png");


 $(image_id).attr('src','images/ajax_loader.gif'); //show a loader while the request is being forwared


$.ajax({
   type: "POST",
   dataType: "json",
   url: "saveimage.php", //second file
   data: {data:dataURL},
  success: function(data) {

            image = data.data;
    source = 'template_images/'+username+"/"+magz_name+"/"+image+"?a="+Math.random();  // image name

    $(image_id).attr('src',source); // set the source of new image with dynamically generated image


});
 });

on the second page

use base64_decode() function to get the content of this image and put this in a new file

<?php 
 $data = $_REQUEST['data'];
    $rawImage =$data;
$removeheaders =substr($rawImage,strpos($rawImage,",")+1);
$decode = base64_decode($removeheaders);
    $fopen =fopen('newfile.png','wb');
fwrite($fopen,$decode);


   $arr = array('data' => 'newfile.png','username' => $username );
echo json_encode($arr);


 ?>

How to convert div content into image in php

1 Answers1