How do I convert SVG with image links to PNG/JPEG? - svg

Question

I'm using fabric.js to add and manipulate images on canvas element. I'd like to export the final result to an image file (JPEG/PNG), and have tried several approaches, without much luck.
The first was using the HTML5 canvas.toDataURL callback - didn't work (apparently this cannot be done with cross-origin images).
I then tried to export the canvas to SVG and use convert utility:
$ convert file.svg file.png
The SVG looks a bit like this:
<svg>
...
<image xlink:href="http://example.com/images/image.png"
style="stroke: none; stroke-width: 1; stroke-dasharray: ; fill: rgb(0,0,0); opacity: 1;"
transform="translate(-160 -247.5)" width="320" height="495">
</image>
...
</svg>
That also didn't work, presumably because of the image links. I then tried to download the linked image and store it locally, replacing the http://...image.png link with /path/to/image.png. No luck.
Is there a way to make this happen? thanks.
UPDATE
I've since solved this by using fabric's node module (npm install fabric) and simply using fabric's JSON representation of the canvas (canvas.toJSON() in fabric) to generate an image (also uses canvas module - npm install canvas).
Here's a simple example on how to do this:
// import the fabric module
var fabric = require('fabric').fabric,
fs = require('fs');
// read the fabric json data as string
// (from file, db, etc)
var jsonString = readJSON(filepath);
// create canvas with specified dimensions
// (change to match your needs)
canvas = fabric.createCanvasForNode(100, 100);
// create output file to hold the png image
output = fs.createWriteStream("/tmp/image.png")
// load the json to the canvas and
// pipe the output to the png file
canvas.loadFromJSON(jsonString, function() {
var stream = canvas.createPNGStream();
stream.pipe(output)
});