Html代码到Png图像 [英] Html code to Png image
问题描述
我制作了一个Web应用程序，允许用户在JavaScript中动态创建图像。
它使用jQuery来允许用户放置div，调整它们大小并将它们拖到< div> Container。
当用户完成放置所有div时，他可以按下Generate按钮发送< div> ; 将outerHTML代码容器放入本地数据库。
然后，用户可以使用另一个脚本，在php中，并在参数id中输入要显示的渲染数据库，然后php脚本使用数据库中的代码创建一个页面。
我的问题是现在我想要把这个生成的html页面的代码，然后将其转换为PNG图像。
我看了一些其他的帖子，发现了一些有趣的东西：Phantom.js
但是我所尝试的似乎并不奏效。这里是我的代码：
< html>
< head>
< 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是一个二进制不是JavaScript图书馆（它实际上是一个无头webkit），我不能在这里测试它atm，但是这里的主要想法是：首先下载 htmlrel =nofollow> PhantomJS
创建一个名为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>测试< /标题>
< 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 = 测试 >
< / body>
< / html>
访问display.php页面查看屏幕截图
I made a web application which allow the user to create an image dynamically in JavaScript.
It use jQuery to allow the user to place div, resize them and drag them into a <div> Container.
When the user finished to place all div, he can press the "Generate" button which send the <div> Container outerHTML code into a local database.
Then the user can use another script, in php, and past in parameter the id in the database of which render he want to display, then the php script create a page using the code in the database.
My problem is now I want to take the code of this generated html page, then convert it into a png image.
I looked at some other posts and found something interesting : Phantom.js
But what I tried doesn't seem to work. Here is my code :
<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>
So we have the database with the div outerHTML code contained at the id '0'.
"affichage.php" take in parameter a variable "afficheur" then it ask the database to get the code from this variable. For example, afficheur=0 will return the div code contained in the database at the id=0.
When I go to "http://10.237.35.10/maxime/affichage.php?afficheur=0" I have a html page with the render I want. But when I try to run the script I'd posted higher, I haven't any "affichageTest.png" rendered in my folder.
What do I have to do? Do I have to import anything else to run Phantom.js? Or maybe I need to add something to my code?
PhantomJS is a binary not a javascript librarie (it is actually a headless webkit), I can not test it here atm, but here the main idea :
First download the PhantomJS binary, upload it somewhere and make it executable (chmod +x).
Create a file named test.js with this code below :
var page = require('webpage').create();
page.open('http://10.237.35.10/maxime/affichage.php?afficheur=0', function() {
page.render('affichageTest.png');
phantom.exit();
});
Create a file named display.php with this code below :
<?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>
Visit the display.php page to see the screen capture
这篇关于Html代码到Png图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
