个人中心
gpt4 book ai didi

javascript - HTML代码转PNG图片

转载 作者：太空宇宙 更新时间：2023-11-04 16:11:15 25 4
gpt4 key购买 nike

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

所以我们有一个数据库，其 div outerHTML 代码包含在 id '0' 处。“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 库(它实际上是一个 headless 的 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 页面以查看屏幕截图

关于javascript - HTML代码转PNG图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34783874/

25 4 0
文章推荐： javascript - 我该如何优化这个片段？
文章推荐： c++ - 在 C++ 中快速排序 boolean 数组
文章推荐： javascript - 在 redux 存储中切片数组总是会导致删除组件渲染上的最后一个数组项
文章推荐： c++ - 字符串实例化的问题
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com