feat: Add Canvas#{toBlob,toBlobAsync} for browser compatibility

Author: kyranet

src/canvas.js

@@ -1320,6 +1320,7 @@ class Canvas {
 	}
 
 	/**
+	 * <warn>This is for Node.js usage only, HTMLCanvasElement does not support this</warn>
 	 * Render the canvas into a buffer.
 	 * @param {any[]} args The render's options.
 	 * @returns {Buffer}
@@ -1329,6 +1330,7 @@ class Canvas {
 	}
 
 	/**
+	 * <warn>This is for Node.js usage only, HTMLCanvasElement does not support this</warn>
 	 * Render the canvas into a buffer using a Promise.
 	 * @returns {Promise<Buffer>}
 	 */
@@ -1362,6 +1364,30 @@ class Canvas {
 		}));
 	}
 
+	/**
+	 * <warn>This is for web usage only, node-canvas does not support this</warn>
+	 * Render the canvas into a Blob object representing the image contained in the canvas
+	 * @param {Function} callback A callback function with the resulting `Blob` object as a single argument.
+	 * @param {string} [mimeType] A string indicating the image format. The default type is `image/png`.
+	 * @param {number} [qualityArgument] A number between 0 and 1 indicating image quality if the requested type is `image/jpeg` or `image/webp`.
+	 * @returns {void}
+	 * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
+	 */
+	toBlob(...args) {
+		return this.canvas.toBlob(...args);
+	}
+
+	/**
+	 * <warn>This is for web usage only, node-canvas does not support this</warn>
+	 * Render the canvas into a Blob object representing the image contained in the canvas
+	 * @param {string} [mimeType] A string indicating the image format. The default type is `image/png`.
+	 * @param {number} [qualityArgument] A number between 0 and 1 indicating image quality if the requested type is `image/jpeg` or `image/webp`.
+	 * @returns {Promise<Blob>}
+	 */
+	toBlobAsync(...args) {
+		return new Promise((resolve) => this.canvas.toBlob(resolve, ...args));
+	}
+
 	/**
 	 * Resolves an Image or Buffer
 	 * @param {(Image|Buffer)} imageOrBuffer An Image instance or a buffer

typings/index.d.ts

@@ -115,6 +115,8 @@ declare module 'canvas-constructor' {
 		public toBufferAsync(): Promise<Buffer>;
 		public toDataURL(type: string, ...args: any[]): string;
 		public toDataURLAsync(type: string): Promise<string>;
+		public toBlob(callback: (blob: any) => void, mimeType?: string, qualityArgument?: number): void;
+		public toBlobAsync(mimeType?: string, qualityArgument?: number): Promise<any>;
 		public translate(dx: number, dy: number): this;
 
 		private _resolveImage(imageOrBuffer: BufferOrImage): Image;