IE выдает ошибку безопасности при вызове toDataUrl на холсте

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

но в моем случае я использую data: url как источник моего img, а затем используйте img и нарисуйте его на canvas, а затем вызовите canvas.toDataUrl.

это отлично работает на Chrome и Firefox, но с ошибкой безопасности в IE!

любая идея?

...
var svgxml = getxmlsvg();
img.onload = function(){
    canvas.drawImage(this, 0, 0);
    canvas.toDataURL("image/png"); // <--- security error
}
image.src = URL.createObjectURL(new Blob([svgxml], {type: "image/svg+xml;charset=utf-8" }))

Вот цитата из svgopen.org

Перенос данных из SVG в Canvas имеет проблемы с безопасностью, которые вызывают Холст станет только для записи. Мы утверждаем, что эти проблемы могут быть избегать нашего предложения SVG.toDataURL() (раздел "Рекомендации" ).

Политика происхождения и происхождения холста

Веб-страницы состоят из разных элементов, происхождение. Элементы, исходящие из одного и того же источника, считаются безопасный [Origin10].

Canvas обладает мощными возможностями чтения и записи изображений. Это быть тривиальным, чтобы использовать холст в качестве посредника для переноса локального изображения на стороннего пользователя, просто загружая изображение в элемент Canvas из файла:// -URL, а затем отправляет данные пикселя из элемента Canvas на любой хост с JavaScript.

Чтобы предотвратить утечку информации с помощью Canvas, браузеры тщательно защита использования Canvas, когда источник данных изображения не является безопасно. Все элементы холста создаются в качестве атрибута "исходный чистый" установите значение true. Когда любое из действий, которые потенциально могут быть использованы для использование элемента Canvas для передачи содержимого, которое нарушает одно и то же происхождение политики, свойство origin-clean постоянно установлено в false.

Если методы, возвращающие данные пикселя, хранящиеся в холсте, например toDataURL() или getImageData(), вызываются в элементе Canvas, origin-clean - false, тогда возникает DOMException 18 SECURITY_ERR [Canvas10].

Но я создаю SVG на лету в браузере.

Ответ 1

В моем случае я изменил графические элементы, которые составляют изображение из svg в png. При использовании svg, я вижу ошибку безопасности в IE 11 (и 10), а не в Chrome, когда я использую toDataURL. Построение графики с использованием элементов png, это хорошо.

Существует 2-я проблема с svgs, которая не изменяет размер в IE 11, так что другой удар по использованию svgs с IE.

Ответ 2

Существует библиотека, которая абстрагирует svg → canvas → png и добавляет метод элементу SVG, чтобы в любом браузере вы могли просто вызвать mySvg.toDataUrl() с обратным вызовом и опцией "canvg",

https://github.com/sampumon/SVG.toDataURL

В этой реализации учитываются исключения безопасности, поэтому вы можете пройти мимо ошибки разрешений, с которой вы сталкиваетесь.

<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script> 
<script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/canvg.js"></script> 
<script>
<script type="text/javascript" src="http://rawgit.com/sampumon/SVG.toDataURL/master/svg_todataurl.js"></script>

mySVGelement.toDataURL("image/png", {
  renderer: "canvg"
  callback: function(data) {
      image.src = data;
  }
});
</script>

Совместимость

Browser     E x p o r t i n g  f o r m a t
            SVG+XML  PNG/canvg  PNG/native
IE           9+       9+         -
Chrome       +        +          33+ ²
Safari       +        +          -
Firefox      +        +          11+ ¹
Opera        +        +          -