Ich versuche, eine Webseite in eine einzige Datei zu konvertieren, indem ich alle Bilder (und andere externe Ressourcen, sobald ich diesen Punkt passiert habe) eingebettet habe. Hier ist, wie ich PhantomJS laufen:Die Verwendung von PhantomJS zum Einbetten aller Bilder einer Webseite erzeugt Warnungen, funktioniert aber
./phantomjs --web-security=false ./embed_images.js http://localhost/index.html > output.txt
Und hier ist die 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()
});
}
Wenn ich den genannten Befehl ausführen, kommt es zu einer Datei wie folgt aus:
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.
Es gibt mehrere Instanzen der obigen Fehlermeldung. Um zu testen, was falsch ist, lief ich den Code unten in der Konsole meines 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]);
}
Und es funktioniert gut (meine Webseite verweist keine Cross-Domain-Bilder)! Es wird alle Bilder in die HTML-Seite einbetten. Weiß jemand, was das Problem sein könnte?
Hier ist meine index.html Datei Inhalt:
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<img src="1.png" >
</body>
</html>
Und tatsächlichen Ausgang (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.
Das Merkwürdige ist, dass, während ich auf meiner Seite nur ein Bild haben, gibt es zahlreiche Fehlermeldungen!
Ich benutze phantomjs-1.9.8-linux-x86_64.
Vielleicht hat es etwas damit zu tun: http://StackOverflow.com/Q/26424765 –
Der Fehler gehört zu 'ToDataURL' Aufruf, wie es in dem Beitrag, den Sie erwähnt haben, darauf hingewiesen wird. Aber ich kann nicht sicher sein, ob sie die gleichen sind, da sie alle über SVGs sprechen und meine hat nur ein PNG-Bild. – Mehran
Was passiert, wenn Sie alles in den 'page.open' Callback in' setTimeout (function() {/ * HERE * /}, 2000) einfügen; '? –