Dlaczego canvas.toDataURL () zgłasza wyjątek bezpieczeństwa?

Nie spałem wystarczająco dużo, czy co? Poniższy kod

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"));
}

zgłasza ten błąd:

SECURITY_ERR: DOM Exception 18

Nie ma mowy, żeby to nie zadziałało! Czy ktoś może to wyjaśnić, proszę?

W specyfikacji mówi:

Za każdym razem, gdy wywoływana jest metoda toDataURL () elementu kanwy, którego flaga origin-clean jest ustawiona na false, metoda ta musi zgłosić wyjątek SECURITY_ERR.

Jeśli obraz pochodzi z innego serwera, nie sądzę, aby można było użyć toDataURL ()

Ustawienie atrybutu cross origin na obiektach obrazu działało dla mnie (używałem 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';

Dla tych, którzy używają fabricjs, oto jak załatać 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;
};

Jeśli obraz jest hostowany na hoście, który ustawia Access-Control-Allow-Origin lub Access-Control-Allow-Credentials, możesz użyć Cross Origin Resource Sharing (CORS). Zobacz tutaj (atrybut crossorigin), aby uzyskać więcej informacji.

Inną opcją jest posiadanie przez serwer punktu końcowego, który pobiera i wyświetla obraz. (np. http: // your_host / endpoint? url = URL ) Wadą tego podejścia jest opóźnienie i teoretycznie niepotrzebne pobieranie.

Jeśli istnieje więcej alternatywnych rozwiązań, byłbym zainteresowany o nich.

Wydaje się, że istnieje sposób, aby temu zapobiec, jeśli hosting obrazów umożliwia udostępnienie następujących nagłówków HTTP dla zasobów obrazu i przeglądarki obsługuje mechanizm CORS:

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

Stwierdzono tutaj: http://www.w3.org/TR/cors/#use-cases

Wreszcie znalazłem rozwiązanie. Wystarczy dodać crossOrigintrzeci parametr w fromURLfunc

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

Miałem ten sam problem i wszystkie obrazy są hostowane w tej samej domenie ... Więc jeśli ktoś ma ten sam problem, oto jak rozwiązałem:

Miałem dwa przyciski: jeden do generowania płótna i drugi do generowania obrazu z płótna. To zadziałało tylko dla mnie i przepraszam, że nie wiem dlaczego, kiedy napisałem cały kod na pierwszym przycisku. Kiedy klikam, generuje płótno i obraz w tym samym czasie ...

Zawsze mam ten problem z bezpieczeństwem, gdy kody były na różnych funkcjach ... = /

Udało mi się to zrobić, używając tego:

Napisz to w pierwszym wierszu .htaccessswojego serwera źródłowego

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

Następnie podczas tworzenia <img>elementu wykonaj następujące czynności:

// 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');

Nie możesz umieszczać spacji w swoim ID

Aktualizacja

Domyślam się, że obraz znajduje się na innym serwerze niż ten, na którym wykonujesz skrypt. Udało mi się zduplikować Twój błąd podczas uruchamiania go na mojej własnej stronie, ale działało dobrze, gdy użyłem obrazu hostowanego w tej samej domenie. Jest to więc związane z bezpieczeństwem - umieść obraz na swojej stronie. Czy ktoś wie, dlaczego tak jest?

Jeśli po prostu rysujesz obrazy na płótnie, upewnij się, że ładujesz obrazy z tej samej domeny.

www.example.com różni się od example.com

Upewnij się więc, że Twoje obrazy i adres URL, który masz w pasku adresu, są takie same, www lub nie.

Używam fabric.js i mogę rozwiązać ten problem, używając toDatalessJSON zamiast toDataURL:

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

Edycja: nieważne. Powoduje to, że tylko obraz tła jest eksportowany do JPG, bez rysunku na górze, więc nie był on do końca przydatny.