在node.js中将SVG代码转换为PNG数据URI [英] Convert SVG code into PNG data URI in node.js

查看:696
本文介绍了在node.js中将SVG代码转换为PNG数据URI的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想在服务器上将简单的动态svg代码段转换为PNG数据URI.像这样:

I’d like to convert a simple dynamic svg snippet into a PNG data URI on the server. Something like this:

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.

I’ve seen examples using imagemagick and some phantomJS variants, but I’m looking for an on-the-fly dynamic solution in node.js, preferably without I/O.

推荐答案

这是使用 Fabric.js 的一种方法a>:

Here's a way to do it using Fabric.js:

步骤1:安装开罗此处.)

Step 1: Install Cairo and node-canvas:
(I'm on Ubuntu 14.04, instructions for other OSes can be found here.)

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:

Step 2: Install Fabric.js:

sudo npm install fabric

第3步:使用node运行以下JavaScript:

Step 3: Run the following JavaScript with node:

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() + '" />');
});

结果:
(在节点v0.10.25上运行.)

Result:
(Ran on node v0.10.25.)

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

特别感谢此问题作为fabric.loadSVGFromString示例.

Special thanks to this question for the fabric.loadSVGFromString example.

这篇关于在node.js中将SVG代码转换为PNG数据URI的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆