将 Html 渲染为图像

Posted 2023-05-07

【中文标题】将 Html 渲染为图像

【英文标题】：Render Html as Image

【发布时间】：2012-12-13 17:04:44

【问题描述】：

我有一个页面，其中包含一个名为预览的表单和按钮。我需要一种方法来生成预览，将生成的 html 转换为图像。

单击预览按钮会启动对控制器操作的 ajax 调用（我使用的是 Yii 框架），因此我从表单中收集了所有数据并生成了包含填充数据的预览。

我需要将生成的 HTML 转换为图像；通过这种方式，我可以调整到我需要的尺寸。

我尝试动态生成 .pdf，然后从 pdf 生成图像，并使用 mpdf 扩展名和 imagick。但是 imagick 要求 pdf 是现有文件，而我更喜欢使用 mpdf 生成 .pdf 字符串（我无法为每次单击预览按钮生成和删除 pdf）。

从 html 或“动态”生成的 pdf 字符串生成图像的好方法是什么？

这是我使用的代码，但它从imagick返回错误，说图像没有尺寸：

    $html2pdf = Yii::app()->ePdf->mpdf('','A4');        
    $html2pdf->WriteHTML($this->render('preview', array("data" => $data, "imageProvider" => $arrayImage),true));        
    $content_PDF = $html2pdf->Output('', EYiiPdf::OUTPUT_TO_STRING);        
    $im = new Imagick();         
    $im->readImageBlob( $content_pdf );         
    //$im->setIteratorIndex(0);
    $im->setResolution( 800, 600 );
    $im->setImageFormat( "jpeg" );
    header( "Content-Type: image/jpeg" );        
    echo $im->getImage();

【参考方案1】：

您需要重新考虑获取 HTML 并生成它的图像文件的要求。

我需要将生成的 HTML 转换为图像；这样我就可以 重新调整到我需要的尺寸。

您可以使用适当的 CSS 轻松调整表单中的尺寸和所有元素的大小。这是我要走的路线。

生成图像似乎有点过头了。

【讨论】：

是的，我知道这不是一个好的解决方案，但这样的结果是一个不可点击的对象，只有一个图像;)。我需要这个结果。有什么想法吗？

您可以随时在预览表单上放置一个覆盖 div，增加覆盖上的 z-index 并将不透明度降低到 0。然后用户将无法点击预览表单但可以查看。我仍然认为 HTML 解决方案胜过图片选项。

【参考方案2】：

为了使用Imagick，你需要设置图片的SIZE，不仅仅是解决方案： 你能先试试这样的东西，看看会发生什么吗？

$thumb = new imagick("/path/".$filename);
$thumb->setImageFormat( "png" );
$thumb->thumbnailImage( 128, 128);