feat: Add method toBlob

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## [next]
 
+- feat(): Add method toBlob. [#3283](https://github.com/fabricjs/fabric.js/issues/3283)
+
 ## [6.5.4]
 
 - docs() perf(): Reorder caching conditions for most common scenario and docs fixes. [#10366](https://github.com/fabricjs/fabric.js/pull/10366)

src/canvas/StaticCanvas.ts

@@ -26,7 +26,7 @@ import {
 } from '../util/animation/AnimationFrameProvider';
 import { runningAnimations } from '../util/animation/AnimationRegistry';
 import { uid } from '../util/internals/uid';
-import { createCanvasElementFor, toDataURL } from '../util/misc/dom';
+import { createCanvasElementFor, toBlob, toDataURL } from '../util/misc/dom';
 import { invertTransform, transformPoint } from '../util/misc/matrix';
 import type { EnlivenObjectOptions } from '../util/misc/objectEnlive';
 import {
@@ -1393,6 +1393,22 @@ export class StaticCanvas<
       quality,
     );
   }
+  toBlob(options = {} as TDataUrlOptions): Promise<Blob | null> {
+    const {
+      format = 'png',
+      quality = 1,
+      multiplier = 1,
+      enableRetinaScaling = false,
+    } = options;
+    const finalMultiplier =
+      multiplier * (enableRetinaScaling ? this.getRetinaScaling() : 1);
+
+    return toBlob(
+      this.toCanvasElement(finalMultiplier, options),
+      format,
+      quality,
+    );
+  }
 
   /**
    * Create a new HTMLCanvas element painted with the current canvas content.

src/shapes/Object/Object.ts

@@ -31,6 +31,7 @@ import {
   createCanvasElement,
   createCanvasElementFor,
   toDataURL,
+  toBlob,
 } from '../../util/misc/dom';
 import { invertTransform, qrDecompose } from '../../util/misc/matrix';
 import { enlivenObjectEnlivables } from '../../util/misc/objectEnlive';
@@ -1403,6 +1404,13 @@ export class FabricObject<
       options.quality || 1,
     );
   }
+  toBlob(options: toDataURLOptions = {}) {
+    return toBlob(
+      this.toCanvasElement(options),
+      options.format || 'png',
+      options.quality || 1,
+    );
+  }
 
   /**
    * Returns true if any of the specified types is identical to the type of an instance

src/util/index.ts

@@ -51,6 +51,7 @@ export {
   createImage,
   copyCanvasElement,
   toDataURL,
+  toBlob,
 } from './misc/dom';
 export { toFixed } from './misc/toFixed';
 export {

src/util/misc/dom.ts

@@ -61,3 +61,12 @@ export const isHTMLCanvas = (
 ): canvas is HTMLCanvasElement => {
   return !!canvas && (canvas as HTMLCanvasElement).getContext !== undefined;
 };
+
+export const toBlob = (
+  canvasEl: HTMLCanvasElement,
+  format: ImageFormat,
+  quality: number,
+) =>
+  new Promise((resolve, _) => {
+    canvasEl.toBlob(resolve, `image/${format}`, quality);
+  }) as Promise<Blob | null>;