使用纯 JavaScript 在服务器上将 SVG 渲染为 PNG答案

【问题标题】：Render SVG to PNG on the server with pure JavaScript使用纯 JavaScript 在服务器上将 SVG 渲染为 PNG
【发布时间】：2011-12-17 11:48:44
【问题描述】：

标题说明了这一点。我知道 Imagemagick 可以做到这一点，但让我们假设我在只允许我使用 JavaScript 的云服务器上 (coughnodestercough)。实际上，这并不是一件坏事。

最近听说javascript中有h.264的渲染器，所以png是不是很牵强？

【问题讨论】：

【解决方案1】：

PNG 渲染器并不牵强，事实上它已经存在：http://devongovett.github.com/png.js/

这里的问题是你需要一个“假画布”实现，它不绘制任何东西，只是构建一个像素数组，然后可以保存到 PNG。没有这样的东西，因为除了这种情况外，它有点没用......

即：svg -> 位图渲染器（假画布）-> rgb 数组 -> png 文件

一些托管服务提供商允许您声明系统级依赖项，或者提供一些可用的默认值。 gm 可以很好地用于此目的：

gm = require('gm')

gm('image.svg').write('image.png', function(err){
  if (!err) console.log('image converted.')
})

您显然可以在http://no.de 机器上安装 imagemagick/graphicsmagick，dotcloud 也有可用的 IM。问问nodester的人，他们很可能有可用的图形库。

【讨论】：

有假的节点画布模块。
@thejh 可用的画布库在这个意义上不是“假的”。它们都依赖外部图形库来渲染画布。我的意思是你需要一个用 JS 编写的 2d 渲染器。
npm 包 sharp 现在这样做了 - 可能已经晚了 10 年：P 它仍然使用外部非 JS 库来使其工作，但它会为您安装它们。 99% 的时间这应该足够了

【解决方案2】：

不幸的是，JavaScript 中可用的所有高级呈现都是通过 HTML5 画布的浏览器实现。 NodeJS 缺少这些功能。

NodeJS 有一些扩展程序可以让您进行图像处理，但只有在您的主机安装了它们时才能使用这些扩展程序。

【讨论】：

将 svg 发送给客户端，使用他们的<canvas> 到 png，然后将 png 用于游戏反动画，这是一个好主意吗？
如果客户端已经可以渲染 SVG 并且有一个画布元素，为什么要将它转换为 PNG？知道您要做什么会有所帮助。为游戏动画调用服务器听起来很慢。
我想这样做：我的播放器可以从 SVG-Prefabs 创建一个角色。然后，这是我的想法，当播放器完成后，服务器将获取参数，组装预制件并将其转换为缓存在数据库中的完整 PNG。我想这样做是因为 Pixel 图像的绘制速度比 SVG 快。我希望玩家的<canvas> 上最多有 20 个不同的。
@Scán 如果您只想优化性能，那么您的第一条评论中的想法可以正常工作：使用 fabric.js 或类似的东西在画布中渲染 SVG，保存位图数据（在内存中，不需要 png）并将其用于动画。一定要彻底测试它，SVG 中的某些东西更快，特别是在 iOS 上。您应该对这篇文章感兴趣：html5rocks.com/en/tutorials/canvas/performance

【解决方案3】：

有 svg2png，它使用无头浏览器将 svgs 渲染为 png。

【讨论】：