Merge pull request #4604 from sebavan/master

Add to blob polyfill on canvas

dist/preview release/what's new.md

@@ -54,8 +54,9 @@
 - `Sound` now accepts `MediaStream` as source to enable easier WebAudio and WebRTC integrations ([menduz](https://github.com/menduz))
 - Vector x, y and z constructor parameters are now optional and default to 0 ([TrevorDev](https://github.com/TrevorDev))
 - New vertical mode for sliders in 2D GUI. [Demo](https://www.babylonjs-playground.com/#U9AC0N#53) ([Saket Saurabh](https://github.com/ssaket))
-- Add and remove camera methods in the default pipeline ([TrevorDev](https://github.com/TrevorDev))
-- Add internal texture `format` support for RenderTargetCubeTexture ([PeapBoy](https://github.com/NicolasBuecher))
+- Added and remove camera methods in the default pipeline ([TrevorDev](https://github.com/TrevorDev))
+- Added internal texture `format` support for RenderTargetCubeTexture ([PeapBoy](https://github.com/NicolasBuecher))
+- Added canvas toBlob polyfill in tools ([sebavan](http://www.github.com/sebavan))
 
 ### glTF Loader
 

serializers/src/glTF/2.0/babylon.glTFMaterialExporter.ts

@@ -501,7 +501,7 @@ module BABYLON.GLTF2 {
                     // Read data from WebGL
                     const canvas = engine.getRenderingCanvas();
                     if (canvas) {
-                        canvas.toBlob(blob => {
+                        BABYLON.Tools.ToBlob(canvas, blob => {
                             if (blob) {
                                 let fileReader = new FileReader();
                                 fileReader.onload = (event: any) => {

src/Tools/babylon.environmentTextureTools.ts

@@ -196,7 +196,7 @@ module BABYLON {
                             hostingScene.postProcessManager.directRender([rgbdPostProcess], null);
 
                             // Reading datas from WebGL
-                            canvas!.toBlob((blob) => {
+                            Tools.ToBlob(canvas!, (blob) => {
                                 let fileReader = new FileReader();
                                 fileReader.onload = (event: any) => {
                                     let arrayBuffer = event.target!.result as ArrayBuffer;

src/Tools/babylon.tools.ts

@@ -1024,29 +1024,48 @@
             }
         }
 
-        static EncodeScreenshotCanvasData(successCallback?: (data: string) => void, mimeType: string = "image/png", fileName?: string) {
-            var base64Image = screenshotCanvas.toDataURL(mimeType);
+        /**
+         * Converts the canvas data to blob.
+         * This acts as a polyfill for browsers not supporting the to blob function.
+         * @param canvas Defines the canvas to extract the data from
+         * @param successCallback Defines the callback triggered once the data are available
+         * @param mimeType Defines the mime type of the result
+         */
+        static ToBlob(canvas: HTMLCanvasElement, successCallback: (blob: Nullable<Blob>) => void, mimeType: string = "image/png"): void {
+            // We need HTMLCanvasElement.toBlob for HD screenshots
+            if (!screenshotCanvas.toBlob) {
+                //  low performance polyfill based on toDataURL (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob)
+                screenshotCanvas.toBlob = function (callback, type, quality) {
+                    setTimeout(() => {
+                        var binStr = atob(this.toDataURL(type, quality).split(',')[1]),
+                            len = binStr.length,
+                            arr = new Uint8Array(len);
+
+                        for (var i = 0; i < len; i++) {
+                            arr[i] = binStr.charCodeAt(i);
+                        }
+                        callback(new Blob([arr]));
+                    });
+                }
+            }
+            screenshotCanvas.toBlob(function (blob) {
+                successCallback(blob);
+            }, mimeType);
+        }
+
+        /**
+         * Encodes the canvas data to base 64 or automatically download the result if filename is defined
+         * @param successCallback Defines the callback triggered once the data are available
+         * @param mimeType Defines the mime type of the result
+         * @param fileName The filename to download. If present, the result will automatically be downloaded
+         */
+        static EncodeScreenshotCanvasData(successCallback?: (data: string) => void, mimeType: string = "image/png", fileName?: string): void {
             if (successCallback) {
+                var base64Image = screenshotCanvas.toDataURL(mimeType);
                 successCallback(base64Image);
             }
             else {
-                // We need HTMLCanvasElement.toBlob for HD screenshots
-                if (!screenshotCanvas.toBlob) {
-                    //  low performance polyfill based on toDataURL (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob)
-                    screenshotCanvas.toBlob = function (callback, type, quality) {
-                        setTimeout(() => {
-                            var binStr = atob(this.toDataURL(type, quality).split(',')[1]),
-                                len = binStr.length,
-                                arr = new Uint8Array(len);
-
-                            for (var i = 0; i < len; i++) {
-                                arr[i] = binStr.charCodeAt(i);
-                            }
-                            callback(new Blob([arr], { type: type || 'image/png' }));
-                        });
-                    }
-                }
-                screenshotCanvas.toBlob(function (blob) {
+                this.ToBlob(screenshotCanvas, function (blob) {
                     //Creating a link if the browser have the download attribute on the a tag, to automatically start download generated image.
                     if (("download" in document.createElement("a"))) {
                         if (!fileName) {
@@ -1069,8 +1088,7 @@
                         img.src = url;
                         newWindow.document.body.appendChild(img);
                     }
-
-                });
+                }, mimeType);
             }
         }