使用PhantomJS嵌入网页的所有图像会产生警告,但有效

Meh*_*ran 14 javascript embed phantomjs

我试图通过嵌入所有图像(以及我通过此点后的其他外部资源)将网页转换为单个文件.以下是我运行PhantomJs的方法:

./phantomjs --web-security=false ./embed_images.js http://localhost/index.html > output.txt
Run Code Online (Sandbox Code Playgroud)

这是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()
    });
}
Run Code Online (Sandbox Code Playgroud)

当我运行上面提到的命令时,它会生成如下文件:

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.
Run Code Online (Sandbox Code Playgroud)

上面的错误消息有多个实例.为了测试出了什么问题,我在Chromium的控制台中运行了以下代码:

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]);
}
Run Code Online (Sandbox Code Playgroud)

它工作得很好(我的网页没有引用任何跨域图像)!它会将所有图像嵌入到HTML页面中.有谁知道问题可能是什么?

这是我的index.html文件内容:

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
</head>

<body>
<img src="1.png" >
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

而实际输出(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.
Run Code Online (Sandbox Code Playgroud)

奇怪的是,虽然我的页面上只有一个图像,但有很多错误信息!

我正在使用phantomjs-1.9.8-linux-x86_64.

Art*_* B. 38

这些通知在phantom.exit被叫时打印出来.它们不会造成任何麻烦,但是当你需要干净的PhantomJS输出时它们并不好.在您的情况下,您可以通过"异步"来抑制通知,phantom.exit如下所示:

setTimeout(function(){
    phantom.exit();
}, 0);
Run Code Online (Sandbox Code Playgroud)

我认为发生这种情况的原因是因为幻像尝试退出时会从页面上下文传递一个大字符串.

我为此创建了一个github问题.