SECURITY_ERR: DOM Exception 18 при вызове метода toDataURL Canvas

Question

Я получаю следующую ошибку при попытке получить URL-адрес данных с холста, на котором создается изображение SVG в браузерах Internet Explorer и Safari, в то время как другие работают правильно ,

Кроме того, изображение SVG содержит некоторые элементы <image>, чьи атрибуты xlink:href установлены на изображения, считанные из файловой системы пользователя в виде URL-адресов данных. Поскольку эти изображения не расположены на разных доменах, я не мог придумать, почему эта ошибка возникает при попытке получить dataURL холста, на котором нарисовано изображение SVG. Заранее спасибо.

SECURITY_ERR: DOM Exception 18: Была сделана попытка прорвать политики безопасности пользовательского агента «

Answer 1

Я могу подтвердить эту проблему в Internet Explorer 11 с использованием тест, который я. сделал:
http://jsfiddle.net/tsbXW/

Это известное ограничение Internet Explorer, что Microsoft работает над:
https://connect.microsoft.com/IE/feedback/details/828416/cavas-todataurl-method-doesnt-work-after-draw-svg-file-to-canvas

Как показано в отчете об ошибке, any Изображение SVG, нарисованное в холсте, замалчивает холст, вызывая SecurityError, когда вызывается toDataURL().

Для этого стоит test case отчета об ошибке, который не работает в Safari 7.0.5 (хотя якобы Apple исправила проблему в Safari 8). Кроме того, тестовый пример не работает в Firefox до версии 11 из-за Bug 672013 - Allow SVG-as-an-image to be drawn into a canvas without marking it as write-only.

Answer 2

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

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

Если у вас есть текст SVG, canvg добавляет метод drawSvg, который работает так же, как drawImage. Пример:

var c = document.getElementById('canvas'); 
var ctx = c.getContext('2d'); 
ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);