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

12
我想在服务器上将一个简单的动态 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)+'">')

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


嘿,你可以查看这个SO答案:https://dev59.com/3G865IYBdhLWcg3wHK3u - Daemedeor
这并不容易,因为对于非 JS 库进行转换而不生成进程是很困难的。 - Onur Yıldırım
2个回答

14

以下是使用Fabric.js的方法:

步骤1:安装Caironode-canvas
(我在Ubuntu 14.04上,其他操作系统的说明可以在这里找到。)

sudo apt-get update
sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
sudo npm install canvas

步骤2:安装Fabric.js:

sudo npm install fabric

第三步:使用node运行以下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() + '" />');
});

Result:
(Ran on node v0.10.25.)

<img src="data:image/png;base64,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" />

特别感谢这个问题fabric.loadSVGFromString提供了示例。


2

请看svg-to-img

它在底层使用headless Chrome完成转换。

要在您的项目中使用svg-to-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);
})();

Disclaimer: I'm the author of svg-to-img.


能否将SVG动画渲染成图像序列? - Akshay Kumar
@AkshayKumar 目前这个库还不支持,但你可以尝试自己实现。 - Etienne Martin

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接