我有一个包含 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>
我想访问 DOM 并使用 Node.js 获取 image.src。我发现我可以使用 cheerio 或 jsdom。
我从这个开始:
var cheerio = require('cheerio'),
$ = cheerio.load('editor.html');
但是我没有找到如何访问和获取image.src。
最佳答案
问题是通过将 html 文件加载到 cheerio(或任何其他 Node 模块)将不会像浏览器那样处理 HTML。 Assets (如样式表、图像和 javascript)将不会像在浏览器中那样被加载和/或处理。
虽然 node.js 和现代网络浏览器都具有相同(或相似)的 javascript 引擎，但是浏览器添加了很多额外的东西，例如 window 、 DOM ( document ) 等。
Node.js 没有这些概念，所以没有 window.FileReader 也没有 document.createElement 。
如果图像是完全在没有用户交互的情况下创建的(你的代码示例“神奇地”接收到 sBlob 参数，它看起来是一个类似于 data:<type>;<encoding>,<data> 的字符串)你可以在服务器上使用所谓的 headless 浏览器，PhantomJS 似乎最近最流行.
再一次，如果创建 sBlob 不需要用户交互，你可能最好使用纯 node.js 解决方案，例如How do I parse a data URL in Node? 。
如果创建 sBlob 需要某种用户交互，并且您需要将其存储在服务器上，您可以使用与上述几乎相同的解决方案，只需使用 Ajax 或 websocket 将 sBlob 发送到服务器，将 sBlob 处理成图像并(可选)返回查找图像的 URL。
关于javascript - 如何使用 Node.js 解析 HTML/XML 文档？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34309557/