wake-up-neo.com

canvas.toDataURL () SecurityError

Also benutze ich Google Maps und bekomme das Bild, so dass es so aussieht

<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">

Ich muss es retten. Ich habe das gefunden:

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,/, ""));

    };
}

Aber ich bekomme dieses Problem:

Nicht abgerufener SecurityError: 'toDataURL' für 'HTMLCanvasElement' konnte nicht ausgeführt werden: befleckte Canvases werden möglicherweise nicht exportiert. 

Ich habe nach Fixes gesucht. Ich habe hier ein Beispiel gefunden Wie benutze ich CORS , aber ich kann diese beiden Code-Teile trotzdem nicht binden, damit es funktioniert. Vielleicht mache ich es falsch, und es gibt einen einfacheren Weg, es zu tun? Ich versuche, dieses Bild zu speichern, damit ich die Daten auf meinen Server übertragen kann. Also hat vielleicht jemand so etwas gemacht und weiß, wie man .toDataURL() arbeitet, wie ich es brauche?

66
user3074343

Wenn Google dieses Bild nicht mit dem korrekten Access-Control-Allow-Origin-Header bereitstellt, können Sie das Bild nicht in der Leinwand verwenden. Dies liegt daran, dass keine CORS-Genehmigung vorliegt. Sie können mehr über dieses hier lesen, aber es bedeutet im Wesentlichen:

Obwohl Sie Bilder ohne CORS-Genehmigung in Ihrer Leinwand verwenden können, ist Dadurch wird die Leinwand verdunkelt. Wenn eine Leinwand beschädigt ist, können Sie keine länger ziehen Sie Daten aus der Leinwand zurück. Zum Beispiel können Sie keine Verwenden Sie länger die Zeichenfläche für Blob (), ToDataURL () oder getImageData () Methoden; Andernfalls wird ein Sicherheitsfehler ausgegeben.

Dies schützt Benutzer davor, dass private Daten mithilfe von Bildern verfügbar gemacht werden Informationen von entfernten Websites ohne Erlaubnis abzurufen.

Ich schlage vor, die URL einfach an Ihre serverseitige Sprache zu übergeben und das Bild mit curl herunterzuladen. Seien Sie vorsichtig, um dies zu sanieren!

EDIT:

Da diese Antwort immer noch die akzeptierte Antwort ist, sollten Sie die Antwort - @ shadyshrif überprüfen, die Folgendes verwendet:

var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;

Dies funktioniert only, wenn Sie die richtigen Berechtigungen haben, aber Sie können zumindest das tun, was Sie möchten.

87
Prisoner

Verwenden Sie einfach das Attribut crossOrigin und übergeben Sie 'anonymous' als zweiten Parameter

var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;
52
shady sherif

Diese Methode verhindert, dass Sie von dem Server, auf den Sie zugreifen, eine Fehlermeldung "Access-Control-Allow-Origin" erhalten.

var img = new Image();
var timestamp = new Date().getTime();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url + '?' + timestamp;
4
Karuban

Probieren Sie den folgenden Code aus ...

<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">
3
ct.tan

In meinem Fall verwendete ich das WebBrowser-Steuerelement (erzwang IE 11) und konnte den Fehler nicht umgehen. Der Wechsel zu CefSharp, das Chrome verwendet, hat es für mich gelöst.

0
Brad Mathews