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ę?
javascript
html
canvas
cross-domain
pop850
źródło
źródło
Odpowiedzi:
W specyfikacji mówi:
Jeśli obraz pochodzi z innego serwera, nie sądzę, aby można było użyć toDataURL ()
źródło
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; };
źródło
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.
źródło
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:
Stwierdzono tutaj: http://www.w3.org/TR/cors/#use-cases
źródło
Wreszcie znalazłem rozwiązanie. Wystarczy dodać
crossOrigin
trzeci parametr wfromURL
funcfabric.Image.fromURL(imageUrl, function (image) { //your logic }, { crossOrigin: "Anonymous" });
źródło
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 ... = /
źródło
Udało mi się to zrobić, używając tego:
Napisz to w pierwszym wierszu
.htaccess
swojego serwera źródłowegoHeader 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');
źródło
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?
źródło
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.
źródło
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.
źródło