Merge pull request phaserjs#3071 from pavle-goloskokovic/master

Adding fallback for loading files on browsers where URL API is not supported

Author: photonstorm

v3/src/loader/File.js

@@ -162,4 +162,52 @@ var File = new Class({
 
 });
 
+/**
+ * Static method for creating object URL using URL API and setting it as image 'src' attribute.
+ * If URL API is not supported (usually on old browsers) it falls back to creating Base64 encoded url using FileReader.
+ *
+ * @method createObjectURL
+ * @static
+ * @param image {Image} Image object which 'src' attribute should be set to object URL.
+ * @param blob {Blob} A Blob object to create an object URL for.
+ * @param defaultType {string} Default mime type used if blob type is not available.
+ */
+File.createObjectURL = function (image, blob, defaultType)
+{
+    if(URL)
+    {
+        image.src = URL.createObjectURL(blob);
+    }
+    else
+    {
+        var reader = new FileReader();
+
+        reader.onload = function()
+        {
+            delete image.crossOrigin;
+            image.src = 'data:' + (blob.type || defaultType) + ';base64,' + reader.result.split(',')[1];
+        };
+
+        reader.onerror = image.onerror;
+
+        reader.readAsDataURL(blob);
+    }
+};
+
+/**
+ * Static method for releasing an existing object URL which was previously created
+ * by calling {@link File#createObjectURL} method.
+ *
+ * @method revokeObjectURL
+ * @static
+ * @param image {Image} Image object which 'src' attribute should be revoked.
+ */
+File.revokeObjectURL = function (image)
+{
+    if(URL)
+    {
+        URL.revokeObjectURL(image.src);
+    }
+};
+
 module.exports = File;

v3/src/loader/filetypes/HTMLFile.js

@@ -74,7 +74,7 @@ var HTMLFile = new Class({
 
         this.data.onload = function ()
         {
-            URL.revokeObjectURL(_this.data.src);
+            File.revokeObjectURL(_this.data);
 
             _this.onComplete();
 
@@ -83,14 +83,14 @@ var HTMLFile = new Class({
 
         this.data.onerror = function ()
         {
-            URL.revokeObjectURL(_this.data.src);
+            File.revokeObjectURL(_this.data);
 
             _this.state = CONST.FILE_ERRORED;
 
             callback(_this);
         };
 
-        this.data.src = URL.createObjectURL(blob);
+        File.createObjectURL(this.data, blob, 'image/svg+xml');
     }
 
 });

v3/src/loader/filetypes/ImageFile.js

@@ -56,7 +56,7 @@ var ImageFile = new Class({
 
         this.data.onload = function ()
         {
-            URL.revokeObjectURL(_this.data.src);
+            File.revokeObjectURL(_this.data);
 
             _this.onComplete();
 
@@ -65,14 +65,15 @@ var ImageFile = new Class({
 
         this.data.onerror = function ()
         {
-            URL.revokeObjectURL(_this.data.src);
+            File.revokeObjectURL(_this.data);
 
             _this.state = CONST.FILE_ERRORED;
 
             callback(_this);
         };
 
-        this.data.src = URL.createObjectURL(this.xhrLoader.response);
+        File.createObjectURL(this.data, this.xhrLoader.response, 'image/png');
+
     }
 
 });

v3/src/loader/filetypes/SVGFile.js

@@ -56,7 +56,10 @@ var SVGFile = new Class({
 
         this.data.onload = function ()
         {
-            URL.revokeObjectURL(_this.data.src);
+            if(!retry)
+            {
+                File.revokeObjectURL(_this.data);
+            }
 
             _this.onComplete();
 
@@ -65,16 +68,14 @@ var SVGFile = new Class({
 
         this.data.onerror = function ()
         {
-            URL.revokeObjectURL(_this.data.src);
-
             //  Safari 8 re-try
             if (!retry)
             {
                 retry = true;
 
-                var url = 'data:image/svg+xml,' + encodeURIComponent(svg.join(''));
+                File.revokeObjectURL(_this.data);
 
-                _this.data.src = URL.createObjectURL(url);
+                _this.data.src = 'data:image/svg+xml,' + encodeURIComponent(svg.join(''));
             }
             else
             {
@@ -84,7 +85,7 @@ var SVGFile = new Class({
             }
         };
 
-        this.data.src = URL.createObjectURL(blob);
+        File.createObjectURL(this.data, blob, 'image/svg+xml');
     }
 
 });