Code pour le contraste (algo à faire) + exemple pour SDS

This commit is contained in:
xdrm-brackets 2016-10-07 11:11:36 +02:00
parent a096260662
commit c422eb3215
4 changed files with 51 additions and 11 deletions

View File

@ -66,7 +66,6 @@ process = function(){
console.time('PROCESS');
/* [0.0] Gestion du changement d'image
=========================================================*/
if( this.src != last ){
@ -129,8 +128,8 @@ process = function(){
{ /* [3] Filtrage pre-processing
=========================================================*/
/* (1) Contraste */
filterManager.get('contrast').apply();
}
@ -165,7 +164,6 @@ process = function(){
};
{ /* [3] Gestion des `ReactiveFilter`
=========================================================*/
/* (1) Création du Manager */
@ -173,16 +171,18 @@ process = function(){
/* (2) Ajout des filtres */
filterManager.add('ratio', reactiveRatio);
filterManager.add('contrast', reactiveContrast);
/* (3) On attache tout à dat.GUI */
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();
}
/* [x] Chargement image
=========================================================*/
iL = new ImageLoader( DOM.imageLoader, init, process );

View File

@ -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={}};
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});
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)}};

View File

@ -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 });
reactiveRatio.apply = function(){
/* [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);
};
/************************************************
**** 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);
};

View File

@ -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");
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})});
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")}};
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);
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);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);