Sto provando a convertire una pagina Web in un singolo file incorporando tutte le immagini (e altre risorse esterne una volta passato questo punto). Ecco come ho eseguito PhantomJs:Utilizzo di PhantomJS per incorporare tutte le immagini di una pagina Web produce avvisi ma funziona
./phantomjs --web-security=false ./embed_images.js http://localhost/index.html > output.txt
Ed ecco il 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()
});
}
Quando faccio funzionare l'ordine accennato, si traduce in un file in questo modo:
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.
Non c'è più istanze del precedente messaggio di errore. Per provare ciò che è sbagliato, ho eseguito il codice qui sotto nella console di mio Cromo:
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]);
}
e funziona bene (mia pagina web non fa riferimento le immagini cross-domain)! Incorporerà tutte le immagini nella pagina HTML. Qualcuno sa quale potrebbe essere il problema?
Ecco il contenuto mia index.html del file:
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<img src="1.png" >
</body>
</html>
E uscita effettiva (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.
La cosa strana è che mentre io ho una sola immagine nella mia pagina, ci sono numerosi messaggi di errore!
Sto usando phantomjs-1.9.8-linux-x86_64.
Forse ha qualcosa a che fare con questo: http://stackoverflow.com/q/26424765 –
L'errore appartiene alla chiamata 'toDataURL' come viene indicato nel post che hai menzionato. Ma non posso essere sicuro che siano uguali visto che tutti parlano di SVG e il mio ha solo un'immagine PNG. – Mehran
Cosa succede se si avvolge tutto nella callback 'page.open' in' setTimeout (function() {/ * HERE * /}, 2000); '? –