Support `ImageBitmap` and `createImageBitmap`

[brettz9]

Feature

Add and expose ImageBitmap and createImageBitmap and allow their use within relevant canvas methods (ideally also working with jsdom to hook into this as well).

[piranna]

Does this include to define it as a context?

[brettz9]

That would need to be done on the end of jsdom (or whatever DOM library), but yes, the request is for allowing node-canvas to be used by such libraries for such purposes.

[jimmywarting]

NodeJS just introduced a fs.openAsBlob()

import { openAsBlob } from 'node:fs'
const blob = await openAsBlob('the.file.png')
const bitmap = await createImageBitmap(blob)

you may also fetch blobs natively

const blob = await response.blob()

[liudonghua123]

I want to make https://github.com/imgly/background-removal-js support both web and node platform, and I found this canvas for node project but it seems missing some api like createImageBitmap and so on, how can I implements in node?

See also:

• https://github.com/imgly/background-removal-js/issues/10#issuecomment-1627439472
• https://github.com/imgly/background-removal-js/blob/7b074703ac1c322a10fb551dd7d6e46a2705d4e4/src/utils.ts#L17-L21

[jimmywarting]

If you would like to support some basic version of createImageBitmap yourself right now you could implement something like:

import { openAsBlob } from 'node:fs'
import { Image } from 'canvas'

async function createImageBitmap (blob) {
  const ab = await blob.arrayBuffer()
  const img = new Image()
  await new Promise(rs => {
    img.onload = rs
    img.src = new Uint8Array(ab) // might have to do: Buffer.from(ab)
  })
  return img
}

const blob = await fetch(request).then(res => res.blob())
const blob = await openAsBlob('the.file.png')
const bitmap = await createImageBitmap(blob)

imo i think that the Image class should be removed / deprecated and be replaced with a own built in createImageBitmap powered by node-canvas

[cayblood]

@jimmywarting the code sample above refers to undefined methods, like squid, and the ab arrayBuffer never gets used. Can you please fix that code snippet for those of us who aren't as familiar?

[jimmywarting]

@cayblood ups, updated - thanks