toile.toDataURL () SecurityError
Donc j'utilise google maps et j'obtiens l'image donc ça ressemble à ceci
<img id="staticMap"
src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false">
Je dois le sauver. J'ai trouvé ceci:
function getBase64FromImageUrl(URL) {
var img = new Image();
img.src = URL;
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");
alert(dataURL.replace(/^data:image/(png|jpg);base64,/, ""));
};
}
, Mais je reçois ce problème:
Uncaught SecurityError: échec de l'exécution de 'toDataURL ' sur' HTMLCanvasElement': les toiles tainted ne peuvent pas être exportées.
J'ai cherché des correctifs. J'ai trouvé un exemple ici Comment utiliser CORS mais je ne peux toujours pas lier ces 2 morceaux de code ensemble pour le faire fonctionner. Peut être que je le fais le mauvaise façon et il y a un moyen plus simple de le faire? J'essaie d'enregistrer cette image afin que je puisse transférer les données sur mon serveur. Alors peut-être que quelqu'un a fait quelque chose comme ça et sait comment faire fonctionner .toDataURL() comme j'en ai besoin?
6 réponses
À moins que google ne serve cette image avec l'en-tête Access-Control-Allow-Origin correct, vous ne pourrez pas utiliser leur image dans canvas. Cela est dû au fait que vous n'avez pas l'approbation CORS. Vous pouvez en savoir plus à ce sujet ici, mais cela signifie essentiellement:
Bien que vous puissiez utiliser des images sans approbation CORS dans votre canevas, faire de l'atteinte de la toile. Une fois qu'une toile a été souillée, vous ne pouvez pas plus tirer les données hors de la toile. Par exemple, vous ne pouvez plus utiliser la toile toBlob(), toDataURL (), ou getImageData() méthodes; cela lancera une erreur de sécurité.
Cela protège les utilisateurs contre l'exposition de données privées à l'aide d'images pour extraire des informations de sites Web distants sans autorisation.
Je suggère simplement de passer l'URL à votre langue côté serveur et d'utiliser curl pour télécharger l'image. Attention à assainir cette même si!
Modifier:
Comme cette réponse est toujours la réponse acceptée, vous devriez vérifier la réponse de@shadyshrif , qui consiste à utiliser:
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;
Cela ne fonctionnera que si vous avez les autorisations correctes, mais vous permettra au moins de faire ce que vous voulez.
Suffit d'utiliser la crossOrigin attribut et passer 'anonymous' comme deuxième paramètre
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;
Essayez le code ci-dessous ...
<img crossOrigin="anonymous"
id="imgpicture"
fall-back="images/penang realty,Apartment,house,condominium,terrace house,semi d,detached,
bungalow,high end luxury properties,landed properties,gated guarded house.png"
ng-src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
height="220"
width="200"
class="watermark">
Cette méthode vous empêchera d'obtenir une erreur' Access-Control-Allow-Origin ' du serveur auquel vous accédez.
var img = new Image();
var timestamp = new Date().getTime();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url + '?' + timestamp;
Dans mon cas, j'utilisais le contrôle WebBrowser (forçant IE 11) et je ne pouvais pas dépasser l'erreur. Passer à CefSharp qui utilise Chrome l'a résolu pour moi.
En utilisant fabric JS Nous pouvons résoudre ce problème d'erreur de sécurité dans IE.
function getBase64FromImageUrl(URL) {
var canvas = new fabric.Canvas('c');
var img = new Image();
img.onload = function() {
var canvas1 = document.createElement("canvas");
canvas1.width = this.width;
canvas1.height = this.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(this, 0, 0);
var dataURL = canvas.toDataURL({format: "png"});
};
img.src = URL;
}