Fatal编程技术网

Javascript Png图像的Html代码

javascript php jquery html image

Javascript Png图像的Html代码,javascript,php,jquery,html,image,Javascript,Php,Jquery,Html,Image,我制作了一个web应用程序，允许用户在JavaScript中动态创建图像。 它使用jQuery允许用户放置div，调整其大小并将其拖动到容器中。 当用户完成放置所有div后，他可以按下“Generate”按钮，将容器outerHTML代码发送到本地数据库中。 然后用户可以在php中使用另一个脚本，并在参数中使用要显示其渲染的数据库中的id，然后php脚本使用数据库中的代码创建一个页面 我的问题是，现在我想获取生成的html页面的代码，然后将其转换为png图像 我看了其他一些帖子，发现了一些有趣的

我制作了一个web应用程序，允许用户在JavaScript中动态创建图像。
它使用jQuery允许用户放置div，调整其大小并将其拖动到
容器中。
当用户完成放置所有div后，他可以按下“Generate”按钮，将
容器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>


试验
var page=require（'webpage'）。create（）；
第页打开（'http://10.237.35.10/maxime/affichage.php?afficheur=0，函数（）{
page.render（'affichageTest.png'）；
phantom.exit（）；
});
因此，我们拥有id为“0”的包含div outerHTML代码的数据库。 “affichage.php”接受参数一个变量“afficheur”，然后它要求数据库从该变量获取代码。例如，afficheur=0将返回数据库中id=0处包含的div代码。
当我转到“”时，我有一个带有所需渲染的html页面。但是当我尝试运行我发布的脚本时，我的文件夹中没有任何“affichageTest.png”呈现

我该怎么办？运行Phantom.js需要导入其他内容吗？或者我需要在代码中添加一些东西？

如果您需要完整的脚本解决方案，正如您在评论中所说的，您唯一的希望就是php扩展。这与可用于设备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扩展和支持库可能是一项艰巨的工作。请仔细阅读报告

可以转换的html标记的复杂性是有限的。你可以做得相当好。但是，如果需要转换任何html，就不能到此为止

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

首先下载二进制文件，将其上传到某个地方并使其可执行（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();
        });

<?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的文件：

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

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


试验
“alt=”测试“>
访问display.php页面查看屏幕截图

phantomjs是一个二进制文件，您必须安装它，然后用命令行调用它。例如，如果您将代码放在test.js中，您将调用：phantomjs test.js是否有其他方法使其仅在脚本中显示？我在服务器上工作，没有任何权利安装p程序，但我可以使用便携式程序。但我当然更喜欢完整的脚本解决方案…二进制文件不需要安装在windows上。实际上，您可以在解压缩后立即调用它。在linux上可能也是这样。您只需在调用二进制文件时指定二进制文件的整个路径。如果您想在php中调用它，可以使用e exec（）函数。我会试试的，谢谢！用你的技巧，我需要：-一个生成数据库条目的文件-一个可以通过自己的url访问并在GET方法中传递变量值的php文件-一个带有Phantom.js脚本的文件来调用上一个php文件-一个带有exec（）的php文件调用Phantom.js到上一个脚本-然后当然是另一个脚本来处理生成的图像。您有任何减少文件号的建议吗？也许我可以在一个脚本中添加一些函数，但是哪个？谢谢您的回答。“$html\u内容变量是未来图像的html代码？我可以传递url而不是源代码吗？$html\U内容是包含标记的字符串。您可以使用一个将url转换为标记的函数。好的，我尝试了您的代码，但它似乎需要安装HTML2PDF和Image Magic，对吗？这两个都是php脚本，您无需安装即可使用。请参考我给你的链接。好的，我首先尝试安装html2pdf。我下载了zip文件，在服务器文件夹中解压，然后将html2pdf php文件导入到我的项目中。现在我得到一个错误，说html2pdf没有他的依赖项，但我不能下载并运行“Composer”来安装依赖项。在哪里可以下载依赖文件并手动将其放在html2pdf文件夹中？非常感谢你的帮助。