Code pour le contraste (algo à faire) + exemple pour SDS
This commit is contained in:
parent
a096260662
commit
c422eb3215
|
@ -66,7 +66,6 @@ process = function(){
|
||||||
|
|
||||||
console.time('PROCESS');
|
console.time('PROCESS');
|
||||||
|
|
||||||
|
|
||||||
/* [0.0] Gestion du changement d'image
|
/* [0.0] Gestion du changement d'image
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
if( this.src != last ){
|
if( this.src != last ){
|
||||||
|
@ -129,8 +128,8 @@ process = function(){
|
||||||
|
|
||||||
{ /* [3] Filtrage pre-processing
|
{ /* [3] Filtrage pre-processing
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
|
/* (1) Contraste */
|
||||||
|
filterManager.get('contrast').apply();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -165,7 +164,6 @@ process = function(){
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{ /* [3] Gestion des `ReactiveFilter`
|
{ /* [3] Gestion des `ReactiveFilter`
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
/* (1) Création du Manager */
|
/* (1) Création du Manager */
|
||||||
|
@ -173,16 +171,18 @@ process = function(){
|
||||||
|
|
||||||
/* (2) Ajout des filtres */
|
/* (2) Ajout des filtres */
|
||||||
filterManager.add('ratio', reactiveRatio);
|
filterManager.add('ratio', reactiveRatio);
|
||||||
|
filterManager.add('contrast', reactiveContrast);
|
||||||
|
|
||||||
/* (3) On attache tout à dat.GUI */
|
/* (3) On attache tout à dat.GUI */
|
||||||
Controller.addFolder('Image Ratio');
|
Controller.addFolder('Image Ratio');
|
||||||
Controller.add(filterManager.get('ratio'), 'width', 0, 2).listen();
|
Controller.add(filterManager.get('ratio'), 'width', 0, 2).listen();
|
||||||
Controller.add(filterManager.get('ratio'), 'height', 0, 2).listen();
|
Controller.add(filterManager.get('ratio'), 'height', 0, 2).listen();
|
||||||
|
Controller.addFolder('Image Processing');
|
||||||
|
Controller.add(filterManager.get('contrast'), 'contrast', 0, 100).listen();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* [x] Chargement image
|
/* [x] Chargement image
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
iL = new ImageLoader( DOM.imageLoader, init, process );
|
iL = new ImageLoader( DOM.imageLoader, init, process );
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
var ReactiveFilter=function(a){this._manager={_process:function(){}};this._attr=a instanceof Object?a:{};for(var b in this._attr)this.__defineGetter__(b,function(a){return this._attr[a]}.bind(this,b)),this.__defineSetter__(b,function(a,b){return function(d){a._attr[b]=d;a._manager.process()}}(this,b));this.apply=function(){}},ReactiveFilterManager=function(a,b,c){this._target=a instanceof HTMLImageElement?a:null;if(!this._target)throw Error("Param 1 expected to be an HTMLImageElement (<img>), but "+
|
var ReactiveFilter=function(a){this._manager={_process:function(){}};this._attr=a instanceof Object?a:{};for(var b in this._attr)this.__defineGetter__(b,function(a){return this._attr[a]}.bind(this,b)),this.__defineSetter__(b,function(a,b){return function(e){a._attr[b]=e;a._manager.process()}}(this,b));this.apply=function(){}},ReactiveFilterManager=function(a,b,c){this._target=a instanceof HTMLImageElement?a:null;if(!this._target)throw Error("Param 1 expected to be an HTMLImageElement (<img>), but "+
|
||||||
a.constructor.name+" received");this._canvas=b instanceof HTMLCanvasElement?b:null;if(!this._canvas)throw Error("Param 2 expected to be an HTMLCanvasElement (<canvas>), but "+b.constructor.name+" received");this._context=this._canvas.getContext("2d");this._process=c instanceof Function?c:null;if(!this._process)throw Error("Param 3 expected to be a Function, but "+c.constructor.name+" received");this._filter={}};
|
a.constructor.name+" received");this._canvas=b instanceof HTMLCanvasElement?b:null;if(!this._canvas)throw Error("Param 2 expected to be an HTMLCanvasElement (<canvas>), but "+b.constructor.name+" received");this._context=this._canvas.getContext("2d");this._process=c instanceof Function?c:null;if(!this._process)throw Error("Param 3 expected to be a Function, but "+c.constructor.name+" received");this._filter={}};
|
||||||
ReactiveFilterManager.prototype.add=function(a,b){a="string"===typeof a?a:null;if(!a)throw Error("Param 1 expected to be a `string`, but "+a.constructor.name+" received");b=b instanceof ReactiveFilter?b:null;if(!b)throw Error("Param 2 expected to be a `ReactiveFilter`, but "+b.constructor.name+" received");if(null!=this._filter[a])return!0;this._filter[a]=b;b._manager=this};
|
ReactiveFilterManager.prototype.add=function(a,b){a="string"===typeof a?a:null;if(!a)throw Error("Param 1 expected to be a `string`, but "+a.constructor.name+" received");b=b instanceof ReactiveFilter?b:null;if(!b)throw Error("Param 2 expected to be a `ReactiveFilter`, but "+b.constructor.name+" received");if(null!=this._filter[a])return!0;this._filter[a]=b;b._manager=this};
|
||||||
ReactiveFilterManager.prototype.get=function(a){a="string"===typeof a?a:null;if(!a)throw Error("Param 1 expected to be a `string`, but "+a.constructor.name+" received");return null!=this._filter[a]?this._filter[a]:!1};ReactiveFilterManager.prototype.process=function(){this._process.bind(this._target)()};var reactiveRatio=new ReactiveFilter({width:.95,height:.95});
|
ReactiveFilterManager.prototype.get=function(a){a="string"===typeof a?a:null;if(!a)throw Error("Param 1 expected to be a `string`, but "+a.constructor.name+" received");return null!=this._filter[a]?this._filter[a]:!1};ReactiveFilterManager.prototype.process=function(){this._process.bind(this._target)()};var reactiveRatio=new ReactiveFilter({width:.95,height:.95});
|
||||||
reactiveRatio.apply=function(){if(this._manager instanceof ReactiveFilterManager){var a=this._manager._target,b=this._manager._canvas,c=this._manager._context;a.width=this.width*b.width/a.defaultWidth*a.defaultWidth;a.height=this.height*b.height/a.defaultHeight*a.defaultHeight;c.drawImage(a,0,0,a.width,a.height)}};
|
reactiveRatio.apply=function(){if(this._manager instanceof ReactiveFilterManager){var a=this._manager._target,b=this._manager._canvas,c=this._manager._context;a.width=this.width*b.width/a.defaultWidth*a.defaultWidth;a.height=this.height*b.height/a.defaultHeight*a.defaultHeight;c.drawImage(a,0,0,a.width,a.height)}};var reactiveContrast=new ReactiveFilter({contrast:50});
|
||||||
|
reactiveContrast.apply=function(){if(this._manager instanceof ReactiveFilterManager&&!(100>this.contrast)){var a=this._manager._canvas,b=this._manager._context,a=b.getImageData(0,0,a.width,a.height),c=new Uint32Array(a.data.buffer),d;for(d in c)c[d]=4278190080|16777215-c[d]<<8>>8;b.putImageData(a,0,0)}};
|
||||||
|
|
|
@ -137,10 +137,9 @@ ReactiveFilterManager.prototype.process = function(){
|
||||||
|
|
||||||
|
|
||||||
/************************************************
|
/************************************************
|
||||||
**** Gestion de la ratio de l'image ****
|
**** Gestion des ratios de l'image ****
|
||||||
************************************************/
|
************************************************/
|
||||||
var reactiveRatio = new ReactiveFilter({ width: .95, height: .95 });
|
var reactiveRatio = new ReactiveFilter({ width: .95, height: .95 });
|
||||||
|
|
||||||
reactiveRatio.apply = function(){
|
reactiveRatio.apply = function(){
|
||||||
/* [1] Si pas de manager, on exit
|
/* [1] Si pas de manager, on exit
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
|
@ -163,3 +162,43 @@ reactiveRatio.apply = function(){
|
||||||
o.context.drawImage(o.image, 0, 0, o.image.width, o.image.height);
|
o.context.drawImage(o.image, 0, 0, o.image.width, o.image.height);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/************************************************
|
||||||
|
**** Gestion du contraste ****
|
||||||
|
************************************************/
|
||||||
|
var reactiveContrast = new ReactiveFilter({ contrast: 50 });
|
||||||
|
reactiveContrast.apply = function(){
|
||||||
|
/* [1] Si pas de manager, on exit
|
||||||
|
=========================================================*/
|
||||||
|
if( !(this._manager instanceof ReactiveFilterManager) )
|
||||||
|
return;
|
||||||
|
|
||||||
|
// Condition, contraste == 100
|
||||||
|
if( this.contrast < 100 )
|
||||||
|
return;
|
||||||
|
|
||||||
|
|
||||||
|
/* [2] On recupère notre back-buffer (32Uint)
|
||||||
|
=========================================================*/
|
||||||
|
var o = {
|
||||||
|
image: this._manager._target,
|
||||||
|
canvas: this._manager._canvas,
|
||||||
|
context: this._manager._context
|
||||||
|
};
|
||||||
|
|
||||||
|
var imageData = o.context.getImageData(0, 0, o.canvas.width, o.canvas.height);
|
||||||
|
var buffer = imageData.data;
|
||||||
|
var buffer32 = new Uint32Array( imageData.data.buffer );
|
||||||
|
|
||||||
|
|
||||||
|
/* [3] On effectue notre modification
|
||||||
|
=========================================================*/
|
||||||
|
/* (1) Gestion du contraste */
|
||||||
|
for( var i in buffer32 )
|
||||||
|
buffer32[i] = 0xff000000 | ( 0xffffff - buffer32[i] << 8 ) >> 8;
|
||||||
|
|
||||||
|
/* (2) Copie le résultat sur le `<canvas>` */
|
||||||
|
o.context.putImageData(imageData, 0, 0);
|
||||||
|
};
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
var DOM={body:$("body"),canvas:$("canvas"),imageLoader:$("#image-loader")},Controller=new dat.GUI,_CAN=DOM.canvas;_CAN.width=_CAN.height=1E3;var _CON=_CAN.getContext("2d"),iL,filterManager,process,exec=!1,last,init=function(){this.src="front:male:1.jpg";Controller.addFolder("image source");Controller.add(this,"src",this._images).listen();last=this.src},zones,track={update:!0},tracker=new tracking.ObjectTracker(["face","eye","mouth"]);tracker.setStepSize(1.5);Controller.addFolder("Tracking.js");
|
var DOM={body:$("body"),canvas:$("canvas"),imageLoader:$("#image-loader")},Controller=new dat.GUI,_CAN=DOM.canvas;_CAN.width=_CAN.height=1E3;var _CON=_CAN.getContext("2d"),iL,filterManager,process,exec=!1,last,init=function(){this.src="front:male:1.jpg";Controller.addFolder("image source");Controller.add(this,"src",this._images).listen();last=this.src},zones,track={update:!0},tracker=new tracking.ObjectTracker(["face","eye","mouth"]);tracker.setStepSize(1.5);Controller.addFolder("Tracking.js");
|
||||||
Controller.add(track,"update");
|
Controller.add(track,"update");
|
||||||
process=function(){if(this instanceof HTMLImageElement){console.time("PROCESS");this.src!=last&&(exec=!1,last=this.src);exec||(this.defaultWidth=this.width,this.defaultHeight=this.height,log("Image copied","[Canvas]"),track.update&&(zones=[],tracking.track(DOM.imageLoader,tracker),tracker.on("track",function(a){a.data.forEach(function(a){zones.push({x:a.x/DOM.imageLoader.defaultWidth,y:a.y/DOM.imageLoader.defaultHeight,w:a.width/DOM.imageLoader.defaultWidth,h:a.height/DOM.imageLoader.defaultHeight})});
|
process=function(){if(this instanceof HTMLImageElement){console.time("PROCESS");this.src!=last&&(exec=!1,last=this.src);exec||(this.defaultWidth=this.width,this.defaultHeight=this.height,log("Image copied","[Canvas]"),track.update&&(zones=[],tracking.track(DOM.imageLoader,tracker),tracker.on("track",function(a){a.data.forEach(function(a){zones.push({x:a.x/DOM.imageLoader.defaultWidth,y:a.y/DOM.imageLoader.defaultHeight,w:a.width/DOM.imageLoader.defaultWidth,h:a.height/DOM.imageLoader.defaultHeight})});
|
||||||
log("Recognition done","[Tracking.js]");process.bind(DOM.imageLoader)()})),exec=!0);_CON.clearRect(0,0,_CAN.width,_CAN.height);filterManager.get("ratio").apply();for(var c in zones){var a=zones[c].x*this.width,b=zones[c].y*this.height,d=zones[c].w*this.width,e=zones[c].h*this.height;_CON.beginPath();_CON.moveTo(a,b);_CON.lineTo(a,b+e);_CON.lineTo(a+d,b+e);_CON.lineTo(a+d,b);_CON.lineTo(a,b);_CON.lineWidth=5;_CON.stroke()}console.timeEnd("PROCESS")}};
|
log("Recognition done","[Tracking.js]");process.bind(DOM.imageLoader)()})),exec=!0);_CON.clearRect(0,0,_CAN.width,_CAN.height);filterManager.get("ratio").apply();filterManager.get("contrast").apply();for(var c in zones){var a=zones[c].x*this.width,b=zones[c].y*this.height,d=zones[c].w*this.width,e=zones[c].h*this.height;_CON.beginPath();_CON.moveTo(a,b);_CON.lineTo(a,b+e);_CON.lineTo(a+d,b+e);_CON.lineTo(a+d,b);_CON.lineTo(a,b);_CON.lineWidth=5;_CON.stroke()}console.timeEnd("PROCESS")}};
|
||||||
filterManager=new ReactiveFilterManager(DOM.imageLoader,_CAN,process);filterManager.add("ratio",reactiveRatio);Controller.addFolder("Image Ratio");Controller.add(filterManager.get("ratio"),"width",0,2).listen();Controller.add(filterManager.get("ratio"),"height",0,2).listen();iL=new ImageLoader(DOM.imageLoader,init,process);
|
filterManager=new ReactiveFilterManager(DOM.imageLoader,_CAN,process);filterManager.add("ratio",reactiveRatio);filterManager.add("contrast",reactiveContrast);Controller.addFolder("Image Ratio");Controller.add(filterManager.get("ratio"),"width",0,2).listen();Controller.add(filterManager.get("ratio"),"height",0,2).listen();Controller.addFolder("Image Processing");Controller.add(filterManager.get("contrast"),"contrast",0,100).listen();iL=new ImageLoader(DOM.imageLoader,init,process);
|
||||||
|
|
Loading…
Reference in New Issue