Холст был испорчен данными перекрестного происхождения, и испорченные холсты не могут быть экспортированы

Содержание

1 Что такое испорченный холст?
2 Холст был испорчен данными перекрестного происхождения
3 Загрязненные полотна не могут быть вывезены
4 Возможные решения
- 4.1 Javascript
- 4.2 Серверная сторона

Эти ошибки случаются, когда вы пытаетесь манипулировать изображение на холсте, которое, кажется, не имеет законного разрешения для вашего кода.

Они связаны (и вызваны) Access-Control-Allow-Origin заголовок запроса (и разрешен сервером). Изображение из другого домена, поэтому такое поведение запрещено в большинстве браузеров, поскольку это будет брешей в безопасности.

Что такое испорченный холст?

Спецификация HTML вводит crossorigin атрибут для изображений, которые в сочетании с соответствующим CORS заголовок, позволяет изображения, определенные img элемент, загруженный из внешнего источника, который будет использоваться на холсте, как если бы он был загружен из текущего источника.

Увидеть Атрибуты настроек CORS для деталей о том, как crossorigin атрибут используется.

Хотя вы можете использовать изображения без одобрения CORS на вашем холсте, делать это заражает холст. После того, как холст был испорчен, вы больше не можете извлекать данные обратно из холста. Например, вы больше не можете использовать холст toBlob(), toDataURL(), или же getImageData() методы; Это приведет к ошибке безопасности.

Холст был испорчен данными перекрестного происхождения

Проанализируйте следующий код:

var canvas = document.getElementById("canvas");
function drawImageFromWebUrl(sourceurl){
var img = new Image();
img.addEventListener("load", function () {
// The image can be drawn from any source
canvas.getContext("2d").drawImage(img, 0, 0, img.width,    img.height, 0, 0, canvas.width, canvas.height);
// However the execution of any of the following methods will make your script fail
// if your image doesn't has the right permissions
canvas.getContext("2d").getImageData();
canvas.toDataURL();
canvas.toBlob();
});
img.setAttribute("src", sourceurl);
}
// But, this code is being executed from ourcodeworld and the image fcomes from google.
drawImageFromWebUrl("https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");

Если у вас есть эта проблема, ваш код может иметь некоторые общие методы, и изображение не приходит из вашего домена.

Загрязненные полотна не могут быть вывезены

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Вы найдете эту ошибку, если вы достаточно умны, чтобы думать:

Эй, если я могу получить данные испорченного холста из другого домена, давайте преобразуем их в строку base64, а затем перерисовать.

— Ты, Нобелевская премия философия — 2016

Но недостаточно умный, чтобы думать, что это действие тоже блокируется, так как изображение «не принадлежит тебе».

Возможные решения

Javascript

Вы можете предотвратить эту ошибку, просто установив в своем изображении атрибут crossorigin (с Javascript или HTML):


var image = new Image();
image.crossOrigin = "Anonymous";
...

Однако это будет работать только в том случае, если в ответе вашего сервера есть следующий заголовок:

Access-Control-Allow-Origin "*"

В противном случае вы получите новую ошибку:

Image from origin 'otherdomain.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'yourdomain.com' is therefore not allowed access.

Серверная сторона

Поскольку проблема заключается в том, что изображение не принадлежит вашему домену, вы можете создать прокси-сервер с языком вашего сервера (тот же метод, который используется для отображения содержимого http (небезопасного) в содержимом https (защищенного)).

Рабочий процесс (на языке вашего сервера, PHP, C # и т. Д.) Должен быть: