Paper.js: PNG export does not show SVG's gradient

[pwichmann]

Screenshot of SVG below:

Screenshot of PNG below:

(Exported as view.element.toBuffer();)

[pwichmann]

Is there anyone who could explain this bug?
Is this a problem with paper.js or with canvas?
Is there a way to prevent this and see gradients in the PNG export?

[De-nis]

A naive question: why not grabbing the image from the canvas itself?
I just needed to export to PNG a drawing with a radial gradient, used saveAs + Blob + canvas-toBlob as described here.
BTW, frequently mentioned approach with creating an anchor element and setting its href attribute to canvas.toDataURL("image/png").replace("image/png", "image/octet-stream") fails in many browsers as soon as the amount of the data returned by toDataURL() gets large.

[pwichmann]

Thank you, @De-nis !

In order to get something that is not immediately stored as a png file on the disk, I need an object that I can pass on to another function.
To achieve this, I use:

var buffer_object = view.element.toBuffer();

However, this buffer thing does not appear to store any colour gradients.

Do you know if the blob thing can be used to get an object - instead of writing the file onto the disk?

EDIT: It looks I need a buffer object to do the trick. But I lose colour gradient information this way.

[pwichmann]

Maybe it is because the canvas version paper.js uses is a bit old?

[De-nis]

Hello, canvasToBlob() returns a Blob object, which data represents the image contained in the canvas. One does not have to save it to disk and can do whatever else with it.
The same applies to toDataURL() - it returns a string (string is an object in JS), representing the image, one is free to do everything one may want with this data.
Canvas is the one provided by the browser, it is the same canvas for the code within paper.js or outside of it. BTW, to which API toBuffer() belongs? I could not find it in paperjs docs.

[pwichmann]

I must have read about toBuffer() somewhere in the paper.js forums. I then researched it and found it in the node-canvas documentation which is where I think it originates from:
https://github.com/Automattic/node-canvas#canvastobuffer

This is also where you could find the toDataURL():
https://github.com/Automattic/node-canvas#canvastodataurl-sync-and-async

I will check the latter again. This might not have the bug I am encountering...

Are you able to export colour gradients to PNG?

[pwichmann]

@lehni Any idea why my buffer object does not produce any colour gradients?

I am still using "paper": "^0.10.3" because I noticed at the time that [email protected] and [email protected] work together - but not the latest versions of each.

Node.js environment.

[De-nis]

I have no idea why toBuffer() does not grab your gradient. I even have no idea where toBuffer() comes from: I do not think it belongs to the standard API of HTML5 canvas and it does not seem to belong to paper.js.
There are at least two "standard" ways to grab the image from a canvas: toDataURL() and toBlob(), they should result in getting the same image as drawn on the canvas. Saving this data to a file is just an additional task (I've already mentioned an issue one can encounter using the frequently mentioned approach with using toDataURL() and href attribute of an anchor element, while the issue has nothing to do with getting data from a canvas).
I am able to save a radial gradient to a file (the colors of the image are nothing else than a radial gradient, visible only there, where paths exist), just go here and click on the "Save as PNG file". According JS can be seen as a part of the page source and is very simple. It just grabs the canvas content as an image and should work with a linear gradient or whatever else can be drawn on a canvas.

[pwichmann]

I even have no idea where toBuffer() comes from

Don't you think it comes from node-cavas? Which is a dependency of paper.js.

[De-nis]

I guess, since all contexts where I could find toBuffer() refer to node. I do not use node and I am not sure about it therefore.

[pwichmann]

@lehni I can close this.

An update of paper.js, and other dependencies solved my problem!