PHP: HTML to PNG serverside?

Question

I have some generated stuffs (graphs/tables), what's size is variing.

I need a tool what converts it to jpg or png server side and only the data and can be usable with php.

I tried wkhtmltoimage, phantomjs and mink too, but they captures the whole screen.

I will use this table for testing:

<div class="capturable">
    <table>
        <tr><td>This is one of my tables</td></tr>
    </table>
</div>

Yes becouse I have to send the image as an email attachement — Feralheart, Aug 30 '18 at 11:22

score 1 · Accepted Answer · answered Aug 30 '18 at 11:18

1

You could try using mPDF or TCPDF to easily convert the table to PDF and then simply convert pdf to png/jpg.

answered Aug 30 '18 at 11:18

Thomas J.

593
8
21

Thank you I will give it a try :D – Feralheart Aug 30 '18 at 11:19
By the way, before you go into such drastic methods, maybe you should take a look at https://github.com/tsayen/dom-to-image it was directed at this problem. But I doubt that there is other ways to do it with PHP, only with js https://stackoverflow.com/questions/10721884/render-html-to-an-image – Thomas J. Aug 30 '18 at 11:21
i do this on a regular basis server-side with TCPDF ... dont forget to read the small print (tldr; GNU Lesser GPL), and it can guzzle up quite a bit of cpu , just like guzzle. – YvesLeBorg Aug 30 '18 at 11:34

Veerendra · Answer 2 · 2018-08-30T11:46:32.853

As per your requirement you can call the js on the click of the event which initiates the email.

You can use HTML to Canvas

You just need to include the JS https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js into your html.

Then you can use the below script

html2canvas(jQuery(".main-content"), {
 useCORS: true,
 onrendered: function(canvas) {
 theCanvas = canvas;
 document.body.appendChild(canvas);
 dataOverview = canvas.toDataURL('image/png');
 uploadImage(dataOverview);//this is custom build function 
}});

.main-content is the selector for the section you want to convert into image

You can use it in a function or you can call it on document ready

function uploadImage(dataOverview)
{
    if(dataOverview)
    {
        jQuery.ajax({
            url: 'ajax url to post image data',
            type : 'POST',
            data : {
                dataOverview:  dataOverview,
            },
            dataType : 'JSON',
            success: function(response)
            {
                if(response.code == 200)
                {
                    //perform your action on success
                }
            }
        });
    }
}

Once the content of the image is sent to PHP you can write it to a file using below code

$dataOverview = $_POST['dataOverview'];
$dataOverviewData=substr($dataOverview, strpos($dataOverview, ",")+1);
$dataOverviewunencodedData=base64_decode($dataOverviewData);
$rand = rand();
$dataOverViewfname_png = $rand.'.png';
$dataOverimgfile_png='path to the directory where you want to save the image';
$imagegerated=file_put_contents($dataOverimgfile_png, $dataOverviewunencodedData);

This will generate a png image of the html element which you have passed in the selector.

This is a working code as i have been using it already in some of my projects.

OR if you want to convert raw html to Image you can use the below code

<?php
require 'pdfcrowd.php';

try
{
    // create the API client instance
    $client = new \Pdfcrowd\HtmlToImageClient("your_username", "your_apikey");

    // configure the conversion
    $client->setOutputFormat("png");

    // run the conversion and write the result to a file
    $client->convertFileToFile("/path/to/MyLayout.html", "MyLayout.png");
}
catch(\Pdfcrowd\Error $why)
{
    // report the error
    error_log("Pdfcrowd Error: {$why}\n");

    // handle the exception here or rethrow and handle it at a higher level
    throw $why;
}

?>

PDFCROWD

Hope it helps you

PHP: HTML to PNG serverside?

2 Answers2