Chcę zapisać moje płótno na obrazie. Mam tę funkcję:
function save() {
document.getElementById("canvasimg").style.border = "2px solid";
var dataURL = canvas.toDataURL();
document.getElementById("canvasimg").src = dataURL;
document.getElementById("canvasimg").style.display = "inline";
}
Daje mi błąd:
Uncaught SecurityError: Nie udało się wykonać polecenia „toDataURL” na „HTMLCanvasElement”: skażonych płócien nie można wyeksportować.
Co powinienem zrobić?
javascript
html5-canvas
użytkownik3465096
źródło
źródło
Odpowiedzi:
Ze względów bezpieczeństwa twój dysk lokalny jest zadeklarowany jako „inna domena” i zepsuje obszar roboczy.
(Jest tak, ponieważ Twoje najbardziej poufne informacje są prawdopodobnie przechowywane na dysku lokalnym!).
Podczas testowania wypróbuj następujące obejścia:
Umieść wszystkie pliki związane ze stroną (.html, .jpg, .js, .css itp.) Na pulpicie (nie w podfolderach).
Opublikuj swoje zdjęcia w witrynie, która obsługuje udostępnianie między domenami (np. Dropbox.com). Pamiętaj, aby umieścić swoje zdjęcia w folderze publicznym Dropbox, a także ustawić flagę cross origin podczas pobierania obrazu (var img = new Image (); img.crossOrigin = "anonimowy" ...)
Zainstaluj serwer WWW na swoim komputerze programistycznym (zarówno serwery sieci Web IIS, jak i PHP mają darmowe wersje, które działają dobrze na komputerze lokalnym).
źródło
W znaczniku img ustaw crossorigin na Anonimowy.
źródło
Jeśli ktoś wyświetli moją odpowiedź, być może w tym stanie:
1. Próbuję uzyskać zrzut ekranu mapy w obszarze roboczym przy użyciu openlayers (wersja> = 3)
2. I przeglądałem przykład eksportowania mapy
3. Używając ol.source.XYZ do renderowania warstwy mapy
Bingo!
Używanie ol.source.XYZ.crossOrigin = 'Anonimowy', aby rozwiązać problem. Lub podobny kod:
źródło
Jeśli używasz
ctx.drawImage()
funkcji, możesz wykonać następujące czynności:W oddzwanianiu możesz go teraz używać
ctx.drawImage
i eksportować za pomocątoDataURL
źródło
Tainted canvases may not be exported.
komunikat o błędzie.W moim przypadku rysowałem na płótnie tag z filmu. Aby rozwiązać problem skażonego płótna, musiałem zrobić dwie rzeczy:
źródło
Wygląda na to, że używasz obrazu z adresu URL, który nie ustawił prawidłowego nagłówka Access-Control-Allow-Origin i stąd problem. Możesz pobrać ten obraz z serwera i pobrać go z serwera, aby uniknąć problemów z CORS.
źródło
Rozwiązałem problem za pomocą
useCORS: true
opcjiźródło
Sprawdź [obraz włączony CORS] [1] z MDN. Zasadniczo musisz mieć serwer obsługujący obrazy z odpowiednim nagłówkiem Access-Control-Allow-Origin.
Będziesz mógł zapisać te obrazy w DOM Storage tak, jakby były dostarczone z Twojej domeny, w przeciwnym razie wystąpią problemy z bezpieczeństwem.
źródło
Podobnie jak kompilacja odpowiedzi @ markE - jeśli chcesz utworzyć serwer lokalny. Ten błąd nie wystąpi na serwerze lokalnym.
Jeśli masz zainstalowany PHP na swoim komputerze:
php -S localhost:3000
← Zwróć uwagę na duże „S”lub
Jeśli masz Node.js na swoim komputerze:
npm init -y
npm install live-server -g
lubsudo npm install live-server -g
na komputerze Maclive-server
i powinien automatycznie otworzyć nową kartę w przeglądarce z otwartą witryną.Uwaga: pamiętaj, aby mieć plik index.html w katalogu głównym folderu, w przeciwnym razie możesz mieć problemy.
źródło
Rozwiązałem również ten błąd, dodając
useCORS : true,
w kodzie mój kod, taki jak -źródło