JS/draw_image.js

   1 var CANVAS_SIZE = 512;
   2
   3 function Display(_canvas,_context,_file,_image,_sorce){
   4         this.canvas = _canvas;
   5         this.context = _context;
   6         this.file = _file;
   7         this.image = _image;
   8         this.sorce = _sorce;
   9         this.magnification = 1;
  10         this.movx = 0;
  11         this.movy = 0;
  12         this.angle = 0;
  13 }
  14
  15 var display1 = new Display();//1
  16 var display2 = new Display();//2
  17 var display3 = new Display();//3
  18 var display4 = new Display();//4
  19
  20 function main(){
  21         display1.canvas = document.getElementById('canvas');
  22         display2.canvas = document.getElementById('canvas2');
  23         display3.canvas = document.getElementById('canvas3');
  24         display4.canvas = document.getElementById('canvas4');
  25         display1.context = display1.canvas.getContext('2d');
  26         display2.context = display2.canvas.getContext('2d');
  27         display3.context = display3.canvas.getContext('2d');
  28         display4.context = display4.canvas.getContext('2d');
  29         display1.canvas.height = CANVAS_SIZE;
  30         display1.canvas.width = CANVAS_SIZE;
  31         display2.canvas.height = CANVAS_SIZE;
  32         display2.canvas.width = CANVAS_SIZE;
  33         display3.canvas.height = CANVAS_SIZE;
  34         display3.canvas.width = CANVAS_SIZE;
  35         display4.canvas.height = CANVAS_SIZE;
  36         display4.canvas.width = CANVAS_SIZE;
  37 }
  38
  39 //ローカルファイルの読み取り
  40 function loadFile(files,number){
  41     file = files[0];
  42     if(number == 1){
  43         display1.file = file;
  44         display1.context.clearRect(0,0,display1.canvas.width,display1.canvas.height);
  45             magnification_init(display1);
  46             rotation_init(display1);
  47             move_params_init(display1);
  48             displayImage(display1);
  49     }else if(number == 2){
  50         display2.file = file;
  51         display2.context.clearRect(0,0,display2.canvas.width,display2.canvas.height);
  52             magnification_init(display2);
  53             rotation_init(display2);
  54             move_params_init(display2);
  55             displayImage(display2);
  56     }
  57 }
  58
  59 //ファイルを選択でローカルから画像ファイルを読み込んでcanvasに描画する
  60 function displayImage(display){
  61     var width;
  62     var height;
  63     var left;
  64     var to;
  65     var imageAspect=0;
  66     var image = new Image();
  67     var reader = new FileReader();
  68
  69     if(!display.file){//display4に対する描画
  70         console.log("no file");
  71                 //canvasのアンチエイリアスを無効
  72                 display.context.mozImageSmoothingEnabled = false;
  73                 display.context.webkitImageSmoothingEnabled = false;
  74                 display.context.msImageSmoothingEnabled = false;
  75                 display.context.imageSmoothingEnabled = false
  76
  77             /*
  78             imageAspect = image.width / image.height;
  79             if (imageAspect >= 1) { //画像が横長
  80                 left = 0;
  81                 width = display.canvas.width;
  82                 height = display.canvas.height / imageAspect;
  83                 to = (display.canvas.height - height) / 2;
  84             } else { //画像が縦長
  85                 to = 0;
  86                 width = display.canvas.width * imageAspect;
  87                 height = display.canvas.height;
  88                 left = (display.canvas.width - width) / 2;
  89             }
  90                 */
  91             //ファイルアップロード2回目以降のcanvasの初期化
  92             display.context.clearRect(0,0,display.canvas.width,display.canvas.height);
  93             /****************変換適用***********************************************/
  94             display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2));//コンテキストに対する効果の始点を中心に移動
  95             display.context.scale(display.magnification,display.magnification);//倍率をコンテキストに反映
  96             display.context.rotate(display.angle / 180 * Math.PI);//回転をコンテキストに反映
  97             display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
  98             /**************************************************************************/
  99
 100             //画像をアスペクト比を維持して中心に表示(描画時は効果を元の位置に戻す)
 101             display.context.drawImage(display3.canvas, 0, 0, display.canvas.width, display.canvas.height, display.movx, display.movy,display.canvas.width, display.canvas.height);
 102
 103             /*****************変換調整***********************************************/
 104             display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2)); //コンテキストに対する効果の始点を中心に移動
 105             display.context.scale(1 / display.magnification,1 / display.magnification);//画像の倍率の初期化
 106             display.context.rotate(-1 * display.angle / 180 * Math.PI);//角度の初期化
 107             display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
 108             /****************************************************************************/
 109     }else{
 110         console.log("no image");
 111         reader.onload = function(event){
 112                 image.onload = function(){
 113
 114                     //canvasのアンチエイリアスを無効
 115                     display.context.mozImageSmoothingEnabled = false;
 116                     display.context.webkitImageSmoothingEnabled = false;
 117                     display.context.msImageSmoothingEnabled = false;
 118                     display.context.imageSmoothingEnabled = false
 119
 120                     imageAspect = image.width / image.height;
 121                     if (imageAspect >= 1) { //画像が横長
 122                         left = 0;
 123                         width = display.canvas.width;
 124                         height = display.canvas.height / imageAspect;
 125                         to = (display.canvas.height - height) / 2;
 126                     } else { //画像が縦長
 127                         to = 0;
 128                         width = display.canvas.width * imageAspect;
 129                         height = display.canvas.height;
 130                         left = (display.canvas.width - width) / 2;
 131                     }
 132
 133                     //ファイルアップロード2回目以降のcanvasの初期化
 134                     display.context.clearRect(0,0,display.canvas.width,display.canvas.height);
 135
 136                     /****************変換適用***********************************************/
 137                     display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2));//コンテキストに対する効果の始点を中心に移動
 138                     display.context.scale(display.magnification,display.magnification);//倍率をコンテキストに反映
 139                     display.context.rotate(display.angle / 180 * Math.PI);//回転をコンテキストに反映
 140                     display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
 141                     /**************************************************************************/
 142
 143                     //画像をアスペクト比を維持して中心に表示(描画時は効果を元の位置に戻す)
 144                     display.context.drawImage(image, 0, 0, image.width, image.height, left+display.movx, to-display.movy, width, height);
 145
 146                     /*****************変換調整***********************************************/
 147                     display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2)); //コンテキストに対する効果の始点を中心に移動
 148                     display.context.scale(1 / display.magnification,1 / display.magnification);//画像の倍率の初期化
 149                     display.context.rotate(-1 * display.angle / 180 * Math.PI);//角度の初期化
 150                     display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
 151                     /****************************************************************************/
 152                 }
 153                 image.src = event.target.result;
 154             }
 155             if(display.file && display.file.type.match('image.*')){
 156                 reader.readAsDataURL(display.file);
 157             }else{
 158                 return false;
 159             }
 160         }
 161 }
 162
 163 //倍率の値を持ってくる関数
 164 function scaling(number){
 165         if(number == 1){
 166                 display1.magnification = parseFloat(form1.magnification.value);
 167                 displayImage(display1);
 168         }else if(number == 2){
 169                 display2.magnification = parseFloat(form2.magnification.value);
 170                 displayImage(display2);
 171         }else if(number == 4){
 172                 display4.magnification = parseFloat(form4.magnification.value);
 173                 displayImage(display4);
 174         }
 175 }
 176
 177 // 回転角を持ってくる関数
 178 function rotation(number){
 179     if(number == 1){
 180                 display1.angle = parseFloat(form1.angle.value);
 181                 displayImage(display1);
 182         }else if(number == 2){
 183                 display2.angle = parseFloat(form2.angle.value);
 184                 displayImage(display2);
 185         }
 186 }
 187
 188  //平行移動のパラメータを持ってくる関数
 189 function moving(number){
 190     if(number == 1){
 191                 display1.movx = parseFloat(form1.movex.value);
 192                 display1.movy = parseFloat(form1.movey.value);
 193                 displayImage(display1);
 194         }else if(number == 2){
 195                 display2.movx = parseFloat(form2.movex.value);
 196                 display2.movy = parseFloat(form2.movey.value);
 197                 displayImage(display2);
 198         }else if(number == 4){
 199                 display4.movx = parseFloat(form4.movex.value);
 200                 display4.movy = parseFloat(form4.movey.value);
 201                 displayImage(display4);
 202         }
 203 }
 204
 205 //回転角を０に戻す関数
 206 function rotation_init(number,display){
 207         if(number == 1){
 208                 form1.angle.value = 0;
 209             display.angle = parseFloat(form1.angle.value);
 210         }else if(number == 2){
 211                 form2.angle.value = 0;
 212                 display.angle = parseFloat(form2.angle.value);
 213         }
 214 }
 215
 216 //倍率を１に戻す関数
 217 function magnification_init(number,display){
 218         if(number == 1){
 219                 form1.magnification.value = 1.00;
 220         display.magnification = parseFloat(form1.magnification.value);
 221         }else if(number == 2){
 222                 form2.magnification.value = 1.00;
 223         display.magnification = parseFloat(form2.magnification.value);
 224         }else if(number == 4){
 225                 form4.magnification.value = 1.00;
 226         display.magnification = parseFloat(form4.magnification.value);
 227         }
 228 }
 229
 230 //平行移動パラメータの初期化
 231 function move_params_init(number,display){
 232         if(number == 1){
 233                 form1.movex.value = 0;
 234             form1.movey.value = 0;
 235             display.movx = parseFloat(form1.movex.value);
 236             display.movy = parseFloat(form1.movey.value);
 237         }else if(number == 2){
 238                 form2.movex.value = 0;
 239             form2.movey.value = 0;
 240             display.movx = parseFloat(form2.movex.value);
 241             display.movy = parseFloat(form2.movey.value);
 242         }else if(number == 4){
 243                 form4.movex.value = 0;
 244             form4.movey.value = 0;
 245             display.movx = parseFloat(form4.movex.value);
 246             display.movy = parseFloat(form4.movey.value);
 247         }
 248 }
 249
 250 function reseting(number){
 251         if(number == 1){
 252                 move_params_init(number,display1);
 253             rotation_init(number,display1);
 254             magnification_init(number,display1);
 255             displayImage(display1);
 256         }else if(number == 2){
 257                 move_params_init(number,display2);
 258             rotation_init(number,display2);
 259             magnification_init(number,display2);
 260             displayImage(display2);
 261         }else if(number == 4){
 262                 move_params_init(number,display4);
 263             magnification_init(number,display4);
 264             displayImage(display4);
 265
 266         }
 267 }
 268
 269
 270 /******* WITs *********************************************************** vem ********************
 271 ******************* WITs ****************************************** vem ******** vem *************
 272 vem ************************ WITs **************************** vem ******************* vem *******
 273 ****** vem ***************************** WITs ********* vem ****************************** vem ***
 274 *************** vem **************************** vem WITs ************************************ vem
 275 ************************ vem ************* vem ***************** WITs ****************************
 276 ********************************* vem ***************************************** WITs ************/
 277
 278 function color(){
 279
 280         var image = display1.context.getImageData(0,0,display1.canvas.width,display1.canvas.height);
 281         var image2 = display2.context.getImageData(0,0,display2.canvas.width,display2.canvas.height);
 282         var image3 = display3.context.createImageData(display3.canvas.width,display3.canvas.height);
 283
 284         var image_rgba = image.data;
 285         var image2_rgba = image2.data;
 286         var image3_rgba = image3.data;
 287
 288         image_rgba = color_change(image_rgba, 1);
 289         image2_rgba = color_change(image2_rgba, 2);
 290         image3_rgba = make_new_Image(image_rgba, image2_rgba, image3_rgba);
 291
 292         display3.context.putImageData(image3, 0, 0);
 293         displayImage(display4);
 294 }
 295
 296 //ピクセル配列の値(色情報)の書き換え
 297 function color_change(image_rgba, mode){
 298         var max, min;
 299         var R,G,B;
 300         var H;
 301         var before_color,after_color;
 302         var diff_color;
 303
 304         //canvas選択　1-display1のcanvas ,2-display2のcanvas
 305         if(mode == 1){
 306                 before_color = parseInt(color_form.before_color.value);
 307                 after_color = parseInt(color_form.after_color.value);
 308         }else if(mode == 2){
 309                 before_color = parseInt(color_form.before_color2.value);
 310                 after_color = parseInt(color_form.after_color2.value);
 311         }
 312         diff_color = after_color - before_color;
 313
 314         /**************RGB->HSV*******************************/
 315         for (var i = 0; i < image_rgba.length ; i++){
 316                 R = image_rgba[i * 4] / 255;//RGBAの値は0-255で与えられている
 317                 G = image_rgba[i * 4 + 1] / 255;
 318                 B = image_rgba[i * 4 + 2] / 255;
 319
 320                 if(R == G && G == B){
 321                         continue;
 322                 }else if(R >= G && R >= B){
 323                         if(G >= B){
 324                                 max = R;
 325                                 min = B;
 326                         }else if(B > G){
 327                                 max = R;
 328                                 min = G;
 329                         }
 330                 }else if(G >= R && G >= B){
 331                         if(R >= B){
 332                                 max = G;
 333                                 min = B;
 334                         }else if(B > R){
 335                                 max = G;
 336                                 min = R;
 337                         }
 338                 }else if(B >= R && B >= G){
 339                         if(R >= G){
 340                                 max = B;
 341                                 min = G;
 342                         }else if(G > R){
 343                                 max = B;
 344                                 min = R;
 345                         }
 346                 }
 347
 348                 if(max == R){
 349                         H = 60 * (G - B)/(max - min);
 350                         H %= 360;
 351                 }else if(max == G){
 352                         H = (60 * (B - R) / (max - min)) + 120;
 353                         H %= 360;
 354                 }else if(max == B){
 355                         H = (60 * (R - G) / (max - min)) + 240;
 356                         H %= 360;
 357                 }
 358
 359                 /*****************color change*********************/
 360                 //値書き換え（色相変換）
 361                 if (before_color != 1 && after_color != 1){
 362                         if(H >= (before_color-1) * 60 -30 && H < (before_color * 60 -30)){
 363                                 H = H + 60 * diff_color;
 364                         }
 365                 }else if(before_color == 1 && after_color != 1){
 366                         if(H >= 0 && H < 30){
 367                                 H = H + 60 * diff_color;
 368                         }else if(H >= 330 && H <= 360){
 369                                 H = H - 60 * (6 - diff_color);
 370                         }
 371                 }else if(before_color != 1 && after_color == 1){
 372                         if(H >= (before_color - 1) * 60 -30 && H < (before_color - 1) * 60 ){
 373                                 H = H + 60 * (6 + diff_color);
 374                         }else if(H >= (before_color - 1) * 60 && H < before_color * 60 -30){
 375                                 H = H + 60 * diff_color;
 376                         }
 377                 }else{
 378                         continue;
 379                 }
 380
 381                 /***********************HSV->RGB************************/
 382                 if(H >= 0 &&  H < 60){
 383                         R = max;
 384                         G = (H / 60) * (max - min) + min;
 385                         B = min;
 386                 }else if(H >= 60 && H < 120){
 387                         R = -((H-120) / 60) * (max - min) + min;
 388                         G = max;
 389                         B = min;
 390                 }else if(H >= 120 && H < 180){
 391                         R = min
 392                         G = max;
 393                         B = ((H-120) / 60) * (max - min) + min;
 394                 }else if(H >= 180 && H < 240){
 395                         R = min
 396                         G = -((H-240) / 60) * (max - min) + min;
 397                         B = max;
 398                 }else if(H >= 240 && H < 300){
 399                         R = ((H-240) / 60) * (max - min) + min;
 400                         G = min;
 401                         B = max;
 402                 }else if(H >= 300 && H <= 360){
 403                         R = max;
 404                         G = min;
 405                         B = (-(H-360) / 60) * (max - min) + min;
 406                 }else{
 407                         continue;
 408                 }
 409
 410                 image_rgba[i * 4] = R * 255;
 411                 image_rgba[i * 4 + 1] = G * 255;
 412                 image_rgba[i * 4 + 2] = B * 255;
 413
 414         }
 415         return image_rgba;
 416 }
 417
 418
 419 /*************create new image data*************/
 420         /*
 421         image_rgba[count * 4]           //R
 422         image_rgba[count * 4 + 1]       //G
 423         image_rgba[count * 4 + 2]       //B
 424         image_rgba[count * 4 + 3]       //A
 425
 426         image2_rgba[count * 4]          //R
 427         image2_rgba[count * 4 + 1]      //G
 428         image2_rgba[count * 4 + 2]      //B
 429         image2_rgba[count * 4 + 3]      //A
 430         */
 431 function make_new_Image(image_rgba, image2_rgba, image3_rgba){
 432
 433         var alpha = parseFloat(color_form.alpha.value);
 434         var beta = parseFloat(color_form.beta.value);
 435
 436         for(var count = 0; count < image3_rgba.length; count++){
 437                 image3_rgba[count * 4] = (image_rgba[count * 4] * alpha) + (image2_rgba[count * 4] * beta);
 438                 image3_rgba[count * 4 + 1] = (image_rgba[count * 4 + 1] * alpha) + (image2_rgba[count * 4 + 1] * beta);
 439                 image3_rgba[count * 4 + 2] = (image_rgba[count * 4 + 2] * alpha) + (image2_rgba[count * 4 + 2] * beta);
 440                 image3_rgba[count * 4 + 3] = (image_rgba[count * 4 + 3] * alpha) + (image2_rgba[count * 4 + 3] * beta);
 441                 //image3_rgba[count * 4 + 3] = 255;
 442         }
 443         return image3_rgba;
 444 }
 445
 446 function set_alpha(){
 447         var alpha = parseFloat(color_form.alpha.value);
 448         var beta = parseFloat(color_form.beta.value); //beta = 1 - alpha
 449         var comp = 1.00 - alpha
 450         color.beta.value = comp.toFixed(2);
 451 }
 452
 453 function set_beta(){
 454         var alpha = parseFloat(color_form.alpha.value);
 455         var beta = parseFloat(color_form.beta.value);
 456         var comp = 1.00 - beta;
 457         color.alpha.value = comp.toFixed(2);
 458 }
 459