Saving PNGs with paperjs in Node

[Niall Henn]

Hi There,

I've been struggling so thought I'd just check in to see if anyone has had similar issues.

I'm building a kind-of image generating server in node to repeatedly create images in the background (then potentially upload them somewhere.)

This is my first time using paperJs with Node, and I'm trying to adapt the node/svgexport example to save a PNG instead of an SVG.
The problem is every approach I know to save PNGs relies on saving the canvas, and (if I understand correctly) the canvas in the node examples is fairly virtual, which I can't find.
Hence calling 'toDataUrl' or any of the blog methods returns an undefined error...

Does anyone have any advice or things I could look at here?

I'd really appreciate it any help.
Thanks loads in advance.

Niall

[Adam Hoyle]

Hi Niall,

90% of my usage of PaperJS is running as a nodejs process that generates bitmaps, and the method below is the technique I use.

(note - presumes that the file is always saved to a folder called ‘img’ which sits next to the script being run, and that the filename being passed in doesn’t have it’s suffix.

I’ve also included a JPEG method as you might want that too - the different outputs have slightly different renderings to them, so worth trying both to see which you prefer.

There could well be a better way of doing it, but this method has worked for me for a few projects.

Oh, and note that you’ll need to call ‘draw’ at least once, otherwise the canvas is empty - e.g. paper.view.draw()

function saveCanvasToPNGFile(filename, callback)

{

    filename += ".png";

    var fullpath = __dirname + '/img/'+filename;

    // Saving the canvas to a file.

    out = fs.createWriteStream(fullpath);

    stream = paper.view.element.pngStream();

    stream.on('data', function(chunk) {

        out.write(chunk);

    });

    stream.on('end', function() {

        console.log('saved png '+filename);

        callback( fullpath, filename );

    });

    

}

function saveCanvasToJPGFile(filename, callback)

{

    filename += ".jpg";

    var fullpath = __dirname + '/img/'+filename;

    // Saving the canvas to a file.

    out = fs.createWriteStream(fullpath);

    stream = paper.view.element.jpegStream({quality: 100});

    stream.on('data', function(chunk) {

        out.write(chunk);

    });

    stream.on('end', function() {

        console.log('saved jpeg '+filename);

        callback( fullpath, filename );

    });

    

}

Hope that helps!

Adam

--
You received this message because you are subscribed to the Google Groups "Paper.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Niall Henn]

Ah, that works perfectly.
Thanks so much Adam!