toDataURL jeter Uncaught exception de Sécurité
J'ai deux Set de Code pour le test html5 canvas
Set 1 - fonctionne parfaitement
<img id="preview" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG">
<canvas id="myCanvas"/>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("preview");
ctx.drawImage(img, 10, 10);
alert(c.toDataURL());
Set 2 - Montrer l'erreur d'exception (non Interceptée SecurityError: Échec de l'exécution de 'toDataURL' sur 'HTMLCanvasElement': tainted toiles ne peuvent pas être exportées. )
<img id="preview1" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG">
function getBase64() {
var img = new Image();
img = document.getElementById("preview1");
var canvas = document.createElement("canvas");
canvas.width =img.width;
canvas.height =img.width;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png"); //This line of code will throw exception
alert( dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
}
Je n'ai aucune idée pourquoi, dans l'Ensemble 1 toDataURL
n'est pas jeter de l'exception où toDataURL
va jeter l'exception et les deux utilisent le même ensemble de l'image.La différence est dans le premier set, j'ai coder en dur la toile en HTML , et le second je le créer à l'aide de javascript.
Mon objectif pour l'Ensemble 2 code pour obtenir 64 de la base de coder de l'image.
- ` toile.largeur =img.largeur de la toile.hauteur =img.largeur;` ?
Vous devez vous connecter pour publier un commentaire.
C'est une question de la SCRO - Gravatar envoie le bon en-têtes, vous avez juste besoin de mettre le bon attribut:
Noter que votre premier exemple également échoué quand je l'ai testé, juste comme il se doit.
Vous pouvez simplement utiliser crossOrigin Attribut.