Я хочу преобразовать SVG в растровые изображения (например, JPEG, PNG и т.д.) через JavaScript.
Преобразование SVG в изображение (JPEG, PNG и т.д.) В браузере
Ответ 1
Вот как вы можете это сделать через JavaScript:
- Используйте библиотеку JavaScript canvg для рендеринга SVG-изображения с помощью Canvas: https://github.com/gabelerner/canvg
- Захват URI данных, закодированный как JPG (или PNG) с Canvas, в соответствии с этими инструкциями: Захват HTML-холста как gif/jpg/png/pdf?
Ответ 2
Решениеjbeard4 прекрасно работало.
Я использую Raphael SketchPad для создания SVG. Ссылка на файлы в шаге 1.
Для кнопки "Сохранить" (идентификатор svg - "редактор", id холста - "холст" ):
$("#editor_save").click(function() {
// the canvg call that takes the svg xml and converts it to a canvas
canvg('canvas', $("#editor").html());
// the canvas calls to output a png
var canvas = document.getElementById("canvas");
var img = canvas.toDataURL("image/png");
// do what you want with the base64, write to screen, post to server, etc...
});
Ответ 3
Это работает в большинстве браузеров:
function copyStylesInline(destinationNode, sourceNode) {
var containerElements = ["svg","g"];
for (var cd = 0; cd < destinationNode.childNodes.length; cd++) {
var child = destinationNode.childNodes[cd];
if (containerElements.indexOf(child.tagName) != -1) {
copyStylesInline(child, sourceNode.childNodes[cd]);
continue;
}
var style = sourceNode.childNodes[cd].currentStyle || window.getComputedStyle(sourceNode.childNodes[cd]);
if (style == "undefined" || style == null) continue;
for (var st = 0; st < style.length; st++){
child.style.setProperty(style[st], style.getPropertyValue(style[st]));
}
}
}
function triggerDownload (imgURI, fileName) {
var evt = new MouseEvent("click", {
view: window,
bubbles: false,
cancelable: true
});
var a = document.createElement("a");
a.setAttribute("download", fileName);
a.setAttribute("href", imgURI);
a.setAttribute("target", '_blank');
a.dispatchEvent(evt);
}
function downloadSvg(svg, fileName) {
var copy = svg.cloneNode(true);
copyStylesInline(copy, svg);
var canvas = document.createElement("canvas");
var bbox = svg.getBBox();
canvas.width = bbox.width;
canvas.height = bbox.height;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, bbox.width, bbox.height);
var data = (new XMLSerializer()).serializeToString(copy);
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svgBlob = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob)
{
var blob = canvas.msToBlob();
navigator.msSaveOrOpenBlob(blob, fileName);
}
else {
var imgURI = canvas
.toDataURL("image/png")
.replace("image/png", "image/octet-stream");
triggerDownload(imgURI, fileName);
}
document.removeChild(canvas);
};
img.src = url;
}
Ответ 4
Здесь серверное решение на основе PhantomJS. Вы можете использовать JSONP для совершения перекрестного вызова в службу изображений:
https://github.com/vidalab/banquo-server
Например:
Затем вы можете отображать изображение с помощью тега img:
<img src="data:image/png;base64, [base64 data]"/>
Он работает в браузере.
Ответ 5
изменить svg чтобы соответствовать вашему элементу
function svg2img(){
var svg = document.querySelector('svg');
var xml = new XMLSerializer().serializeToString(svg);
var svg64 = btoa(xml); //for utf8: btoa(unescape(encodeURIComponent(xml)))
var b64start = 'data:image/svg+xml;base64,';
var image64 = b64start + svg64;
return image64;
};svg2img()
Ответ 6
Недавно я обнаружил пару библиотек трассировки изображений для JavaScript, которые действительно способны создать приемлемое приближение к растровому изображению, как по размеру, так и по качеству. Я разрабатываю эту библиотеку JavaScript и CLI:
https://www.npmjs.com/package/svg-png-converter
Который предоставляет унифицированный API для всех них, поддерживает браузер и узел, не зависящий от DOM, и инструмент командной строки.
Для преобразования логотипов/мультфильмов/похожих изображений это отлично работает. Для фотографий/реализма требуется некоторая настройка, так как размер вывода может значительно возрасти.
У него есть игровая площадка, хотя сейчас я работаю над лучшей, более простой в использовании, поскольку было добавлено больше функций:
https://cancerberosgx.github.io/demos/svg-png-converter/playground/#
Ответ 7
Посмотрите на эту библиотеку, если вы используете nodejs
Ответ 8
Я написал этот класс ES6, который делает работу.
class SvgToPngConverter {
constructor() {
this._init = this._init.bind(this);
this._cleanUp = this._cleanUp.bind(this);
this.convertFromInput = this.convertFromInput.bind(this);
}
_init() {
this.canvas = document.createElement("canvas");
this.imgPreview = document.createElement("img");
this.imgPreview.style = "position: absolute; top: -9999px";
document.body.appendChild(this.imgPreview);
this.canvasCtx = this.canvas.getContext("2d");
}
_cleanUp() {
document.body.removeChild(this.imgPreview);
}
convertFromInput(input, callback) {
this._init();
let _this = this;
this.imgPreview.onload = function() {
const img = new Image();
_this.canvas.width = _this.imgPreview.clientWidth;
_this.canvas.height = _this.imgPreview.clientHeight;
img.crossOrigin = "anonymous";
img.src = _this.imgPreview.src;
img.onload = function() {
_this.canvasCtx.drawImage(img, 0, 0);
let imgData = _this.canvas.toDataURL("image/png");
if(typeof callback == "function"){
callback(imgData)
}
_this._cleanUp();
};
};
this.imgPreview.src = input;
}
}
Вот как вы это используете
let input = "https://restcountries.eu/data/afg.svg"
new SvgToPngConverter().convertFromInput(input, function(imgData){
// You now have your png data in base64 (imgData).
// Do what ever you wish with it here.
});
Если вам нужна ванильная версия JavaScript, вы можете зайти на сайт Babel и перенести туда код.
Ответ 9
Решение для конвертирования SVG в блоб URL и блоб URL в png изображение
const svg='<svg version="1.1" baseProfile="full" width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text></svg>'
svgToPng(svg,(imgData)=>{
const pngImage = document.createElement('img');
document.body.appendChild(pngImage);
pngImage.src=imgData;
});
function svgToPng(svg, callback) {
const url = getSvgUrl(svg);
svgUrlToPng(url, (imgData) => {
callback(imgData);
URL.revokeObjectURL(url);
});
}
function getSvgUrl(svg) {
return URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' }));
}
function svgUrlToPng(svgUrl, callback) {
const svgImage = document.createElement('img');
// imgPreview.style.position = 'absolute';
// imgPreview.style.top = '-9999px';
document.body.appendChild(svgImage);
svgImage.onload = function () {
const canvas = document.createElement('canvas');
canvas.width = svgImage.clientWidth;
canvas.height = svgImage.clientHeight;
const canvasCtx = canvas.getContext('2d');
canvasCtx.drawImage(svgImage, 0, 0);
const imgData = canvas.toDataURL('image/png');
callback(imgData);
// document.body.removeChild(imgPreview);
};
svgImage.src = svgUrl;
}Ответ 10
Если вы не имеете в виду программно, этот вопрос, вероятно, должен принадлежать superuser.com.
В любом случае, Batik SVG Toolkit может помочь, особенно SVG Rasterizer.