Я работаю над интерактивными интерфейсами SVG / AJAX, где элементы создаются и перемещаются пользователями «на лету». Я бы хотел, чтобы пользователи могли экспортировать свое текущее представление в PNG-изображение и / или документ SVG. Мне бы очень хотелось, чтобы документ SVG был как можно более простым (без большого количества вложенных преобразований). Есть ли какие-либо рамки, которые уже поддерживают это?
В настоящее время я прошу моих пользователей использовать технику Ctrl + Alt + PrntScrn, и я не хочу просить их установить какое-либо программное обеспечение / плагины.
Серверный код теперь реализован в PHP, если это помогает. Я уже реализовал возможность генерации PNG-изображения из «оригинального» документа (до того, как клиент внесет какие-либо изменения) с помощью ImageMagick.
Я предполагаю, что вам нужно это, чтобы работать только в браузерах, поддерживающих SVG.
Firefox, Safari и Opera предоставляют нестандартный API XMLSerializer , поэтому вы можете сделать что-то вроде этого:
var svg = document.getElementById('svg_root'); // or whatever you call it var serializer = new XMLSerializer(); var str = serializer.serializeToString(svg);
Оттуда вы можете отправить его на сервер и получить PNG в ответ.
Вот страница разработчика Mozilla по сериализации XML из DOM .
Opera имеет реализацию DOM → XML-сериализатора W3C . В режиме XML innerHTML возвращает хорошо сформированный XML в Gecko.
HTML5 <canvas> может экспортировать свое содержимое в виде PNG-файла, используя toDataURL() и можно рисовать любой элемент <img> на холсте с помощью drawImage() , поэтому должно быть возможно создать данные <img src="data:application/svg+xml,…"> , нарисуйте его на холсте и экспортируйте в качестве data: URL.