17

The title says it. I know Imagemagick can do that, but let us assume I am on a cloud server that will only allow me JavaScript (coughnodestercough). Which is not a bad thing, actually.

Recently I heard that there are h.264 renderers in javascript, so png is not that far fetched?

Lanbo
  • 15,118
  • 16
  • 70
  • 147
  • not sure if it helps but Canvas can generate PNGs. Not sure how nice SVG and Canvas play together, though. – DA. Oct 28 '11 at 17:55
  • You could use a project like [CanVG](http://code.google.com/p/canvg/) to render SVG on a canvas, and then convert to PNG from there. – George Oct 28 '11 at 18:21
  • I would even use the svg in the canvas directly, but I am afraid that is way to inefficient. – Lanbo Oct 28 '11 at 19:16

3 Answers3

12

A PNG renderer is not far fetched, in fact it already exists: http://devongovett.github.com/png.js/

The problem here is that you would need a "fake canvas" implementation that doesn't draw anything, just builds a pixel array, that could then be saved to a PNG. There is nothing like that 'cause it's kind of useless except for this case...

i.e.: svg -> bitmap renderer (fake canvas) -> rgb array -> png file

Some hosting providers will allow you to declare system-level dependencies, or have some defaults available. gm would work fine for this purpose:

gm = require('gm')

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

You can apparently install imagemagick/graphicsmagick on a http://no.de machine, and dotcloud also has IM available. Ask the guys at nodester, it's very likely that they have a graphics library available.

Ricardo Tomasi
  • 34,573
  • 2
  • 55
  • 66
  • 1
    There are fake canvas modules for node. – thejh Oct 29 '11 at 16:53
  • 1
    @thejh the available canvas libraries are not "fake" in that sense. They all rely on an external graphics library to render the canvas. What I mean is that you need a 2d renderer written in JS. – Ricardo Tomasi Nov 01 '11 at 00:40
  • The npm package `sharp` does this now - probably 10 years too late :P it still uses external non-JS libraries to make it work, but it installs them for you. 99% of the time this should be enough – tbjgolden Jul 31 '20 at 02:18
2

Unfortunately, all of the advanced rendering available in JavaScript is through browser implementations of the HTML5 canvas. NodeJS lacks these features.

There are extensions for NodeJS that let you do image manipulation, but you can only use those if your host installs them.

Brian Nickel
  • 26,890
  • 5
  • 80
  • 110
  • Would it me a good idea to send the svg to the client, use their `` to a png, and then use the png for the game antimations? – Lanbo Oct 28 '11 at 20:50
  • If the client can already render SVG and has a canvas element why would you be converting it to a PNG? It would help to know what you're trying to do. Making server calls for game animations sounds really slow. – Brian Nickel Oct 28 '11 at 21:28
  • I want to do this: My player can create a character from SVG-Prefabs. Then, that was my idea, when the player is done, the server will take the parameter, assemble the prefabs and turn it into a full PNG that is cached in the Database. I want to do this because a Pixel image will draw faster than the SVGs. I expect up to 20 different of them on a player's `` at once. – Lanbo Oct 28 '11 at 22:17
  • 2
    @Scán if you just want to optimize performance, the idea in your first comment would work fine: use fabric.js or something similar to render the SVG in a canvas, save the bitmap data (in memory, no need for a png) and use it for the animations. Be sure to test it thorougly, some things are faster in SVG, specially on iOS. This article should interest you: http://www.html5rocks.com/en/tutorials/canvas/performance/ – Ricardo Tomasi Nov 01 '11 at 00:42
-4

There's svg2png, which uses a headless browser to render svgs to png.

https://github.com/domenic/svg2png

https://www.npmjs.com/package/svg2png

gherkins
  • 14,603
  • 6
  • 44
  • 70