如何使用Node.js访问DOM？

Question

如何使用Node.js访问DOM？

ame*_*eni 3 javascript jquery node.js jsdom cheerio

我有一个editor.html包含generatePNG功能:

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

Run Code Online (Sandbox Code Playgroud)

我想访问DOM并image.src使用Node.js. 我发现我可以使用cheerio或jsdom.

我从这开始:

var cheerio = require('cheerio'),
    $ = cheerio.load('editor.html');

Run Code Online (Sandbox Code Playgroud)

但我找不到如何访问和获取image.src.

Answer 1

Rog*_*ker 5

问题是,通过将html文件加载到cheerio(或任何其他节点模块)中,将不会像浏览器那样处理HTML.资产(例如样式表,图像和javascripts)将不会像在浏览器中那样加载和/或处理.

虽然node.js和现代webbrowsers都有相同(或类似)的javascript引擎,但是浏览器添加了很多额外的东西,比如window,DOM(document)等.Node.js没有这些概念,所以没有window.FileReader也不是document.createElement.

如果图像完全是在没有用户交互的情况下创建的(你的代码示例'神奇地'接收sBlob到类似于字符串的参数data:<type>;<encoding>,<data>),你可以在服务器上使用所谓的无头浏览器,PhantomJS最近似乎最受欢迎.然后,如果创建时不需要用户交互sBlob,那么最好使用纯node.js解决方案,例如如何在Node中解析数据URL？.

如果创建sBlob它需要某种用户交互,并且您需要将它存储在服务器上,您可以使用几乎相同的解决方案,只需sBlob使用Ajax或websocket将服务器发送到服务器,处理sBlob成一个图像和(可选)返回URL查找图像的位置.

归档时间：	10 年，1 月前
查看次数：	8576 次
最近记录：	10 年，1 月前