将 HTML 代码转换为 Png 图像答案

【问题标题】：Html code to Png image将 HTML 代码转换为 Png 图像
【发布时间】：2016-04-19 10:36:05
【问题描述】：

我制作了一个 Web 应用程序，它允许用户在 JavaScript 中动态创建图像。
它使用 jQuery 允许用户放置 div、调整它们的大小并将它们拖到 <div> Container 中。
当用户完成所有 div 的放置后，他可以按下“生成”按钮，将<div> Container outerHTML 代码发送到本地数据库。然后用户可以使用另一个脚本，在 php 中，并在参数中传递他想要显示的渲染的数据库中的 id，然后 php 脚本使用数据库中的代码创建一个页面。

我现在的问题是我想把这个生成的html页面的代码，然后转换成png图片。

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

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

<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>

所以我们有了包含 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？或者也许我需要在我的代码中添加一些东西？

【问题讨论】：

phantomjs 是一个二进制文件，您必须安装它，然后使用命令行调用它。例如，如果您将代码放在 test.js 中，您将调用：phantomjs test.js
是否有另一种方法可以仅在脚本中制作？我在服务器上工作，我无权安装程序，但我可以使用便携式程序。但我当然更喜欢完整的脚本解决方案......
二进制文件不需要安装在windows上，解压后直接调用即可。在linux上可能是一样的。您只需在调用它时指定二进制文件的整个路径。如果你想在 php 中调用它，你可以使用 exec() 函数。
我试试，谢谢！
好吧，我需要： - 一个生成数据库条目的文件 - 一个可以通过它自己的 url 访问并在 GET 方法中传递变量值的 php 文件 - 一个带有 Phantom 的文件.js 脚本调用前一个 php 文件 - 一个带有 exec() 的 php 文件将 Phantom.js 调用到前一个脚本 - 然后肯定是另一个脚本来处理生成的图像。你有什么减少文件数量的建议吗？也许我可以在一个脚本中添加一些函数，但是哪个？

标签： javascript php jquery html image

【解决方案1】：

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

诀窍是先用html创建一个pdf：

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

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

$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，你就不能收工。

【讨论】：

感谢您的回答。 "$html_content" 变量是未来图像的 html 代码吗？我可以传递 url 而不是源代码吗？
$html_content 是一个包含标记的字符串。您可以使用将 url 转换为标记的函数。
好的，我试过你的代码，但似乎需要同时安装 HTML2PDF 和 Image Magic，对吧？
两者都是php脚本，无需安装即可使用。请参考我给你的链接。
好的，我首先尝试安装 html2pdf。我下载了 zip 文件，将其解压缩到服务器文件夹中，然后将 html2pdf php 文件导入到我的项目中。现在我收到一个错误，说 html2pdf 没有他的依赖项，但我无法下载并运行“Composer”来安装依赖项。我在哪里可以下载依赖文件并将其手动放在 html2pdf 文件夹中？非常感谢您的帮助。

【解决方案2】：

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

首先下载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 的文件：

<?php
  $file_path = exec('/path/to/phantomjs test.js');
?>
<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>
<img src="<?php $file_path ?>" alt="test">
    </body>
</html>

访问 display.php 页面查看屏幕截图

【讨论】：