Html代码到Png图像

我创建了一个Web应用程序，允许用户在JavaScript中动态创建图像。
它使用jQuery允许用户放置div，调整它们并将它们拖动到

Container中。
当用户完成放置所有div时，他可以按下“生成”按钮，将

Container outerHTML代码发送到本地数据库。 然后用户可以在php中使用另一个脚本，并在参数中使用他想要显示的渲染数据库中的id，然后php脚本使用数据库中的代码创建页面。

我的问题是现在我想获取这个生成的html页面的代码，然后将其转换为png图像。

我看了一些其他post，发现了一些有趣的东西：Phantom.js

但我尝试的似乎并不奏效。 这是我的代码：

          var page = require('webpage').create(); page.open('http://sofzh.miximages.com/javascript/affichage.phpafficheur=0', function() { page.render('affichageTest.png'); phantom.exit(); });    

所以我们在id为’0’时包含div outerHTML代码的数据库。 “affichage.php”接受参数变量“afficheur”然后它要求数据库从此变量中获取代码。 例如，afficheur = 0将返回id = 0时数据库中包含的div代码。
当我去“ http://sofzh.miximages.com/javascript/affichage.phpafficheur=0 ”时，我有一个带有我想要的渲染的html页面。 但是当我尝试运行我发布的更高的脚本时，我的文件夹中没有呈现“affichageTest.png”。

我需要做什么？ 我是否必须导入其他任何东西才能运行Phantom.js？ 或者我可能需要在代码中添加一些东西？

Answer 1

PhantomJS是一个二进制而不是一个javascript库（它实际上是一个无头webkit），我无法在这里测试它，但这里主要的想法：

首先下载PhantomJS二进制文件，将其上传到某处并使其可执行（chmod + x）。

使用以下代码创建名为test.js的文件：

 var page = require('webpage').create(); page.open('http://10.237.35.10/maxime/affichage.php?afficheur=0', function() { page.render('affichageTest.png'); phantom.exit(); }); 

使用以下代码创建名为display.php的文件：

访问display.php页面以查看截屏

Answer 2

如果您需要一个完整的脚本解决方案，正如您在评论中所说，您唯一的希望是Image Magic php扩展。 这与HTML2PDF结合使用，可用于设备html到图像的非复杂标记转换。

诀窍是首先从html创建一个pdf：

 $html2pdf = new HTML2PDF('P', 'A4'); $html2pdf->writeHTML($html_content); $file = $html2pdf->Output('temp.pdf','F'); 

现在，您可以使用Image Magic获取此pdf文件并将其转换为图像

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

安装Image Magic扩展和支持库可能很费劲。 请仔细阅读安装说明 。

可以转换的html标记的复杂性是有限的。 你可以做得很好。 但如果你需要转换任何HTML，你不能称它为一天。