How to get pixels from ImageBitmap?

[xBZZZZ]

My current code is like:

const img=await createImageBitmap(new Blob([Deno.readFileSync("myimage.png")]))
const width=img.width
const height=img.height
//rgba is Uint8Array
const rgba=img[Object.getOwnPropertySymbols(img).find(sym=>"[[bitmapData]]"===sym.description)]
//only works if 4 bytes per pixel
const num_colors=new Set(new Int32Array(rgba.buffer,rgba.byteOffset,width*height)).size
console.log("%dx%d image has %d colors",width,height,num_colors)

But Symbol("[[bitmapData]]") is undocumented and probably isn't part of stable API.

Also img[Object.getOwnPropertySymbols(img).find(sym=>"[[bitmapData]]"===sym.description)] format depends on file format:

• PNG — not same with all PNGs
• JPEG — 3 bytes per pixel (rgb)

Is there stable API for getting pixels from ImageBitmap?

[marvinhagemeister]

There is nothing in the html spec that allows you to retrieve the pixels of an ImageBitmap instance. There is an open issue about this missing feature in the spec here whatwg/html#4785

[Hajime-san]

As marvin pointed out, createImageBitmap does not expose an API to access the internal data.
Currently, the [[bitmapData]] stored in the internal slot is a Uint8Array that has already been decoded and is missing pixel information.
The original color information cannot be accurately restored from this data; for example, 8bitRGBA has the same number of bytes per pixel as 16bit grayscale with alpha.
In any case, it is not a good idea to rely on internal slots as they are subject to breaking changes due to specification changes.

[xBZZZZ]

In any case, it is not a good idea to rely on internal slots as they are subject to breaking changes due to specification changes.

I can only find width and height and close in documetation.

Does [[bitmapData]] exist just to waste RAM?

[Hajime-san]

Does [[bitmapData]] exist just to waste RAM?

No, it will use as a source of image rendering like Canvas2D or WebGPU etc.
The [[bitmapData]] is just a abstract result of how to store the decoded source in the spec.
It could different implementation approach about it by JavaScript host, like Deno, Chromium, Gecko or WebKit.

[xBZZZZ]

No, it will use as a source of image rendering like Canvas2D or WebGPU etc.

how do they tell apart 8 bpc RGBA and 16 bpc GRAYA pixel formats?

[Hajime-san]

how do they tell apart 8 bpc RGBA and 16 bpc GRAYA pixel formats?

In Deno, the pixel information is stored in Rust side but not in [[bitmapData]] of JavaScript.
The usage of [[bitmapData]] is unit testing here currently.