Растрирование документа SVG в Canvas

Question

Чтобы ответить на этот вопрос правильно, я подумал, что я бы:

1. Преобразование файла SVG в документе в URL-адрес данных
2. Загрузите его в <img>
3. Нарисуйте это <img> в <canvas>
4. Преобразование этого <canvas> в URL-адрес данных PNG
5. Загрузить этот URL-адрес данных в изображение.

У меня есть пример этой попытки здесь:
http://phrogz.net/SVG/svg_to_png.xhtml

В Firefox я получаю (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage] при попытке нарисовать изображение на холсте в шаге 3.

Почему я получаю эту ошибку в Firefox или как ее обойти?

В Chrome я получаю исключение SECURITY_ERR при попытке вызвать toDataURL() на шаге 4.

Почему я получаю эту ошибку в Chrome или как ее обойти?

В спецификации WhatWG указано, что origin для изображения, «сгенерированного из данных: URL-адрес, найденный в другом документе или в скрипте», должно быть таким же, как документ. Все данные в этом тесте взяты из одного документа.

Answer 1

В Firefox изображения SVG портят основу, но мы работаем над устранением этого ограничения в https://bugzilla.mozilla.org/show_bug.cgi?id=672013, когда эта ошибка приводит к тому, что вы пытаетесь сделать, должно быть возможно. Это ограничение было снято в FFv12.

Все браузеры реализуют аналогичные ограничения, и все работают над их устранением;как правило, делая то, что вы можете сделать в изображениях SVG, более ограниченным.Например, мы не хотим возвращаться к плохим старым временам, когда мы могли определить, какие сайты вы посещали, создав SVG-изображение со ссылками в нем, а затем считав цвет ссылок с помощью canvas.

Кроме того, в данный момент firefox требует, чтобы элемент svg имел атрибуты width и height для рендеринга на canvas.Это ограничение может быть снято в будущем.

Редактировать Phrogz: как отмечалось в моем комментарии выше, я получил независимое подтверждение того, что проблема безопасности в Chrome - это та же проблема: Chrome (в настоящее время) всегда портитхолст, когда к нему обращается документ SVG.