Merge pull request #5740 from hanzooo/loader-type

feat: Add support for load image by HTMLImageElement

src/core/Config.js

@@ -513,6 +513,11 @@ var Config = new Class({
          */
         this.loaderWithCredentials = GetValue(config, 'loader.withCredentials', false);
 
+        /**
+         * @const {string} Phaser.Core.Config#loaderImageLoadType - Optional load type for image, `XHR` is default, or `HTMLImageElement` for a lightweight way.
+         */
+        this.loaderImageLoadType = GetValue(config, 'loader.imageLoadType', 'XHR');
+
         /*
          * Allows `plugins` property to either be an array, in which case it just replaces
          * the default plugins like previously, or a config object.

src/loader/LoaderPlugin.js

@@ -207,6 +207,14 @@ var LoaderPlugin = new Class({
          */
         this.crossOrigin = GetFastValue(sceneConfig, 'crossOrigin', gameConfig.loaderCrossOrigin);
         
+        /**
+         * Optional load type for image, `XHR` is default, or `HTMLImageElement` for a lightweight way.
+         *
+         * @name Phaser.Loader.LoaderPlugin#imageLoadType
+         * @type {string}
+         */
+        this.imageLoadType = GetFastValue(sceneConfig, 'imageLoadType', gameConfig.loaderImageLoadType);
+        
         /**
          * The total number of files to load. It may not always be accurate because you may add to the Loader during the process
          * of loading, especially if you load a Pack File. Therefore this value can change, but in most cases remains static.

src/loader/filetypes/ImageFile.js

@@ -10,6 +10,7 @@ var File = require('../File');
 var FileTypesManager = require('../FileTypesManager');
 var GetFastValue = require('../../utils/object/GetFastValue');
 var IsPlainObject = require('../../utils/object/IsPlainObject');
+var GetURL = require('../GetURL');
 
 /**
  * @classdesc
@@ -84,6 +85,14 @@ var ImageFile = new Class({
 
             loader.addFile(normalMap);
         }
+
+        this.useImageElementLoad = loader.imageLoadType === 'HTMLImageElement';
+
+        if (this.useImageElementLoad)
+        {
+            this.load = this.loadImage;
+            this.onProcess = this.onProcessImage;
+        }
     },
 
     /**
@@ -120,6 +129,56 @@ var ImageFile = new Class({
         File.createObjectURL(this.data, this.xhrLoader.response, 'image/png');
     },
 
+    onProcessImage: function () 
+    {
+        var result = this.state;
+
+        this.state = CONST.FILE_PROCESSING;
+
+        if (result === CONST.FILE_LOADED) 
+        {
+            this.onProcessComplete();
+        } 
+        else
+        {
+            this.onProcessError();
+        }
+    },
+
+    loadImage: function () 
+    {
+        this.state = CONST.FILE_LOADING;
+
+        this.src = GetURL(this, this.loader.baseURL);
+
+        if (this.src.indexOf('data:') === 0)
+        {
+            console.warn('Local data URIs are not supported: ' + this.key);
+        }
+        else 
+        {
+            this.data = new Image();
+
+            this.data.crossOrigin = this.crossOrigin;
+
+            var _this = this;
+
+            this.data.onload = function () 
+            {
+                _this.state = CONST.FILE_LOADED;
+
+                _this.loader.nextFile(_this, true);
+            }
+
+            this.data.onerror = function () 
+            {
+                _this.loader.nextFile(_this, false);
+            }
+
+            this.data.src = this.src;
+        }
+    },
+
     /**
      * Adds this file to its target cache upon successful loading and processing.
      *