Question

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

Ajax script

$.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 Script：

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();
}

This is working fine and I am able to create html and change the html with new html.

有没有办法创建该html块的图像，这样我就可以返回图像并在#someTag而不是html中显示图像。

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

由于

Answer 1

我使用以下技术

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

Jquery代码：

$(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);
        }
    });
});

}）;

它适合我。我希望你找到解决方案。

Answer 2

从HTML块生成图像的方式有两种：-

1。使用Jquery：-

html2canvas(document.getElementById('frame')).then(function(canvas) {
       // to view the generated image on the same page
        document.body.appendChild(canvas);

        // to save the image as png file
        Canvas2Image.saveAsPNG(canvas);

        // Get base64URL
    canvas.toDataURL('image/jpeg').replace('image/jpeg','image/octet-stream');
});

https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js

2。使用spatie / Browsershot软件包：-

可以通过Composer安装此软件包。

composer require spatie/browsershot

在所有示例中，都假定您将此命名空间导入了文件顶部

use Spatie\Browsershot\Browsershot;

这是创建网页图像的最简单方法：

Browsershot::url('https://example.com')->save($pathToImage);

默认情况下，屏幕截图的类型为png。（根据Puppeteer的配置），但是您可以使用quality选项将其更改为jpeg。

Browsershot::url('https://example.com')
    ->setScreenshotType('jpeg', 100)
    ->save($pathToImage);

默认情况下，屏幕截图的大小将与您桌面使用的分辨率相匹配。需要其他尺寸的屏幕截图吗？没问题！

Browsershot::url('https://example.com')
    ->windowSize(640, 480)
    ->save($pathToImage);

您可以使用select截取与选择器匹配的元素的屏幕截图。

Browsershot::url('https://example.com')
    ->select('.some-selector')
    ->save($pathToImage);

您可以使用fullPage（）截取整个页面的屏幕截图。

Browsershot::url('https://example.com')
    ->fullPage()
    ->save($pathToImage);

有关更多选项，您可以使用官方文档： https://github.com/spatie/browsershot

将latml bock转换为laravel中的图像

2 个答案: