Difference between data, encode and toBuffer

[TomasHubelbauer]

Hi, can you please clarify the difference between the three titular methods? They all return Buffer.

data returns raw pixels according to a comment in the TypeScript types, what format are the raw data in? RGBA/ARGB/BGRA or a different one altogether?

I see both encode and toBuffer support WebP, JPEG, PNG and AVIF so I wonder what the difference is or whether they are just aliases of one another? I see the examples in the readme use encode.

Thank you!

[rambo-panda]

my personal understanding is that both encode and toBuffer return a Buffer of the specified image encoding (image format), while data returns the canvas pixel informationraw pixels.
encode is performed as an asynchronous operation using libuv's thread pool, whereas toBuffer is a synchronous operation

raw pixels: output to be raw, uncompressed pixel data. pixel ordering is left-to-right, top-to-bottom, without padding
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData

[TomasHubelbauer]

I didn't notice toBuffer was synchronous! Seems like the difference between toBuffer and encode is clear now. Thank you!

I was wondering whether data on the canvas itself was an alias of CanvasRenderingContext2D.getImageData. I would still like this to get clarifier, so I'll leave the ticket open a little bit longer until the maintainers can confirm this or I am able to test it by comparing the Buffers you get from canvas.data and from CanvasRenderingContext2D.getImageData.

[TomasHubelbauer]

I made some checks and it seems getImageData is always RGBA.
I noticed that createContext as well as getImageData have an extra settings object where color space can be specified, but not pixel format. I guess internally it is just always RGBA.

I checked data and it has the same exact format.

Interestingly, context.getImageData(0, 0, context.canvas.width, context.canvas.height).data.buffer !== canvas.data().buffer.