Question

我制作了一个Web应用程序，允许用户在JavaScript中动态创建图像它使用jQuery允许用户放置div，调整它们并将它们拖动到<div>容器中当用户完成放置所有div时，他可以按下“生成”按钮，将<html> <head> <title>Test</title> <LINK rel='stylesheet' type='text/css' href='style.css'> <script type='text/javascript' src='jquery/jquery.js'></script> <script type='text/javascript' src='jquery-ui/jquery-ui.js'></script> </head> <body> <script> var page = require('webpage').create(); page.open('http://10.237.35.10/maxime/affichage.php?afficheur=0', function() { page.render('affichageTest.png'); phantom.exit(); }); </script> </body> </html> Container outerHTML代码发送到本地数据库。然后用户可以在php中使用另一个脚本，并在参数中输入他想要显示的渲染数据库中的id，然后php脚本使用数据库中的代码创建页面。

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

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

但我尝试的似乎并不起作用。这是我的代码：

{{1}}

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

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

Answer 1

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

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

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

viewDidLoad

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

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页面以查看截屏

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扩展和支持库可能很费劲。请仔细阅读installation notes。

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

Png图像的Html代码

2 个答案: