使用PhantomJS嵌入网页的所有图像会产生警告，但有效 [英] Using PhantomJS to embed all images of a webpage produces warnings but works
问题描述
我试图通过嵌入所有图像（以及我通过此点后的其他外部资源）将网页转换为单个文件。以下是我运行PhantomJs的方法：
I'm trying to convert a webpage into a single file by embedding all the images (and other external resources once I passed this point). Here's how I run PhantomJs:
./phantomjs --web-security=false ./embed_images.js http://localhost/index.html > output.txt
这里是 embed_images.js ：
var page = require('webpage').create(),
system = require('system'),
address;
if (system.args.length === 1) {
console.log('Usage: embed_images.js <some URL>');
phantom.exit(1);
}
else {
page.onConsoleMessage = function(msg) {
console.log(msg);
};
address = system.args[1];
page.open(address, function(status) {
page.evaluate(function() {
function embedImg(org) {
var img = new Image();
img.src = org.src;
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0);
var dataURL = canvas.toDataURL("image/png");
org.src = dataURL;
console.log(dataURL);
}
}
var imgs = document.getElementsByTagName("img");
for (var index=0; index < imgs.length; index++) {
embedImg(imgs[index]);
}
});
phantom.exit()
});
}
当我运行上述命令时，会产生如下文件：
When I run the mentioned command, it results in a file like this:
Unsafe JavaScript attempt to access frame with URL from frame with URL file://./embed_images.js. Domains, protocols and ports must match.
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match.
上述错误消息有多个实例。为了测试什么是错误，我在Chromium的控制台中运行了以下代码：
There's multiple instances of the above error message. To test what's wrong, I ran the below code in my Chromium's console:
function embedImg(org) {
var img = new Image();
img.src = org.src;
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0);
var dataURL = canvas.toDataURL("image/png");
org.src = dataURL;
console.log(dataURL);
}
}
var imgs = document.getElementsByTagName("img");
for (var index=0; index < imgs.length; index++) {
embedImg(imgs[index]);
}
它运作正常（我的网页不引用任何跨域）图片）！它会将所有图像嵌入到HTML页面中。有谁知道问题可能是什么？
And it works just fine (my webpage doesn't reference any cross-domain images)! It will embed all the images into the HTML page. Does anyone know what might the problem be?
这是我的 index.html 文件的内容：
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<img src="1.png" >
</body>
</html>
实际输出（ output.txt ） ：
Unsafe JavaScript attempt to access frame with URL from frame with URL file://./embed_images.js. Domains, protocols and ports must match.
Unsafe JavaScript attempt to access frame with URL from frame with URL file://./embed_images.js. Domains, protocols and ports must match.
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match.
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match.
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match.
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match.
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match.
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match.
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match.
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match.
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match.
奇怪的是，虽然我的页面上只有一个图像，但是有很多错误消息！
The strange thing is that while I've got just one image on my page, there are numerous error messages!
我正在使用 phantomjs-1.9.8-linux-x86_64 。
推荐答案
调用 phantom.exit 时会打印这些通知。它们不会造成任何麻烦，但是当你需要干净的PhantomJS输出时它们并不好。在您的情况下，您可以通过异步 phantom.exit 来抑制通知，如下所示：
Those notices are printed when phantom.exit is called. They don't cause any trouble, but are not nice when you need a clean PhantomJS output. In your case you can suppress the notices by "asynchronizing" phantom.exit like this:
setTimeout(function(){
phantom.exit();
}, 0);
我认为发生这种情况的原因是因为当幻像尝试时从页面上下文传递一个大字符串退出。
I think the reason this is happening is because a large string is passed from the page context when phantom tries to exit.
我创建了一个 github问题这个。
这篇关于使用PhantomJS嵌入网页的所有图像会产生警告，但有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
