Skip to content

imageToBlob()

Draws an HTMLImageElement onto an offscreen canvas, then builds a Blob from the raster (via canvas.toDataURL + binary decode). Dimensions use naturalWidth / naturalHeight, falling back to 300×300 if those are zero (e.g. not yet decoded).

CORS: if the image is cross-origin without proper CORS headers, the canvas may be tainted and toDataURL can throw — same browser rules as any canvas export.

Examples:

ts
const img = await renderImage('/photo.jpg');
const jpegBlob = imageToBlob(img, 'image/jpeg');
ts
const pngBlob = imageToBlob(cachedImg); // default image/png

Released under the MIT License.