From c422eb321536c9d6e945b1af739a9510baf498fb Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Fri, 7 Oct 2016 11:11:36 +0200 Subject: [PATCH] =?UTF-8?q?Code=20pour=20le=20contraste=20(algo=20=C3=A0?= =?UTF-8?q?=20faire)=20+=20exemple=20pour=20SDS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public_html/js/action-script.js | 10 +++--- public_html/js/lib/min/reactive-filter.js | 5 +-- public_html/js/lib/reactive-filter.js | 43 +++++++++++++++++++++-- public_html/js/min/action-script.js | 4 +-- 4 files changed, 51 insertions(+), 11 deletions(-) diff --git a/public_html/js/action-script.js b/public_html/js/action-script.js index 116da84..b93c8f2 100644 --- a/public_html/js/action-script.js +++ b/public_html/js/action-script.js @@ -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 ); diff --git a/public_html/js/lib/min/reactive-filter.js b/public_html/js/lib/min/reactive-filter.js index eda9cd0..a3a4ce3 100644 --- a/public_html/js/lib/min/reactive-filter.js +++ b/public_html/js/lib/min/reactive-filter.js @@ -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 (), 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 (), but "+ a.constructor.name+" received");this._canvas=b instanceof HTMLCanvasElement?b:null;if(!this._canvas)throw Error("Param 2 expected to be an HTMLCanvasElement (), 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)}}; diff --git a/public_html/js/lib/reactive-filter.js b/public_html/js/lib/reactive-filter.js index d4fe171..510482b 100644 --- a/public_html/js/lib/reactive-filter.js +++ b/public_html/js/lib/reactive-filter.js @@ -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 `` */ + o.context.putImageData(imageData, 0, 0); +}; diff --git a/public_html/js/min/action-script.js b/public_html/js/min/action-script.js index 1ef860f..bbad5b5 100644 --- a/public_html/js/min/action-script.js +++ b/public_html/js/min/action-script.js @@ -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);