Skip to content

Commit

Permalink
v.0.8.0, BinaryLoader fix, update examples, screenshots
Browse files Browse the repository at this point in the history
  • Loading branch information
Nikos M committed Jul 19, 2016
1 parent 1ddd7e3 commit 65b065d
Show file tree
Hide file tree
Showing 7 changed files with 60 additions and 76 deletions.
28 changes: 14 additions & 14 deletions api-reference.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Change the dependencies file(s) to include your own selection of filters and plu
###Contents

* [Image](#image-class)
* [Image Loader](#loader--htmlimageloader-classes)
* [Image Loader](#loader--binaryloader--htmlimageloader-classes)
* [Abstract Filter](#generic-abstract-filter)
* [Color Matrix Filter](#color-matrix-filter) (analogous to the ActionScript filter)
* [Table Lookup Filter](#table-lookup-filter)
Expand Down Expand Up @@ -82,21 +82,21 @@ __Methods:__



###Loader / HTMLImageLoader Classes
###Loader / BinaryLoader / HTMLImageLoader Classes

````javascript
filterImageInstance = FILTER.HTMLImageLoader.load(imageUrl [, onLoad, onError]);
filterImageInstance = FILTER.HTMLImageLoader.load( imageUrl [, onLoad, onError] );

// this is similar to:

filterImageInstance = new FILTER.HTMLImageLoader().load(imageUrl [, onLoad, onError]);
filterImageInstance = new FILTER.HTMLImageLoader( ).load( imageUrl [, onLoad, onError] );
````

Loads an image url into a FILTER.Image instance.
Loads an image url into a `FILTER.Image` instance.

The same functionality to load a url into a FILTER.Image has been **removed from the FILTER.Image Class**
The same functionality to load a url into a `FILTER.Image` has been **removed from the FILTER.Image Class**

Use the FILTER.HTMLImageLoader instead.
Use the `FILTER.HTMLImageLoader` instead. In order to use the `FILTER.BinaryLoader` to load and decode a custom image format, see below.


###Generic Abstract Filter
Expand Down Expand Up @@ -657,47 +657,47 @@ Native javascript `codecs` (`encoders` / `decoders`) are included for various `i
5. `TGA` (adapted from: https://github.com/vthibault/roBrowser/blob/master/src/Loaders/Targa.js) (**decoder only**)
6. `RGBE`/`HDR` (adapted from: http://www.graphics.cornell.edu/~bjw/rgbe.html) (**encoder + decoder**)

Instead of separate loaders per image format, only one binary loader is used, with the appropriate codecs as parameters.
Instead of separate loaders per image format, only one `binary loader` is used, with the appropriate codecs as parameters.
This makes code more flexible and shorter, loaders can be adapted for nodejs easier and custom codecs can be used on the fly.

**`PNG` example**
Loads an image url in PNG format into a FILTER.Image instance.

````javascript
filterImageInstance = new FILTER.BinaryLoader( FILTER.Codec.PNG.decoder ).load(imageUrl [, onLoad, onError]);
filterImageInstance = FILTER.BinaryLoader( FILTER.Codec.PNG.decoder ).load( imageUrl [, onLoad, onError] );
````

**`JPG` example**
Loads an image url in JPG format into a FILTER.Image instance.

````javascript
filterImageInstance = new FILTER.BinaryLoader( FILTER.Codec.JPG.decoder ).load(imageUrl [, onLoad, onError]);
filterImageInstance = FILTER.BinaryLoader( FILTER.Codec.JPG.decoder ).load( imageUrl [, onLoad, onError] );
````

**`GIF` example**
Loads an image url in GIF format into a FILTER.Image instance.

````javascript
filterImageInstance = new FILTER.BinaryLoader( FILTER.Codec.GIF.decoder ).load(imageUrl [, onLoad, onError]);
filterImageInstance = FILTER.BinaryLoader( FILTER.Codec.GIF.decoder ).load( imageUrl [, onLoad, onError] );
````

**`BMP` example**
Loads an image url in BMP format into a FILTER.Image instance.

````javascript
filterImageInstance = new FILTER.BinaryLoader( FILTER.Codec.BMP.decoder ).load(imageUrl [, onLoad, onError]);
filterImageInstance = FILTER.BinaryLoader( FILTER.Codec.BMP.decoder ).load( imageUrl [, onLoad, onError] );
````

**`TGA` example**
Loads an image url in TGA format into a FILTER.Image instance.

````javascript
filterImageInstance = new FILTER.BinaryLoader( FILTER.Codec.TGA.decoder ).load(imageUrl [, onLoad, onError]);
filterImageInstance = FILTER.BinaryLoader( FILTER.Codec.TGA.decoder ).load( imageUrl [, onLoad, onError] );
````

**`RGBE` example**
Loads an image url in RGBE format into a FILTER.Image instance.

````javascript
filterImageInstance = new FILTER.BinaryLoader( FILTER.Codec.RGBE.decoder ).load(imageUrl [, onLoad, onError]);
filterImageInstance = FILTER.BinaryLoader( FILTER.Codec.RGBE.decoder ).load( imageUrl [, onLoad, onError] );
````
8 changes: 4 additions & 4 deletions build/filter.bundle.js
View file

Large diffs are not rendered by default.

48 changes: 20 additions & 28 deletions build/filter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
*
* FILTER.js
* @version: 0.8.0
* @built on 2016-07-19 20:00:58
* @built on 2016-07-19 22:00:50
* @dependencies: Classy.js, Asynchronous.js
*
* JavaScript Image Processing Library
Expand All @@ -26,7 +26,7 @@ else if ( !(name in root) ) /* Browser/WebWorker/.. */
*
* FILTER.js
* @version: 0.8.0
* @built on 2016-07-19 20:00:58
* @built on 2016-07-19 22:00:50
* @dependencies: Classy.js, Asynchronous.js
*
* JavaScript Image Processing Library
Expand Down Expand Up @@ -3197,14 +3197,14 @@ XHR.create = FILTER.Browser.isNode
if ( o.onStateChange ) o.onStateChange( xhr );

response.on('data', function( chunk ){
xdata += chunk.toString( );
if ( !data_sent )
{
data_sent = 1;
xhr.readyState = XHR.LOADING;
if ( o.onStateChange ) o.onStateChange( xhr );
if ( o.onLoadStart ) o.onLoadStart( xhr );
}
xdata += chunk.toString( );
if ( o.onProgress ) o.onProgress( xhr );
});

Expand All @@ -3216,7 +3216,7 @@ XHR.create = FILTER.Browser.isNode
if ( o.onStateChange ) o.onStateChange( xhr );
if ( o.onLoadEnd ) o.onLoadEnd( xhr );

if ( (XHR.DONE === xhr.readyState) )
if ( XHR.DONE === xhr.readyState )
{
if ( 200 === xhr.status )
{
Expand Down Expand Up @@ -3268,12 +3268,8 @@ XHR.create = FILTER.Browser.isNode
}),

update = function( xhr, $xhr$ ) {
//xhr.responseType = $xhr$.responseType;
xhr.readyState = $xhr$.readyState;
xhr.responseType = $xhr$.responseType;
xhr.responseURL = $xhr$.responseURL;
xhr.response = $xhr$.response;
xhr.responseText = $xhr$.responseText;
xhr.responseXml = $xhr$.responseXml;
xhr.status = $xhr$.status;
xhr.statusText = $xhr$.statusText;
return xhr;
Expand All @@ -3288,7 +3284,7 @@ XHR.create = FILTER.Browser.isNode
};

$xhr$.open( o.method||'GET', o.url, !o.sync );
xhr.responseType = $xhr$.responseType = o.responseType || 'text';
if ( o.responseType ) xhr.responseType = $xhr$.responseType = o.responseType;
$xhr$.timeout = o.timeout || 30000; // 30 secs default timeout

if ( o.onProgress )
Expand Down Expand Up @@ -3316,11 +3312,15 @@ XHR.create = FILTER.Browser.isNode
};
}
$xhr$.onload = function( ) {
update( xhr, $xhr$ );
if ( (XHR.DONE === $xhr$.readyState) )
if ( XHR.DONE === $xhr$.readyState )
{
update( xhr, $xhr$ );
if ( 200 === $xhr$.status )
{
xhr.responseURL = $xhr$.responseURL;
xhr.response = $xhr$.response;
//xhr.responseText = $xhr$.responseText;
//xhr.responseXml = $xhr$.responseXml;
if ( o.onComplete ) o.onComplete( xhr );
}
else
Expand Down Expand Up @@ -3352,22 +3352,22 @@ var XHRLoader = FILTER.XHRLoader = Class(Loader, {

constructor: function XHRLoader( ) {
var self = this;
if ( !(self instanceof XHRLoader) )
return new XHRLoader( );
if ( !(self instanceof XHRLoader) ) return new XHRLoader( );
},

load: function ( url, onLoad, onError ) {
var self = this;

XHR.create({
url: url,
responseType: self._responseType,
onComplete: function( xhr ) {
if ( 'function' === typeof onLoad ) onLoad( 'arraybuffer' === self._responseType ? new Buffer(xhr.response) : xhr.response );
if ( 'function' === typeof onLoad ) onLoad( xhr.response );
},
onError: function( xhr ) {
if ( 'function' === typeof onError ) onError( xhr.statusText );
}
});
}, null);
/*if ( FILTER.Browser.isNode )
{
// https://nodejs.org/api/http.html#http_http_request_options_callback
Expand Down Expand Up @@ -3407,17 +3407,11 @@ var FileLoader = FILTER.FileLoader = Class(Loader, {

constructor: function FileLoader( ) {
var self = this;
if ( !(self instanceof FileLoader) )
return new FileLoader( );
if ( !(self instanceof FileLoader) ) return new FileLoader( );
},

load: function ( file, onLoad, onError ) {
var self = this,
options = {
// return raw buffer
encoding: 'arraybuffer' === self._responseType ? null : self._responseType,
flag: 'r'
};
var self = this;
// read file
if ( FILTER.Browser.isNode )
{
Expand Down Expand Up @@ -3448,7 +3442,7 @@ var FileLoader = FILTER.FileLoader = Class(Loader, {
onError: function( xhr ) {
if ( 'function' === typeof onError ) onError( xhr.statusText );
}
});
}, null);
}
return self;
}
Expand Down Expand Up @@ -3540,9 +3534,7 @@ FILTER.HTMLImageLoader = FILTER.Class(FILTER.Loader, {
if ( 'function' === typeof onError ) onError(image, loader);
};

if ( scope._crossOrigin ) loader.crossOrigin = scope._crossOrigin;
else loader.crossOrigin = "";

loader.crossOrigin = scope._crossOrigin || "";
loader.src = url;

return image;
Expand Down
8 changes: 4 additions & 4 deletions build/filter.min.js
View file

Large diffs are not rendered by default.

Binary file modified screenshots/filters-image-process.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 17 additions & 23 deletions src/core/Loader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -269,14 +269,14 @@ XHR.create = FILTER.Browser.isNode
if ( o.onStateChange ) o.onStateChange( xhr );

response.on('data', function( chunk ){
xdata += chunk.toString( );
if ( !data_sent )
{
data_sent = 1;
xhr.readyState = XHR.LOADING;
if ( o.onStateChange ) o.onStateChange( xhr );
if ( o.onLoadStart ) o.onLoadStart( xhr );
}
xdata += chunk.toString( );
if ( o.onProgress ) o.onProgress( xhr );
});

Expand All @@ -288,7 +288,7 @@ XHR.create = FILTER.Browser.isNode
if ( o.onStateChange ) o.onStateChange( xhr );
if ( o.onLoadEnd ) o.onLoadEnd( xhr );

if ( (XHR.DONE === xhr.readyState) )
if ( XHR.DONE === xhr.readyState )
{
if ( 200 === xhr.status )
{
Expand Down Expand Up @@ -340,12 +340,8 @@ XHR.create = FILTER.Browser.isNode
}),

update = function( xhr, $xhr$ ) {
//xhr.responseType = $xhr$.responseType;
xhr.readyState = $xhr$.readyState;
xhr.responseType = $xhr$.responseType;
xhr.responseURL = $xhr$.responseURL;
xhr.response = $xhr$.response;
xhr.responseText = $xhr$.responseText;
xhr.responseXml = $xhr$.responseXml;
xhr.status = $xhr$.status;
xhr.statusText = $xhr$.statusText;
return xhr;
Expand All @@ -360,7 +356,7 @@ XHR.create = FILTER.Browser.isNode
};

$xhr$.open( o.method||'GET', o.url, !o.sync );
xhr.responseType = $xhr$.responseType = o.responseType || 'text';
if ( o.responseType ) xhr.responseType = $xhr$.responseType = o.responseType;
$xhr$.timeout = o.timeout || 30000; // 30 secs default timeout

if ( o.onProgress )
Expand Down Expand Up @@ -388,11 +384,15 @@ XHR.create = FILTER.Browser.isNode
};
}
$xhr$.onload = function( ) {
update( xhr, $xhr$ );
if ( (XHR.DONE === $xhr$.readyState) )
if ( XHR.DONE === $xhr$.readyState )
{
update( xhr, $xhr$ );
if ( 200 === $xhr$.status )
{
xhr.responseURL = $xhr$.responseURL;
xhr.response = $xhr$.response;
//xhr.responseText = $xhr$.responseText;
//xhr.responseXml = $xhr$.responseXml;
if ( o.onComplete ) o.onComplete( xhr );
}
else
Expand Down Expand Up @@ -424,22 +424,22 @@ var XHRLoader = FILTER.XHRLoader = Class(Loader, {

constructor: function XHRLoader( ) {
var self = this;
if ( !(self instanceof XHRLoader) )
return new XHRLoader( );
if ( !(self instanceof XHRLoader) ) return new XHRLoader( );
},

load: function ( url, onLoad, onError ) {
var self = this;

XHR.create({
url: url,
responseType: self._responseType,
onComplete: function( xhr ) {
if ( 'function' === typeof onLoad ) onLoad( 'arraybuffer' === self._responseType ? new Buffer(xhr.response) : xhr.response );
if ( 'function' === typeof onLoad ) onLoad( xhr.response );
},
onError: function( xhr ) {
if ( 'function' === typeof onError ) onError( xhr.statusText );
}
});
}, null);
/*if ( FILTER.Browser.isNode )
{
// https://nodejs.org/api/http.html#http_http_request_options_callback
Expand Down Expand Up @@ -479,17 +479,11 @@ var FileLoader = FILTER.FileLoader = Class(Loader, {

constructor: function FileLoader( ) {
var self = this;
if ( !(self instanceof FileLoader) )
return new FileLoader( );
if ( !(self instanceof FileLoader) ) return new FileLoader( );
},

load: function ( file, onLoad, onError ) {
var self = this,
options = {
// return raw buffer
encoding: 'arraybuffer' === self._responseType ? null : self._responseType,
flag: 'r'
};
var self = this;
// read file
if ( FILTER.Browser.isNode )
{
Expand Down Expand Up @@ -520,7 +514,7 @@ var FileLoader = FILTER.FileLoader = Class(Loader, {
onError: function( xhr ) {
if ( 'function' === typeof onError ) onError( xhr.statusText );
}
});
}, null);
}
return self;
}
Expand Down
4 changes: 1 addition & 3 deletions src/loaders/HTMLImageLoader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,7 @@ FILTER.HTMLImageLoader = FILTER.Class(FILTER.Loader, {
if ( 'function' === typeof onError ) onError(image, loader);
};

if ( scope._crossOrigin ) loader.crossOrigin = scope._crossOrigin;
else loader.crossOrigin = "";

loader.crossOrigin = scope._crossOrigin || "";
loader.src = url;

return image;
Expand Down

0 comments on commit 65b065d

Please sign in to comment.