logo标签列表

如何使用Node.js解析HTML/XML文档？

javascriptjquerynode.jscheeriojsdom
9

我有一个包含generatePNG函数的editor.html文件：

  <!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Diagram</title> 

    <script type="text/javascript" src="lib/jquery-1.8.1.js"></script> 
//    <!-- I use many resources -->
<script></script> 

    <script> 

        function generatePNG (oViewer) { 
            var oImageOptions = { 
                includeDecoratorLayers: false, 
                replaceImageURL: true 
            }; 

            var d = new Date(); 
            var h = d.getHours(); 
            var m = d.getMinutes(); 
            var s = d.getSeconds(); 

            var sFileName = "diagram" + h.toString() + m.toString() + s.toString() + ".png"; 

            var sResultBlob = oViewer.generateImageBlob(function(sBlob) { 
                b = 64; 
                var reader = new window.FileReader(); 
                reader.readAsDataURL(sBlob); 
                reader.onloadend = function() { 
                    base64data = reader.result; 
                    var image = document.createElement('img'); 
                    image.setAttribute("id", "GraphImage"); 
                    image.src = base64data; 
                    document.body.appendChild(image); 
                } 

            }, "image/png", oImageOptions); 
            return sResult; 
        } 

    </script> 


</head> 

<body > 
    <div id="diagramContainer"></div> 
</body> 
</html>

我希望使用Node.js访问DOM并获取image.src。我发现可以使用cheerio或jsdom来完成。
以下是我的起始代码：
var cheerio = require('cheerio'),
    $ = cheerio.load('editor.html');

但我不知道如何访问和获取image.src。

你想获取的image.src是在editor.html内部生成的，使用的是该页面内的javascript代码吗？ - luiso1979
@luiso 是的，image.src 是基于64位数据，并且是在 editor.html 中生成的，我想从 node.js 服务器中提取它。 - ameni
@RogierSpieker 我只想从node.js访问editor.html并获取image.src。 - ameni
在我的脑海中有两种可能，关于你所问的问题。一是你想要Node.js访问由实时页面上一个网页浏览器生成的图像，或者你想要能够访问存储在HTML文件中的图像数据，在img元素的src属性中。请澄清。 - Jonathan Gray
@JonathanGray 我已经更新了我的代码，我没有img标签，我只有一个生成图像并将其存储在image.src中的函数。 - ameni
显示剩余3条评论
1个回答
12
问题在于，将HTML文件加载到cheerio（或任何其他节点模块）中不会像浏览器一样处理HTML。资源文件（例如样式表、图像和JavaScript）将无法像在浏览器中那样被加载和/或处理。
虽然node.js和现代Web浏览器都具有相同（或类似）的JavaScript引擎，但是浏览器添加了许多附加内容，例如window、DOM（document）等。Node.js没有这些概念，因此没有window.FileReader或document.createElement。
如果图像完全是在没有用户交互的情况下创建的（您的代码示例“神奇地”接收到 sBlob 参数，看起来像一个字符串，例如 data:<type>;<encoding>,<data>），您可以在服务器上使用所谓的无头浏览器，PhantomJS 是目前最受欢迎的选择。
另一方面，如果创建 sBlob 不需要任何用户交互，则最好使用纯 node.js 解决方案，例如 How do I parse a data URL in Node?。
如果需要某种形式的用户交互来创建 sBlob，并且您需要将其存储在服务器上，则可以使用几乎相同的解决方案，只需使用 Ajax 或 websocket 将 sBlob 发送到服务器，将 sBlob 处理为图像，然后（可选）返回查找图像的 URL。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接