如何使用PHP获取给定的HTML代码的缩略图视图

Question

I'm using ckeditor to create email templates, I'm trying to get a thumbnail view of a given html code.

I have tried with

html2canvas(document.getElementById('templatecontent'),{
   onrendered: function (canvas) {         
    var imgString = canvas.toDataURL("image/png");
    window.open(imgString);                  
}});

But here id(#templatecontent) is hidden textarea element. How to save an image even if the id is hidden.

Or

Can this operation can be done directly with php if I have html code? this will be great. Please give me some suggestions or procedure to follow.

Error details: IndexSizeError: Index or size is negative or greater than the allowed amount

Answer 1

    $html = @file_get_contents('Myvoucher/'.$_POST['filename'].'.html');

    $getFileCommonContents = @file_get_contents('voucher_common.html');
    $getFileCommonContents = str_replace('[MAIN_CONTENT]',  $html,      $getFileCommonContents);
    $html = 'htmlfiles/'.$_POST['filename'].date("Ymd").time().'.html';
    @file_put_contents($html,$getFileCommonContents);
    $target_html_file_url = 'http://xx.com/prakash_rd/'.$html;
    $phantomJs = 'jsfiles/'.$_POST['filename'].date("Ymd").time().'.js';
    $target_image_file  =   'images/'.$_POST['filename'].date("Ymd").time().'.jpg';
    $phantomScript              =   "var page = require('webpage').create();
    page.viewportSize = {
    width: 1343,
    height:12996
    };
    page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36';

    page.onLoadStarted = function () {
        console.log('Start loading...');
    };

    page.onLoadFinished = function (status) {
        setTimeout(function() {
            phantom.exit();
              // Do something after 5 seconds
        }, 5000);
    };

    page.open('".$target_html_file_url."',function (status) {
        page.render('".$target_image_file ."', { format: 'jpg', quality: 90 });
        phantom.exit();                                     
    });";

            @file_put_contents ($phantomJs, $phantomScript);        
            $command                    =   'phantomjs '.$phantomJs;
            @shell_exec($command);  
            if(file_exists($target_image_file))
            {
            //  unlink($phantomJs);
            }