我想通过JavaScript将SVG转换为位图图像（如JPEG，PNG等）。
答案 0 :(得分：226)
以下是通过JavaScript实现的方法：
答案 1 :(得分：42)
jbeard4解决方案非常出色。
我正在使用Raphael SketchPad来创建SVG。链接到步骤1中的文件。
对于Save按钮（svg的id是“editor”，canvas的id是“canvas”）：
$("#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...
});
答案 2 :(得分：9)
这似乎适用于大多数浏览器：
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;
}
答案 3 :(得分：2)
这是基于PhantomJS的服务器端解决方案。您可以使用JSONP对图像服务进行跨域调用：
https://github.com/vidalab/banquo-server
例如：
然后你可以用img标签显示图像：
<img src="data:image/png;base64, [base64 data]"/>
它适用于浏览器。
答案 4 :(得分：1)
更改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()
答案 5 :(得分：1)
将SVG转换为blob URL并将blob 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;
}
答案 6 :(得分：1)
这里的功能无需库即可工作，并返回承诺：
/**
* converts a base64 encoded data url SVG image to a PNG image
* @param originalBase64 data url of svg image
* @param width target width in pixel of PNG image
* @return {Promise<String>} resolves to png data url of the image
*/
function base64SvgToBase64Png (originalBase64, width) {
return new Promise(resolve => {
let img = document.createElement('img');
img.onload = function () {
document.body.appendChild(img);
let canvas = document.createElement("canvas");
let ratio = (img.clientWidth / img.clientHeight) || 1;
document.body.removeChild(img);
canvas.width = width;
canvas.height = width / ratio;
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
try {
let data = canvas.toDataURL('image/png');
resolve(data);
} catch (e) {
resolve(null);
}
};
img.src = originalBase64;
});
}
在Firefox上有一个issue for SVGs without set width / height。
请参阅此working example，其中包括针对Firefox问题的修复程序。
答案 7 :(得分：1)
有多种方法可以使用 Canvg 库将 SVG 转换为 PNG。
就我而言，我需要从内联 SVG 中获取 PNG blob。
库文档提供了一个 example（参见 OffscreenCanvas 示例）。
但是这种方法目前在 Firefox 中不起作用。是的，您可以在设置中启用 gfx.offscreencanvas.enabled 选项。但是网站上的每个用户都会这样做吗？ :)
但是，还有另一种方式也适用于 Firefox。
<style type="text/css">
.btn-primary { background: ; }
</style>
最后一行感谢 this 的回答
答案 8 :(得分：0)
我最近发现了几个用于JavaScript的图像跟踪库，它们确实能够为大小和质量的位图建立可接受的近似值。我正在开发此JavaScript库和CLI：
https://www.npmjs.com/package/svg-png-converter
为所有这些提供统一的API，支持浏览器和节点（不取决于DOM）和命令行工具。
对于转换徽标/卡通/类似图像，它表现出色。对于照片/真实感，需要进行一些调整，因为输出大小可能会很大。
它有一个游乐场，尽管现在我正在开发一个更好，更易于使用的游乐场，因为增加了更多功能：
https://cancerberosgx.github.io/demos/svg-png-converter/playground/#
答案 9 :(得分：0)
我写了这个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版本，可以head over to Babel website并在那里编译代码。
答案 10 :(得分：0)
Svg转换为png：
svg的格式为SVG (string) paths：
new Path2D()并将svg设置为参数canvas.toDataURL()用作src。示例：
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
let svgText = 'M10 10 h 80 v 80 h -80 Z';
let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
ctx.stroke(p);
let url = canvas.toDataURL();
const img = new Image();
img.src = url;
请注意，Path2D不支持ie，而Edge则部分支持svg。 Polyfill解决了以下问题：
https://github.com/nilzona/path2d-polyfill
.drawImage() blob，然后使用canvg在画布上绘制：
好的描述： http://ramblings.mcpher.com/Home/excelquirks/gassnips/svgtopng
请注意，在ie中，您将在canvas.toDataURL（）阶段获得异常；这是因为IE的安全性限制过高，并且在此处绘制图像后将画布视为只读。所有其他浏览器都仅在图像是跨原点的情况下进行限制。
ctx.drawSvg(rawSvg);
var dataURL = canvas.toDataURL();
JavaScript库。它是单独的库，但具有有用的功能。赞：
for