Растрирование SVG в холсте в холсте

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

Преобразование SVG файла в документе в URL-адрес данных
Загрузите его в <img>
Нарисуйте <img> на <canvas>
Преобразуйте этот <canvas> в URL-адрес данных PNG
Загрузите этот 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 указывают, что источник изображения, сгенерированный из данных: URL-адрес, найденный в другом документе или в script "должен быть таким же, как этот документ. Все данные в этом тесте взяты из того же документа.

Ответ 1

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

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

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

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