javascript - 在 laravel 中将 html block 转换为图像

Question

我正在通过发送 ajax 请求创建 html 代码。

Ajax 脚本

$.ajax({
    url: "{{url('/')}}/phpScript", //Server script to process data
    type: 'POST',
    dataType: 'json',
    data: data, //this is an object with all my required variables
    success: function (html) {
        if (html) {
            $('#someTag').html(html); //change the html of #someTag with new html   
        }
    }

});

PHP 脚本:

static function createHtml() {
    ob_start(); ?>
        <div class="large-12 medium-12 columns" id="certificate-holder">
            <div class="middle-wrappe">
               <?php //some other code here to create the html ?>
            </div>
            <style>/** some style here**/</style>
        </div>


    <?php return ob_get_clean();
}

这工作正常，我能够创建 html 并用新 html 更改 html。

有什么方法可以创建该 html block 的图像，以便我可以返回图像并在 #someTag 而不是 html 中显示图像。

我已经使用 anam/phantommagick 从 html 创建图像，但在此我需要传递页面的 url 来创建图像。

谢谢

Answer 1

我使用以下技术

https://jsfiddle.net/8ypxW/3/

J查询代码:

$(function() { 
     $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);

            // Convert and download as image 
            Canvas2Image.saveAsPNG(canvas); 
            $("#img-out").append(canvas);
            // Clean up 
            //document.body.removeChild(canvas);
        }
    });
});

});

它对我有用。我希望你能找到你的解决方案。