2016-10-05 13:04:48 +00:00
|
|
|
/* [0] Initialisation
|
|
|
|
=========================================================*/
|
|
|
|
/* (1) Elements du DOM */
|
2016-10-05 06:30:30 +00:00
|
|
|
var DOM = {
|
2016-10-05 10:13:48 +00:00
|
|
|
body: $('body'),
|
2016-10-05 13:04:48 +00:00
|
|
|
canvas: $('canvas'),
|
|
|
|
imageLoader: $('#image-loader')
|
2016-10-05 06:30:30 +00:00
|
|
|
};
|
2016-10-05 08:49:25 +00:00
|
|
|
|
2016-10-05 13:04:48 +00:00
|
|
|
/* (2) dat.GUI initialization */
|
2016-10-05 10:13:48 +00:00
|
|
|
var Controller = new dat.GUI();
|
2016-10-05 08:49:25 +00:00
|
|
|
|
2016-10-05 13:04:48 +00:00
|
|
|
/* (3) Canvas initialisation */
|
|
|
|
var _CAN = DOM.canvas;
|
|
|
|
_CAN.width = _CAN.height = 1000;
|
|
|
|
var _CON = _CAN.getContext('2d');
|
|
|
|
|
|
|
|
/* (4) Image Loader + Définitions */
|
|
|
|
var iL;
|
|
|
|
|
|
|
|
var process;
|
|
|
|
|
2016-10-05 08:49:25 +00:00
|
|
|
|
2016-10-05 10:13:48 +00:00
|
|
|
|
|
|
|
/* [1] Initialisation
|
|
|
|
=========================================================*/
|
|
|
|
var init = function(){
|
2016-10-05 13:04:48 +00:00
|
|
|
/* (1) Image par défaut */
|
2016-10-05 10:13:48 +00:00
|
|
|
this.src = 'front:male:1.jpg';
|
|
|
|
|
2016-10-05 13:04:48 +00:00
|
|
|
/* (2) Attachement de dat.GUI */
|
|
|
|
Controller.addFolder('image source');
|
|
|
|
Controller.add(this, 'src', this._images).listen();
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* (x) Variables globales
|
|
|
|
---------------------------------------------------------*/
|
|
|
|
var pixelRatio = {
|
|
|
|
|
|
|
|
initialized: false,
|
|
|
|
|
|
|
|
init: function(){
|
|
|
|
if( this.initialized )
|
|
|
|
return;
|
|
|
|
|
|
|
|
this.initialized = true;
|
|
|
|
|
|
|
|
|
|
|
|
this._w = this._h = 0.9;
|
|
|
|
this.width = this.height = null;
|
|
|
|
|
|
|
|
this.__defineGetter__('width', function(){ return this._w; });
|
|
|
|
this.__defineGetter__('height', function(){ return this._h; });
|
|
|
|
|
|
|
|
this.__defineSetter__('width', function(v){ this._w = v; process.bind(iL._wrapper)(); });
|
|
|
|
this.__defineSetter__('height', function(v){ this._h = v; process.bind(iL._wrapper)(); });
|
|
|
|
|
|
|
|
|
2016-10-05 13:05:45 +00:00
|
|
|
Controller.addFolder('Image Ratio');
|
2016-10-05 13:04:48 +00:00
|
|
|
Controller.add(this, 'width', 0, 2).listen();
|
|
|
|
Controller.add(this, 'height', 0, 2).listen();
|
|
|
|
}
|
2016-10-05 10:13:48 +00:00
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
/* [2] Routine principale
|
|
|
|
=========================================================*/
|
2016-10-05 13:04:48 +00:00
|
|
|
var count = 0;
|
|
|
|
process = function(){
|
2016-10-05 10:13:48 +00:00
|
|
|
console.warn('PROCESS');
|
|
|
|
|
2016-10-05 13:04:48 +00:00
|
|
|
if( !count ){
|
|
|
|
this.defaultWidth = this.width;
|
|
|
|
this.defaultHeight = this.height;
|
|
|
|
log('Image copied', '[Canvas]');
|
|
|
|
}
|
|
|
|
count++;
|
|
|
|
|
|
|
|
/* [0] On efface le Canvas
|
|
|
|
=========================================================*/
|
|
|
|
_CON.clearRect(0, 0, _CAN.width, _CAN.height);
|
|
|
|
|
|
|
|
/* [1] Copie sur le canvas
|
|
|
|
=========================================================*/
|
|
|
|
pixelRatio.init();
|
|
|
|
|
|
|
|
this.width = this.defaultWidth * (pixelRatio.width * _CAN.width / this.defaultWidth);
|
|
|
|
this.height = this.defaultHeight * (pixelRatio.height * _CAN.height / this.defaultHeight);
|
|
|
|
|
|
|
|
_CON.drawImage(this, 0, 0, this.width, this.height);
|
2016-10-05 10:13:48 +00:00
|
|
|
|
2016-10-05 08:49:25 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* [x] Chargement image
|
|
|
|
=========================================================*/
|
2016-10-05 13:04:48 +00:00
|
|
|
iL = new ImageLoader( DOM.imageLoader, init, process );
|