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

标签 javascript node.js svg png

我想在服务器上将一个简单的动态 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。

最佳答案

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

第 1 步:安装 Caironode-canvas :
(我使用的是 Ubuntu 14.04,其他操作系统的说明可以找到 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:

sudo npm install fabric

第 3 步:使用 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() + '" />');
});

结果:
(在 Node v0.10.25 上运行。)

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAHD0lEQVR4nO2dW2wVRRjHf6XSFgq1BUEoIiCXKih4jYmGxAR8MBa5RQloDD7wAA/og8EHfdAXEowm8oCGJxQviXhJjKkEUSgKeIkoohYLCCggt0JbwBah9vNhdnt2z57LbDl7dujOL/nSmZOzZ2e+/+52d+abb8FisVgsFovFYrFYLImmJO4GaDIAmAZMBCY5f8cCA4FKoBrVl26gHfgH6AAOAfsd2wfsATqL2/RwmCrINcB04AHH7gXKC/C7/wLfAo3AVmAH0FWA3+2TlAAzgfVAGyBFsFZnfzMx5OA0oRGlwALgOWBqpi+UAFOA24DJQJ1jg4AK1PXMpRO4CFwAmoHfgb2oa1UTSoUs7AZWARtQl77EUQo8gfJX4OgdBbIM5AOQUyBSADsJ8j7IUpDa7GdNE7DIaV9imI46aH3OqABZALIRpKtAImSzLpAGkMdAyjMLsxu4Pyb/FI3rgbdQl4SezteAvAByOmIRstkpkOdBqoOidAPrgGEx+StSZgNn8XS4GmQVyLmYhEi3dpCVINcGhWkB6mPzXIEZiLqT6elgKchykFYDRMhkZ5329QsKs5bC3H7HxgjUfX9PpyaANBrgdB3bAnJTUJTtwPC4HHolTAWO4enMcpAOAxwdxjpAlgRFOQzcHJdje8NdwEmcDpSDrDXAuVdir4OU+UU5AdwZo4+1uRs4h9PwQSBfGODQQtgmkEq/KO2og89YpuEZ9qgF+cUARxbSdoEMJ3AHNjlGn2dlFGp0VQAZ0gfFcG2P0z9SdhAYGaPvA5QDP+A0cCDITgMcF6Vtd/pJyr4DymLUwMdaSP0D32KAw4phXxIYdlkTqwoO8/A0arUBjiqmveoXpBs1IhEbI1FzCgLIfAMcVGzrBpnjF+UMaswuFt5zGzIepM0AB8VhrSDj/KKsj0OMh90GlIDsMMAxcdrXjh88ojxUTDH6oybjBJDHDXCICbbAL8hvqNiAorDE3fFQkBYDnGGCnSAwp7K4GGL0w3N2rDTAESbZSwTOkn5RC7LQ3eEwkAsGOMEka0fNgHpEeTSMc3uj3tNuYSkqSs2SogpY5v/omTDbhw0DugUVlcEA4CgwJOQPJIEWYDQqHMmhDhU5mZewZ8hTbmE+VoxsXAfM8X+0OIr9lOKZAdxkwPXaZGvw/x85SgRxXve5OxgBctmATptsl1A3PR5R7tFxcphL1gy3MIsiPvFcpfRHDWV4mJHxi2mEEWRmqF+2pPvpQZ1tdO+yKlFBbmUlqNn9qzIOpsgcB2pT1Yuo+6Cc61N0z5CpOLNhk7Bi6DISmJCqVqAC+HOiK0hPDNLtIRuVdNL8lTeWS1eQukDBokVdzmoQK0jERCXIaLcwIde3LAHS/HVjvu/rClLlFmpCNceSNrxUlflbKXQFGRwoWLQYnLMaxAoSMWEF0X0w7MIZHOspWLToQg2jZK4G0T1DOgMFixYdOatBdAU5HyhYtDifsxrEChIxkQvSFqo5llZ/tWCCHHILWhPDlh7S/HUw3/d1BWkOFCxaNOesBrGCREzkguwJ1RxLmr/yCqL7YFiGmjGsBDgC3BCuXYnkMDAuVT2PGtrKmTBN9wy5BOx0K40hG5ZUGv3V7WhkrwsT5LDNLXwVYqMksy1nNTNhBNnqFj7FJirMx2Wgwf/RFp3twgjyDc7zyAlgY4gNk0gDcDpV/QO1bDwvYQQR4F238naIDZNImn/egVzpHlPY6PcISIt+F9Rc+n6dbcNGv+9FZSygE1gdcuOk8Bq+pQg70RSjt8zFCSCuQmVfizuw2SQ7TSBj0Kwwzu3NCqpPcJ44zwFv9OIH+jJrUHnOHZoI3GxFw5OQyod1xIAj0wQ7BDLAf3YsLIYYoIZSmt0d23XqytLWqTdR5FUb0/Hk3/3MAIfEaWkrprqJKQmzzXWCurFJy3US22OazQYEMtsvRqzZgMDmy/KKEXu+LJdXIJW1+kMDHFUM20Ag+/WqWFXwYHMuwvcYlHMRbFZSo7KSuowD/sZpaDUqsVfcDiykbUY9DJOyv/CsnzGRpGW2virSjSch9/tx4I4YfRyaMXgSnQHyCMgZA5wbxlpA6v1CCCq6pzZrzw2mL74/ZAcxP/hdKaXAi8B/eDpWD/KnAU7PZIcznxVdTj/6zHol+w4qA7FvaTOUjO8xLAeZB/IxyMWIRegE+QhkLsl+j6GXnG/6rEFNfL0JcqxAIhwFWQeyKPPZ4Fqsb/o06V24K1Bv6MnIFOBWYDwqO8J4YCgqkUENKiypEzUX0IoaAz+AilA7APyKE7+UnZ+Al0nwu3AzMQaVhvZHsh/BhbRdzv7yprxIOiWop+AVwOeo5cSFEKAD2AQ8i6GZpky4ZOlQgXLgJGCiY2OBao+Vo+LT2lFrU9tQSzT2o5b67QN+xhfDZrFYLBaLxWKxWCyW/wE2/OPNbPdQBAAAAABJRU5ErkJggg==" />

<子> 特别感谢 this question对于 fabric.loadSVGFromString 示例。

关于javascript - 在 node.js 中将 SVG 代码转换为 PNG 数据 URI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31766732/

相关文章:

javascript - angularjs 表达式中的注释

javascript - 为什么 JavaScript 中的 IF 语句允许重新声明变量

javascript - 使用 jQuery 的 .data() 查看附加到元素的所有数据?

css - 如何在保持宽高比和可伸缩性的同时使用 SVG Sprite Sheet 作为 CSS 背景图像

输出到 OpenGL(交互式)和 SVG(用于打印)的 Java 库

javascript - 使用 javascript 加载 XUL 资源

javascript - 当我在 Node js 中创建后调用时,为什么 Watson-conversation 对任何请求返回相同的默认响应

node.js - Electron - IPC改变对象

javascript - Node.js:将多个路由集中到一个路由文件中

animation - 为什么这个 SVG 动画不起作用