Automattic / Automattic/node-canvas

Introduce blob's

Open
#1,845 10 comments 1 reaction 0 assignees View on GitHub
Feature
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.