Блог

Главная - Вопросы по программированию - Холст Internet Explorer.Ошибка безопасности toDataURL

Холст Internet Explorer.Ошибка безопасности toDataURL

#javascript #internet-explorer #canvas #todataurl

#javascript #internet-explorer #холст #todataurl

Вопрос:

Я запускаю следующий код в Internet Explorer, он выдает SecurityError в строке var canvasDataUrl = canvas.toDataURL(); 

 var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
var img = new Image;
img.onload = function(){
  canvasContext.drawImage(img,0,0);
  var canvasDataUrl = canvas.toDataURL(); // error occurs here
  console.log(canvasDataUrl);
};
img.src = 'https://via.placeholder.com/300x300';

В чем причина этой ошибки и как я могу это исправить?

Комментарии:

1. Обычно это означает, что изображение не является чистым . Что не должно влиять на разные браузеры.

2. Вы действительно пытаетесь загрузить изображение по этому точному URL? Как сказано в предыдущем комментарии, это не должно работать ни в одном браузере, а если и работает, то это серьезная ошибка безопасности. Если вы пытаетесь нарисовать другое изображение, что это за изображение? Может быть, изображение SVG?

3. Я поддерживаю комментарии выше. Я протестировал ваш код, и он не может работать ни в IE, ни в Chrome. SecurityError означает, что растровое изображение холста не является чистым источником; по крайней мере, часть его содержимого была или могла быть загружена с сайта, отличного от того, с которого был загружен сам документ. Я предполагаю, что src изображения в вашем фрагменте кода является виртуальным. Если возможно, вы можете предоставить реальный src изображения, чтобы мы могли провести тест. Кроме того, приведенный ниже ответ может хорошо работать в IE, вы также можете попробовать.

Ответ №1:

можете ли вы попробовать crossOrigin 

 var img = new Image();
img.crossOrigin = "anonymous";
  

 var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
var image = new Image();
image.crossOrigin = "anonymous"; 
image.onload = function (event) {
    try {
        canvasContext.drawImage(image, 0, 0, 200, 200);
        console.log(canvas.toDataURL());        
    } catch (e) {
        console.log(e);
    }
};
image.src = "https://i.chzbgr.com/maxW500/1691290368/h07F7F378/"

Ответ №2:

Ответ от @pc_coder правильный, и я хочу предоставить некоторую информацию об этой ошибке, которую вы можете увидеть здесь https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

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

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

Если источником внешнего содержимого является элемент HTML или SVG, попытка извлечения содержимого canvas не допускается.

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

Вызов любого из следующих действий на испорченном canvas приведет к ошибке:

  • Вызов getImageData() в контексте холста
  • Вызов toBlob() для самого элемента
  • Вызов toDataURL() на холсте

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