Using PhantomJs to embed all images of a webapge

Vote count:

0

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 > index.html

And here's the 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 (index in imgs) {
                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.

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 (index in imgs) {
    embedImg(imgs[index]);
}

And it works just fine! It will embed all the images into the HTML page. Does anyone know what might the problem be?

asked 26 secs ago

Mehran

2,177

Using PhantomJs to embed all images of a webapge