- Added TS files for "Create texture from result of a FileReader"

- cross origin condition if image is from local storage (Thanks to Tim PILLARD (https://github.com/ziir))

Babylon/Materials/textures/babylon.texture.ts

@@ -44,8 +44,10 @@
         private _cachedWAng: number;
         private _cachedCoordinatesMode: number;
         private _samplingMode: number;
+        private _buffer: any;
+        private _deleteBuffer: boolean;
 
-        constructor(url: string, scene: Scene, noMipmap?: boolean, invertY?: boolean, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE) {
+        constructor(url: string, scene: Scene, noMipmap?: boolean, invertY?: boolean, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE, buffer: any = null, deleteBuffer: boolean = false) {
             super(scene);
 
             this.name = url;
@@ -53,16 +55,23 @@
             this._noMipmap = noMipmap;
             this._invertY = invertY;
             this._samplingMode = samplingMode;
+            this._buffer = buffer;
+            this._deleteBuffer = deleteBuffer;
 
             if (!url) {
                 return;
             }
 
+            console.log('coucou');
+
             this._texture = this._getFromCache(url, noMipmap);
 
             if (!this._texture) {
                 if (!scene.useDelayedTextureLoading) {
-                    this._texture = scene.getEngine().createTexture(url, noMipmap, invertY, scene, this._samplingMode);
+                    this._texture = scene.getEngine().createTexture(url, noMipmap, invertY, scene, this._samplingMode, this._buffer);
+                    if (deleteBuffer) {
+                        delete this._buffer;
+                    }
                 } else {
                     this.delayLoadState = BABYLON.Engine.DELAYLOADSTATE_NOTLOADED;
                 }
@@ -78,7 +87,10 @@
             this._texture = this._getFromCache(this.url, this._noMipmap);
 
             if (!this._texture) {
-                this._texture = this.getScene().getEngine().createTexture(this.url, this._noMipmap, this._invertY, this.getScene(), this._samplingMode);
+                this._texture = this.getScene().getEngine().createTexture(this.url, this._noMipmap, this._invertY, this.getScene(), this._samplingMode, this._buffer);
+                if (this._deleteBuffer) {
+                    delete this._buffer;
+                }
             }
         }
 

Babylon/Tools/babylon.tools.js

@@ -160,7 +160,9 @@
             url = Tools.CleanUrl(url);
 
             var img = new Image();
-            img.crossOrigin = 'anonymous';
+            
+            if (url.substr(0, 5) != "data:")
+                img.crossOrigin = 'anonymous';
 
             img.onload = function () {
                 onload(img);
@@ -253,8 +255,8 @@
                 }
             }
         };
-		
-		Tools.ReadFileAsDataURL = function (fileToLoad, callback, progressCallback) {
+
+        Tools.ReadFileAsDataURL = function (fileToLoad, callback, progressCallback) {
             var reader = new FileReader();
             reader.onload = function (e) {
                 callback(e.target.result);

Babylon/Tools/babylon.tools.ts

@@ -171,7 +171,9 @@
             url = Tools.CleanUrl(url);
 
             var img = new Image();
-            img.crossOrigin = 'anonymous';
+
+			if (url.substr(0, 5) != "data:")
+                img.crossOrigin = 'anonymous';
 
             img.onload = () => {
                 onload(img);
@@ -273,6 +275,15 @@
             }
         }
 
+        public static ReadFileAsDataURL(fileToLoad, callback, progressCallback): void {
+            var reader = new FileReader();
+            reader.onload = e => {
+                callback(e.target.result);
+            };
+            reader.onprogress = progressCallback;
+            reader.readAsDataURL(fileToLoad);
+        }
+
         public static ReadFile(fileToLoad, callback, progressCallBack, useArrayBuffer?: boolean): void {
             var reader = new FileReader();
             reader.onload = e => {

Babylon/babylon.engine.ts

@@ -1179,10 +1179,24 @@
             gl.bindTexture(gl.TEXTURE_2D, null);
         }
 
-        public createTexture(url: string, noMipmap: boolean, invertY: boolean, scene: Scene, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE): WebGLTexture {
+        public createTexture(url: string, noMipmap: boolean, invertY: boolean, scene: Scene, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE, buffer: any = null): WebGLTexture {
             var texture = this._gl.createTexture();
 
-            var extension = url.substr(url.length - 4, 4).toLowerCase();
+            var extension: string;
+			var fromData: any = false;
+			if (url.substr(0, 5) === "data:") {
+                fromData = true;
+            }
+
+			if (!fromData)
+                extension = url.substr(url.length - 4, 4).toLowerCase();
+            else {
+                var oldUrl = url;
+                fromData = oldUrl.split(':');
+                url = oldUrl;
+                extension = fromData[1].substr(fromData[1].length - 4, 4).toLowerCase();
+            }
+
             var isDDS = this.getCaps().s3tc && (extension === ".dds");
             var isTGA = (extension === ".tga");
 
@@ -1193,7 +1207,7 @@
             this._loadedTexturesCache.push(texture);
 
             if (isTGA) {
-                BABYLON.Tools.LoadFile(url, arrayBuffer => {
+                var callback = (arrayBuffer) => {
                     var data = new Uint8Array(arrayBuffer);
 
                     var header = BABYLON.Internals.TGATools.GetTGAHeader(data);
@@ -1201,17 +1215,33 @@
                     prepareWebGLTexture(texture, this._gl, scene, header.width, header.height, invertY, noMipmap, false, () => {
                         Internals.TGATools.UploadContent(this._gl, data);
                     }, samplingMode);
-                }, null, scene.database, true);
+                };
+
+                if (!(fromData instanceof Array))
+                    BABYLON.Tools.LoadFile(url, arrayBuffer => {
+                        callback(arrayBuffer);
+                    }, null, scene.database, true);
+                else
+                    callback(buffer);
+
             } else if (isDDS) {
-                BABYLON.Tools.LoadFile(url, data => {
+                var callback = (data) => {
                     var info = BABYLON.Internals.DDSTools.GetDDSInfo(data);
 
-                    var loadMipmap = (info.isRGB || info.isLuminance || info.mipmapCount > 1) && !noMipmap && ((info.width >> (info.mipmapCount -1)) == 1);
+                    var loadMipmap = (info.isRGB || info.isLuminance || info.mipmapCount > 1) && !noMipmap && ((info.width >> (info.mipmapCount - 1)) == 1);
                     prepareWebGLTexture(texture, this._gl, scene, info.width, info.height, invertY, !loadMipmap, info.isFourCC, () => {
                         console.log("loading " + url);
                         Internals.DDSTools.UploadDDSLevels(this._gl, this.getCaps().s3tc, data, info, loadMipmap, 1);
                     }, samplingMode);
-                }, null, scene.database, true);
+                }
+
+                if (!(fromData instanceof Array))
+                    BABYLON.Tools.LoadFile(url, data => {
+                        callback(data);
+                    }, null, scene.database, true);
+                else
+                    callback(buffer);
+
             } else {
                 var onload = (img) => {
                     prepareWebGLTexture(texture, this._gl, scene, img.width, img.height, invertY, noMipmap, false, (potWidth, potHeight) => {
@@ -1232,7 +1262,10 @@
                     scene._removePendingData(texture);
                 };
 
-                BABYLON.Tools.LoadImage(url, onload, onerror, scene.database);
+                if (!(fromData instanceof Array))
+                    BABYLON.Tools.LoadImage(url, onload, onerror, scene.database);
+                else
+                    BABYLON.Tools.LoadImage(buffer, onload, onerror, scene.database);
             }
 
             return texture;