Warum verursacht canvas.toDataURL() eine Sicherheitsausnahme?

Question

Habe ich nicht genug Schlaf oder was? Dieser folgende Code

var frame=document.getElementById("viewer"); 
frame.width=100; 
frame.height=100; 

var ctx=frame.getContext("2d"); 
var img=new Image(); 
img.src="http://www.ansearch.com/images/interface/item/small/image.png" 

img.onload=function() { 
    // draw image 
    ctx.drawImage(img, 0, 0) 

    // Here's where the error happens: 
    window.open(frame.toDataURL("image/png")); 
} 

wirft diesen Fehler:

SECURITY_ERR: DOM Exception 18 

Es gibt keine Möglichkeit, dies sollte nicht funktionieren! Kann mir das bitte erklären?

Answer 1

Im specs heißt es:

Whenever the toDataURL() method of a canvas element whose origin-clean flag is set to false is called, the method must raise a SECURITY_ERR exception.

Wenn das Bild von einem anderen Server kommt Ich glaube nicht, Sie toDataURL verwenden können()

Answer 2

Sie können keine Leerzeichen in Ihrer ID setzen

aktualisieren

Meine Vermutung ist, dass Bild ist auf einem anderen Server als dem Sie das Skript sind ausführen. Ich konnte Ihren Fehler bei der Ausführung auf meiner eigenen Seite kopieren, aber es funktionierte in dem Moment, in dem ich ein Bild verwendete, das auf der gleichen Domain gehostet wurde. Also ist es sicherheitsbezogen - setze das Bild auf deine Seite. Wer weiß warum das so ist?

Answer 3

scheint es eine Möglichkeit, das zu verhindern, wenn Bild Hosting der Lage, die folgenden HTTP-Header für die Bildressourcen und Browser zur Verfügung zu stellen unterstützt CORS:

access-control-allow-origin: * 
access-control-allow-credentials: true

Es sei hier erwähnt wird: http://www.w3.org/TR/cors/#use-cases

Answer 4

Wenn das Image auf einem Host gehostet wird, der Access-Control-Allow-Origin oder Access-Control-Allow-Credentials festlegt, können Sie die Cross-Origin-Ressourcenfreigabe (CORS) verwenden. See here (the crossorigin attribute) for more details.

Ihre andere Option besteht darin, dass Ihr Server über einen Endpunkt verfügt, der ein Image abruft und bereitstellt. (z. B. http://your_host/endpoint?url=URL) Der Nachteil dieses Ansatzes ist Latenz und theoretisch unnötiges Abrufen.

Wenn es alternative Lösungen gibt, wäre ich daran interessiert, von ihnen zu hören.

Answer 5

Einstellung Quer Herkunft Attribut auf den Bildobjekten gearbeitet für mich (ich war mit fabricjs)

var c = document.createElement("img"); 
    c.onload=function(){ 
     // add the image to canvas or whatnot 
     c=c.onload=null 
    }; 
    c.setAttribute('crossOrigin','anonymous'); 
    c.src='http://google.com/cat.png'; 

Für die Verwendung fabricjs hier, wie Image.fromUrl

// patch fabric for cross domain image jazz 
fabric.Image.fromURL=function(d,f,e){ 
    var c=fabric.document.createElement("img"); 
    c.onload=function(){ 
     if(f){f(new fabric.Image(c,e))} 
     c=c.onload=null 
    }; 
    c.setAttribute('crossOrigin','anonymous'); 
    c.src=d; 
}; 

Answer 6

ich hatte patchen das gleiche Problem und alle Bilder sind in der gleichen Domäne gehostet ... Also, wenn jemand das gleiche Problem hat, hier ist, wie ich gelöst:

Ich hatte zwei Tasten: eine zu erzeugen die Leinwand und eine andere, um das Bild von der Leinwand zu erzeugen. Es hat nur für mich funktioniert, und tut mir leid, dass ich nicht weiß warum, als ich den ganzen Code auf der ersten Taste geschrieben habe. Also, wenn ich es anklicke, erzeuge die Leinwand und das Bild zur gleichen Zeit ...

Ich habe immer dieses Sicherheitsproblem, wenn die Codes auf verschiedenen Funktionen waren ...=/

Answer 7

Wenn Sie nur einige Bilder auf einer Leinwand zeichnen, stellen Sie sicher, dass Sie die Bilder aus derselben Domäne laden.

www.example.com unterscheidet sich example.com

So stellen Sie sicher, dass Ihre Bilder und die URL in der Adressleiste haben die gleichen sind, www oder nicht.

Answer 8

konnte ich es, dies mit machen arbeiten:

schreiben diese auf erste Zeile Ihres .htaccess auf Ihrem Quellserver

Header add Access-Control-Allow-Origin "*" 

Dann, wenn ein <img> Element zu schaffen, tun Sie es wie folgt:

// jQuery 
var img = $('<img src="http://your_server/img.png" crossOrigin="anonymous">')[0] 

// or pure 
var img = document.createElement('img'); 
img.src='http://your_server/img.png'; 
img.setAttribute('crossOrigin','anonymous'); 

Answer 9

Endlich fand ich die Lösung. Nur müssen die crossOrigin als dritte param in fromURL func hinzufügen

fabric.Image.fromURL(imageUrl, function (image) { 
      //your logic 
    }, { crossOrigin: "Anonymous" }); 

Answer 10

ich fabric.js bin mit und könnte dies lösen, indem toDatalessJSON statt toDataURL mit:

canvas.toDatalessJSON({ format: 'jpeg' }).objects[0].src 

Edit: Nevermind. Dies führt dazu, dass nur das Hintergrundbild in JPG exportiert wird, ohne dass die Zeichnung oben angezeigt wird, so dass es schließlich nicht ganz nützlich ist.