Иногда появляется необходимость сохранить svg в png средствами браузера. К сожалению, браузер не имеет волшебного api, который позволил бы это сделать без различных хаков. Что же делать, если все таки хочется добиться желаемого?
Первая идея, которая мне пришла в голову, сделать это через canvas, который имеет метод toDataURL("image/png");
Итак, я написал простенький скрипт: jsfiddle , github :
Var html = document.querySelector("svg").parentNode.innerHTML; var imgsrc = "data:image/svg+xml;base64," + btoa(html); var canvas = document.querySelector("canvas"), context = canvas.getContext("2d"); canvas.setAttribute("width", 526); canvas.setAttribute("height", 233); var image = new Image; image.src = imgsrc; image.onload = function () { context.drawImage(image, 0, 0); var canvasdata = canvas.toDataURL("image/png"); var a = document.createElement("a"); a.textContent = "save"; a.download = "export_" + Date.now() + ".png"; a.href = canvasdata; document.body.appendChild(a); canvas.parentNode.removeChild(canvas); };
Суть скрипта проста: я преобразовывал svg в dataUri, загружал его через image, рисовал картинку на canvas и превращал в png. Казалось, цель достигнута, и можно расслабится. Этот подход сработал в Firefox и Chrome, но открыв во всеми нами любимом браузере IE, я получил замечательную ошибку:
Дело в том, что IE считает, что картинка загружена с другого хоста. К сожалению, установить origin для dataUri не получится. Собственно, описание правил можно найти здесь: https://html.spec.whatwg.org/multipage/scripting.html#security-with-canvas-elements . Можно было, конечно, проксировать svg через сервер, и тогда все бы сработало, но хотелось чисто клиентское решение.
И тут я вспомнил про замечательную библиотеку canvg . С помощью этой библиотеки я рисую svg на canvas, а далее поступаю как в первом варианте: беру toDataURL("image/png") . Получился такой незамысловатый код: github :
Var svg = document.querySelector("svg"); var canvas = document.createElement("canvas"); canvas.height = svg.getAttribute("height"); canvas.width = svg.getAttribute("width"); canvg(canvas, svg.parentNode.innerHTML.trim()); var dataURL = canvas.toDataURL("image/png"); var data = atob(dataURL.substring("data:image/png;base64,".length)), asArray = new Uint8Array(data.length); for (var i = 0, len = data.length; i < len; ++i) { asArray[i] = data.charCodeAt(i); } var blob = new Blob(, {type: "image/png"}); saveAs(blob, "export_" + Date.now() + ".png");
Тут стоит сказать, что еще я использовал библиотеку FileSaver для вызова диалогового окна сохранения.
Вот и все, мы добились желаемого результата.
Стоит отметить один нюанс - я задался вопросом сохранения svg в png, когда писал плагин для экспорта tauCharts . Так как стили в svg задаются из внешнего файла, чтобы добиться максимально подобия с исходным svg, я вставляю inline style в svg. И получаем вот такой результат .
Надеюсь, статья окажется полезной для вас и сохранит ваше время.
When you convert from raster images like PNG to SVG or JPG to SVG , it will convert your forms and objects in black-and-white images in vector graphics that can be enlarged without loss of quality. Then you can paint them in any vector graphics editor such as Inkscape .
Conversion of ordinary pictures, most likely, won’t have the desired result.
For best results in convert to SVG, use image with solid background.
- To convert to SVG, select the file, wait for it to download on our server.
- Supports almost all image formats (PNG, JPG, BMP and other). File size is not limited, but the larger the file, the more time it will take to convert.
- After the conversion, you will see your original file and the result under it.
- Download the result via the link.
Why do you need the SVG format and how to use it? After convert PNG to SVG or JPG to SVG
SVG (Scalable Vector Graphics) is an XML-based vector graphics format
The advantage is that you can change the image size without losing the quality and details.
When you increase the size, the vector image preserves the shape of the curves, so the image can be displayed at any resolution.
Похоже, не работает очень хорошо. Вот пример, который использует флаг -flatten для convert:
Sudo apt-get install potrace imagemagick convert -flatten input.png output.ppm potrace -s output.ppm -o output.svg rm output.ppm
Еще одно интересное явление: вы можете использовать PPM (256 * 3 цвета, т. Е. RGB), PPM (256 цветов, то есть оттенки серого) или PPM (только 2 цвета, т. Е. Только белый или черный). Из моих ограниченных наблюдений казалось бы, что на изображениях, которые сглажены, PPM и PPM (которые, как я вижу, производят идентичные SVGs), сокращают цветную область, а PPM расширяет цветную область (хотя и немного). Предположительно, это разница между тестом pixel > (256 / 2) тестом pixel > 0 . Вы можете переключаться между ними, изменяя расширение файла, т. Е. следующее использование PPM :
Sudo apt-get install potrace imagemagick convert -flatten input.png output.pbm potrace -s output.pbm -o output.svg rm output.pbm
Как преобразовать PNG-изображение в SVG?
Тем не менее это не идеально.
Png - это стиль растрового изображения, а SVG - векторный графический дизайн, который поддерживает растровые изображения, поэтому он не будет преобразовывать изображение в векторы, а просто изображение, встроенное в векторный формат. Вы можете сделать это, используя http://www.inkscape.org/ который является бесплатным. Он будет внедрять его, однако он также имеет движок Live Trace, который будет пытаться преобразовать его в пути, если вы хотите (используя potrace). См. Прямую трассировку в adobe illustrator (commericial) является примером:
Если вы находитесь в какой-то системе Linux, imagemagick идеально подходит. Т.е.
Convert somefile.png somefile.svg
Это работает с кучами разных форматов.
Однако для других носителей, таких как видео и аудио (ffmpeg), я знаю, что вы четко указали png на svg; Это все еще связано с медиа.
Ffmpeg -i somefile.mp3 somefile.ogg
Просто подскажите, хотите ли вы пройти через множество файлов; цикл с использованием основных трюков оболочки.
For f in *.jpg; do convert $f ${f%jpg}png; done
Это удаляет jpg и добавляет png, который сообщает конвертировать то, что вы хотите.
Существует веб-сайт, на котором вы можете загрузить свое изображение и посмотреть результат.
Но если вы хотите скачать svg-образ, вам необходимо зарегистрироваться. (Если вы зарегистрируетесь, вы получите 2 изображения бесплатно)
с adobe illustrator:
Откройте Adobe Illustrator. Нажмите «Файл» и выберите «Открыть», чтобы загрузить файл.PNG в программу. Извлеките изображение по мере необходимости, прежде чем сохранять его как.SVG-файл. Нажмите «Файл» и выберите «Сохранить как». Создайте новое имя файла или используйте существующее имя. Убедитесь, что выбранный тип файла - SVG. Выберите каталог и нажмите «Сохранить», чтобы сохранить файл.
я предпочитаю ИИ, потому что вы можете внести любые изменения
Я предполагаю, что вы хотите написать программное обеспечение для этого. Чтобы сделать это наивно, вы просто найдете линии и установите векторы. Чтобы сделать это разумно, вы пытаетесь приспособить фигуры к чертежу (подгонка модели). Кроме того, вы должны попытаться определить растровые области (регионы, которые вы не можете моделировать с помощью shames или применения текстур. Я бы не стал рекомендовать идти по этому маршруту, так как это займет довольно много времени и потребует немного знаний о графике и компьютерном видении. Тем не менее, выход будет значительно и масштабироваться намного лучше, чем ваш исходный результат.