単一のイメージとして、すべての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インデックスを維持することが重要だと位置

はすべて

Answer 1

最初にしても...それは私に500エラーをthrougs HTML2PDF https://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();