在laravel中将html块转换为图像

Posted 2023-03-14

【中文标题】在laravel中将html块转换为图像

【英文标题】：Convert html block to image in laravel

【发布时间】：2016-02-25 06:49:21

【问题描述】：

我正在通过发送 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来创建图像。

谢谢

【参考方案1】：

有两种从 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 的配置）但你可以将其更改为 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

【参考方案2】：

我使用以下技术

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

);

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

【讨论】：

[link] html2canvas.hertzen.com/examples.html 是您的另一个选择。

这是一个好方法:)，但我需要在服务器端而不是在客户端执行此操作，因为我还需要保存该图像以供使用。如果您对此有任何想法，请帮助我。

我猜这个 plus 会以 base64 编码形式生成输出，因此您可以将其存储在数据库中以供将来参考。覆盖插件的行为。如果可以的话。