Adding in Image parsing.

This commit is contained in:
Richard Davey 2016-12-07 00:04:32 +00:00
parent 5073489a1c
commit 393791706e
3 changed files with 31 additions and 42 deletions

View file

@ -9,8 +9,6 @@ var BaseLoader = function ()
{ {
// To finish the loader ... // To finish the loader ...
// //
// 1) Image Tag loader
// 2) Events (or Signals?) for the various stages
// 3) Progress update // 3) Progress update
// 4) JSON loader // 4) JSON loader
// 5) XML Loader // 5) XML Loader
@ -19,6 +17,8 @@ var BaseLoader = function ()
this.events = new EventDispatcher(); this.events = new EventDispatcher();
this.forceImageTags = false;
// Move to a 'setURL' method? // Move to a 'setURL' method?
this.baseURL = ''; this.baseURL = '';
this.path = ''; this.path = '';
@ -230,22 +230,9 @@ BaseLoader.prototype = {
this.events.dispatch(new Event.LOADER_COMPLETE_EVENT(this)); this.events.dispatch(new Event.LOADER_COMPLETE_EVENT(this));
}, },
getLoadedFiles (group = '', output = []) { getLoadedFiles: function ()
{
var output = []; return this.storage.slice();
// Return an array of all files that have state = COMPLETE (which means loaded + processed)
for (let file of this.storage)
{
if (file.state === FILE.COMPLETE && file.tag === group && (type !== '' && file.type === type))
{
output.push(file);
}
}
return output;
}, },
reset: function () reset: function ()

View file

@ -57,11 +57,12 @@ File.prototype = {
// ProgressEvent // ProgressEvent
onLoad: function (event) onLoad: function (event)
{ {
console.log('image loaded'); // console.log('image loaded');
console.log(event); // console.log(event);
// this.onStateChange(LOADING); // this.onStateChange(LOADING);
this.process();
this.resetXHR(); this.resetXHR();
this.callback(this, true); this.callback(this, true);
@ -69,8 +70,8 @@ File.prototype = {
onError: function (event) onError: function (event)
{ {
console.log('image error'); // console.log('image error');
console.log(event); // console.log(event);
this.resetXHR(); this.resetXHR();
@ -87,14 +88,16 @@ File.prototype = {
console.log(this.percentComplete + '% (' + this.bytesLoaded + ' bytes)'); console.log(this.percentComplete + '% (' + this.bytesLoaded + ' bytes)');
}, },
onProcess: function () process: function ()
{ {
console.log('process the image'); // Override by an extending class
}, },
onComplete: function () onComplete: function ()
{ {
console.log('image completed and added to the loader store'); console.log('File completed, ready to add to the Loader store');
this.state = CONST.FILE_COMPLETE;
}, },
// Called by the Loader, starts the actual file downloading // Called by the Loader, starts the actual file downloading
@ -106,8 +109,6 @@ File.prototype = {
this.src = GetURL(this, baseURL); this.src = GetURL(this, baseURL);
console.log('LOADING2', this.src);
this.xhrLoader = XHRLoader(this, globalXHR); this.xhrLoader = XHRLoader(this, globalXHR);
} }
}; };

View file

@ -1,22 +1,14 @@
// var FILE_CONST = require('../const');
var CONST = require('../const');
var File = require('../File'); var File = require('../File');
// Different images based on device-pixel ratio
// And maybe on screen resolution breakpoints
// 2 options - can either return the File object, so they can listen to it specifically
// Or can return the Loader, so they can chain calls?
var ImageFile = function (key, url, path) var ImageFile = function (key, url, path)
{ {
if (path === undefined) { path = ''; } if (path === undefined) { path = ''; }
if (!key) if (!key)
{ {
console.warn('Loader: You tried to load an Image, but no key was given'); throw new Error('Error calling \'Loader.image\' invalid key provided.');
return false;
} }
if (!url) if (!url)
@ -28,17 +20,26 @@ var ImageFile = function (key, url, path)
url = path.concat(url); url = path.concat(url);
} }
var file = new File('image', key, url, 'arraybuffer'); File.call(this, 'image', key, url, 'blob');
return file;
}; };
ImageFile.prototype = Object.create(File.prototype); ImageFile.prototype = Object.create(File.prototype);
ImageFile.prototype.constructor = ImageFile; ImageFile.prototype.constructor = ImageFile;
ImageFile.prototype.onProcess = function () ImageFile.prototype.process = function ()
{ {
this.state = CONST.FILE_PROCESSING;
this.data = new Image();
this.data.onload = function ()
{
window.URL.revokeObjectURL(this.src);
this.onComplete();
};
this.data.src = window.URL.createObjectURL(this.xhrLoader.response);
}; };
module.exports = ImageFile; module.exports = ImageFile;