Я хочу конвертировать SVG в растровые изображения (например, JPEG, PNG и т. Д.) Через JavaScript.
javascript
svg
Zain
источник
источник
Ответы:
Вот как вы можете сделать это через JavaScript:
источник
toImage()
иdownload()
для автоматически загружаемого изображения.Решение jbeard4 работало прекрасно.
Я использую Raphael SketchPad для создания SVG. Ссылка на файлы в шаге 1.
Для кнопки Сохранить (идентификатор svg - «редактор», идентификатор canvas - «холст»):
источник
<svg>...</svg
но функция jquery html () не добавляет тег svg, поэтому этот код работает для меня, но мне нужно было отредактировать canvg вживуюcanvg('canvas', '<svg>'+$("#editor").html()+'</svg>');
$(selector).html()
родителю вашего элемента svg , он будет работатьhtml()
над оболочками или вручную создавать родительскийsvg
тег - который может даже иметь атрибуты, которые вы пропускаете при этом хаке. Просто использование$(svg_elem)[0].outerHTML
дает вам полный источник SVG и его содержимое. Просто говорю ...Кажется, это работает в большинстве браузеров:
источник
.msToBlob()
Решение для преобразования SVG в блоб URL и блоб URL в png изображение
источник
Я написал этот класс ES6, который делает работу.
Вот как вы это используете
Если вам нужна ванильная версия JavaScript, вы можете зайти на сайт Babel и перенести туда код.
источник
Вот решение на стороне сервера, основанное на PhantomJS. Вы можете использовать JSONP для выполнения междоменного вызова к сервису изображений:
https://github.com/vidalab/banquo-server
Например:
Http: // [HOST] /api/https%3A%2F%2Fvida.io%2Fdocuments%2FWgBMc4zDWF7YpqXGR/viewport_width=980&viewport_height=900&delay=5000&selector=%23canvas
Затем вы можете отобразить изображение с тегом img:
Это работает через браузер.
источник
изменить
svg
в соответствии с вашим элементомисточник
Uncaught TypeError: Failed to execute 'serializeToString' on 'XMLSerializer': parameter 1 is not of type 'Node'.
Svg
чтобыpng
можно преобразовать в зависимости от условий:svg
есть в формате SVG (строка) пути :new Path2D()
и установить вsvg
качестве параметраcanvas.toDataURL()
какsrc
.пример:
Обратите внимание, что
Path2D
не поддерживаетсяie
и частично поддерживается в ребре. Polyfill решает это: https://github.com/nilzona/path2d-polyfillsvg
блоб и рисуйте на холсте, используя.drawImage()
:Хорошее описание: http://ramblings.mcpher.com/Home/excelquirks/gassnips/svgtopng
Обратите внимание, что в ie вы получите исключение на этапе canvas.toDataURL (); Это связано с тем, что IE имеет слишком высокие ограничения безопасности и обрабатывает холст как только для чтения после рисования изображения. Все остальные браузеры ограничивают, только если изображение перекрестного происхождения.
canvg
библиотеку JavaScript. Это отдельная библиотека, но имеет полезные функции.Подобно:
источник
Недавно я обнаружил пару библиотек трассировки изображений для JavaScript, которые действительно способны создать приемлемое приближение к растровому изображению, как по размеру, так и по качеству. Я разрабатываю эту библиотеку JavaScript и CLI:
https://www.npmjs.com/package/svg-png-converter
Который предоставляет унифицированный API для всех них, поддерживает браузер и узел, не зависящий от DOM, и инструмент командной строки.
Для преобразования логотипов / мультфильмов / похожих изображений это отлично работает. Для фотографий / реализма требуется некоторая подстройка, поскольку размер вывода может значительно возрасти.
У него есть игровая площадка, хотя сейчас я работаю над лучшей, более простой в использовании, поскольку было добавлено больше функций:
https://cancerberosgx.github.io/demos/svg-png-converter/playground/#
источник