Skip to content

Introduce blob's #1845

Open
Open
@jimmywarting

Description

@jimmywarting

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) 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 instead of canvas.toBlob

This was what i did to feel more at home:

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 is a good candidate for implementing support for it already

An example with using fetch-blob with createImageBitmap() would look like

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:

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 and ImageBitmap.close to release the memory in native binding

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions