Automattic / Automattic/node-canvas
Introduce blob's
- Dominant language
- JavaScript
- Stars
- 10.7k
- Forks
- 1.2k
- Avg merge
- 4d 8h
- Merged PRs (30d)
- 1
Description
NodeJS recently introduced Blobs into core
think this is grate cuz now we can have `canvas.toBlob(cb)`
we could also introduce a new fn that can create a ImageBitmap out of a more web/standarlized way with [createImageBitmap(blob)](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap) instead of using the abnormal way with `loadImage(...)` or `new Image(...)` (that i think should be deprecated/removed)
I also think `createCanvas` should go away for a web-worker related thing which is the OffscreenCanvas cunstructor
so that would also mean: we would use [OffscreenCanvas.convertToBlob](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/convertToBlob) instead of `canvas.toBlob`
This was what i did to feel more at home:
```js
const {
// More correct naming convention
createCanvas: OffscreenCanvas,
loadImage: createImageBitmap
} = NodeCanvas;
export async function cropImage(...args) {
/** @type {ImageBitmap} */
const bitmap = await createImageBitmap(imagePath);
const canvas = OffscreenCanvas(width, height);
```
(still a tiny bit node specific - would like it to work 100% like a Web Worker would handle everything for cross browser coding)
[fetch-blob](https://github.com/node-fetch/fetch-blob) is a good candidate for implementing support for it already
An example with using fetch-blob with createImageBitmap() would look like
```js
import { createImageBitmap } from 'canvas'
import { blobFrom } from 'fetch-blob/from.js'
const blob = await blobFrom('./sample.jpg')
const bitmap = await createImageBitmap(blob)
console.log(bitmap.width, bitmap.height, bitmap.close)
// or simply:
const bitmap = await blobFrom('./sample.jpg').then(createImageBitmap)
```
This would be the correct way to get a buffer:
```js
const blob = await canvas.convertToBlob()
const buf = await blob.arrayBuffer().then(Buffer.from)
```
---
Close #1845, #1705, #1735, #1758, #1802 in favor of the new way to load images with `createImageBitmap(blob)`?
deprecate `new Image()` and `loadImage()`?
use [FinalizationRegistry](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry) and [ImageBitmap.close](https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap/close) to release the memory in native binding
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.