将所有 div 合并为单个图像并将其作为 jpg 文件上传到服务器

Question

我有下面的 div：

<div style="width:800px; height:420px; position:absolute; top:0px; left:0px; z-index:10; background-image: url('https://3t27ch3qjjn74dw66o1as187-wpengine.netdna-ssl.com/wp-content/uploads/2016/05/052516-800x420-vege-Wallpaper.jpg'); background-repeat:no-repeat;">

<div style="width:100px; height:100px; position:absolute; top:30px; left:100px; z-index:10; background-image: url('https://myanimelist.cdn-dena.com/images/useravatars/2793079.gif'); background-repeat:no-repeat;"></div>

<div style="width:100px; height:100px; position:absolute; top:30px; left:300px; z-index:10; background-image: url('https://myanimelist.cdn-dena.com/images/useravatars/2793079.gif'); background-repeat:no-repeat;"></div>


<div style="width:200px; height:30px; position:absolute; top:210px; left:300px; z-index:10; font-size:40px; color:#000; text-align:center;">SOME TEXT</div>

</div>

是否有可能将它们合并为单个图像并将其上传到服务器？

我尝试了 html5 画布，但很多时候它返回一个空白图像。 是否可以通过其他方式做到这一点？

保持每个 div 的 z-index 和位置很重要

谢谢大家

Answer 1

先获取html2pdfhttps://github.com/spipu/html2pdf

require_once dirname(__FILE__).'/../vendor/autoload.php';
use Spipu\Html2Pdf\Html2Pdf;
use Spipu\Html2Pdf\Exception\Html2PdfException;
use Spipu\Html2Pdf\Exception\ExceptionFormatter;

$html_content = '<div style="width:800px; height:420px; position:absolute; top:0px; left:0px; z-index:10; background-image: url(\'https://3t27ch3qjjn74dw66o1as187-wpengine.netdna-ssl.com/wp-content/uploads/2016/05/052516-800x420-vege-Wallpaper.jpg\'); background-repeat:no-repeat;">
<div style="width:100px; height:100px; position:absolute; top:30px; left:100px; z-index:10; background-image: url(\'https://myanimelist.cdn-dena.com/images/useravatars/2793079.gif\'); background-repeat:no-repeat;"></div>
<div style="width:100px; height:100px; position:absolute; top:30px; left:300px; z-index:10; background-image: url(\'https://myanimelist.cdn-dena.com/images/useravatars/2793079.gif\'); background-repeat:no-repeat;"></div>
<div style="width:200px; height:30px; position:absolute; top:210px; left:300px; z-index:10; font-size:40px; color:#000; text-align:center;">SOME TEXT</div>
</div>';

## get html2pdf https://github.com/spipu/html2pdf
$html2pdf = new HTML2PDF('P', 'A4');
$html2pdf->writeHTML($html_content);
$file = $html2pdf->Output('temp.pdf','F');

 # CONVERT PDF TO IMAGE
$im = new imagick('temp.pdf');
$im->setImageFormat( "jpg" );
$img_name = time().'.jpg';
$im->setSize(800,600);
$im->writeImage($img_name);
$im->clear();
$im->destroy();