Javascript 在node.js中将SVG代码转换为PNG数据URI

我想在服务器上将一个简单的动态svg片段转换为PNG数据URI。大概是这样的：

var svg = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>'

console.log('<img src="data:image/png;base64,'+toPng(svg, 100, 100)+'">')

var svg=''
console.log（“”）

---

我看到过使用imagemagick和一些phantomJS变体的示例，但我正在node.js中寻找动态解决方案，最好不使用I/O。

这里有一种方法可以使用：

步骤1：安装并安装：
（我在Ubuntu 14.04上，可以找到其他操作系统的说明。）

步骤2：安装Fabric.js：

sudo npm install fabric

步骤3：使用

节点运行以下JavaScript：

var fabric = require('fabric').fabric;
var canvas = new fabric.createCanvasForNode(100, 100);
var svgStr = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>';

fabric.loadSVGFromString(svgStr, function(objects, options) {
  var obj = new fabric.PathGroup(objects, options);
  canvas.add(obj);            
  console.log('<img src="' + canvas.toDataURL() + '" />');
});

var fabric=require（'fabric'）。fabric；
var canvas=newfabric.createCanvasForNode（100100）；
var svgStr=''；
fabric.loadSVGFromString（svgStr，函数（对象，选项）{
var obj=new fabric.PathGroup（对象、选项）；
canvas.add（obj）；
控制台日志（“”）；
});

结果:


（在节点v0.10.25上运行。）
看一看

它依靠引擎盖下进行转换

要在项目中使用svg到img，请运行：

npm install svg-to-img

下面介绍如何将
svg
转换为base64编码的
png
：

const svgToImg = require("svg-to-img");

(async () => {
  const svg = "<svg xmlns='http://www.w3.org/2000/svg'/>";
  const png = await svgToImg.from(svg).toPng({ encoding: "base64" });

  console.log("data:image/png;base64," + png);
})();

const svgToImg=require（“svg到img”）；
（异步（）=>{
const svg=“”；
const png=await svgToImg.from（svg）.toPng（{encoding:“base64”}）；
log（“数据：image/png；base64，”+png）；
})();

免责声明：我是svg到img的作者
 嘿，你可以查看这个，所以回答：如果不为非js库生成一个转换过程，这是不容易的。有可能将SVG动画渲染为图像序列吗？@AkshayKumar这个库目前不可能，但你可以尝试实现它
const svgToImg = require("svg-to-img");

(async () => {
  const svg = "<svg xmlns='http://www.w3.org/2000/svg'/>";
  const png = await svgToImg.from(svg).toPng({ encoding: "base64" });

  console.log("data:image/png;base64," + png);
})();