JS/draw_imagekai.js

   1 {
   2 const CANVAS_SIZE = 512;
   3 //座標取得の際、元の画像の大きさをCANVAS_SIZEの寸法でリサイズしているからIMAZE_SIZEを記憶して、取得する座標値を正確にする
   4 var IMAGE_SIZE;//合成画像におけるIMAZE_SIZEはdisplay1に依存する仕様
   5
   6
   7 function Display(_canvas,_context,_file,_image,_sorce,_number,_id){
   8         this.canvas = _canvas;
   9         this.context = _context;
  10         this.file = _file;
  11         this.image = _image;
  12         this.sorce = _sorce;
  13         this.thumbnail_number = _number;
  14         this.thumbnail_canvas_id = _id;
  15         this.magnification = 1;
  16         this.movx = 0;
  17         this.movy = 0;
  18         this.angle = 0;
  19         this.config_x = "No Data.";
  20         this.config_y = "No Data.";
  21         this.config_z = "No Data.";
  22         this.config_alfa = "No Data.";
  23         this.config_beta = "No Data.";
  24         this.config_offsetX = "No Data.";
  25         this.config_offsetY = "No Data.";
  26         this.config_angle = "No Data.";
  27 }
  28
  29 var display1 = new Display();  // LM
  30 var display2 = new Display();  // EM
  31 var display3 = new Display();  // Blend[Color]
  32 var display4 = new Display();  // Scale&MoveXY
  33
  34 var thumbnails = [];           //サムネイルの配列
  35
  36 //main HTMLがロードされると呼び出される
  37 function main(){
  38         display1.canvas = document.getElementById('canvas');
  39         display2.canvas = document.getElementById('canvas2');
  40         display3.canvas = document.getElementById('canvas3');
  41         display4.canvas = document.getElementById('canvas4');
  42
  43         display1.context = display1.canvas.getContext('2d');
  44         display2.context = display2.canvas.getContext('2d');
  45         display3.context = display3.canvas.getContext('2d');
  46         display4.context = display4.canvas.getContext('2d');
  47
  48         display1.canvas.height = CANVAS_SIZE;
  49         display1.canvas.width = CANVAS_SIZE;
  50         display2.canvas.height = CANVAS_SIZE;
  51         display2.canvas.width = CANVAS_SIZE;
  52         display3.canvas.height = CANVAS_SIZE;
  53         display3.canvas.width = CANVAS_SIZE;
  54         display4.canvas.height = CANVAS_SIZE;
  55         display4.canvas.width = CANVAS_SIZE;
  56 }
  57
  58 //ローカルファイルの読み取り
  59 function loadFile(files,number){
  60     file = files[0];
  61     if(number == -1){
  62         display1.file = file;
  63         display1.context.clearRect(0,0,display1.canvas.width,display1.canvas.height);
  64             magnification_init(display1);
  65             rotation_init(display1);
  66             move_params_init(display1);
  67             displayImage(display1);
  68     }else if(number != -1){
  69         thumbnails[number-1].file = file;
  70         make_canvas(thumbnails[number-1]);
  71     }
  72 }
  73
  74 //ファイルを選択でローカルから画像ファイルを読み込んでcanvasに描画する
  75 function displayImage(display){
  76     var width;
  77     var height;
  78     var left;
  79     var to;
  80     var imageAspect=0;
  81     var image = new Image();
  82     var reader = new FileReader();
  83
  84     if(!display.file){//display4に対する描画
  85                 //canvasのアンチエイリアスを無効
  86                 display.context.mozImageSmoothingEnabled = false;
  87                 display.context.webkitImageSmoothingEnabled = false;
  88                 display.context.msImageSmoothingEnabled = false;
  89                 display.context.imageSmoothingEnabled = false;
  90
  91             /*
  92             imageAspect = image.width / image.height;
  93             if (imageAspect >= 1) { //画像が横長
  94                 left = 0;
  95                 width = display.canvas.width;
  96                 height = display.canvas.height / imageAspect;
  97                 to = (display.canvas.height - height) / 2;
  98             } else { //画像が縦長
  99                 to = 0;
 100                 width = display.canvas.width * imageAspect;
 101                 height = display.canvas.height;
 102                 left = (display.canvas.width - width) / 2;
 103             }
 104                 */
 105             //ファイルアップロード2回目以降のcanvasの初期化
 106             display.context.clearRect(0,0,display.canvas.width,display.canvas.height);
 107             /****************変換適用***********************************************/
 108             display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2));  //コンテキストに対する効果の始点を中心に移動
 109             display.context.scale(display.magnification,display.magnification);                                                                 //倍率をコンテキストに反映
 110             display.context.rotate(display.angle / 180 * Math.PI);                                                                                              //回転をコンテキストに反映
 111             display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
 112             /**************************************************************************/
 113
 114             //画像をアスペクト比を維持して中心に表示(描画時は効果を元の位置に戻す)
 115             display.context.drawImage(display3.canvas, 0, 0, display.canvas.width, display.canvas.height, display.movx/display.magnification, display.movy/display.magnification, display.canvas.width, display.canvas.height);
 116
 117             /*****************変換調整***********************************************/
 118             display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2));  //コンテキストに対する効果の始点を中心に移動
 119             display.context.scale(1 / display.magnification,1 / display.magnification);                                                 //画像の倍率の初期化
 120             display.context.rotate(-1 * display.angle / 180 * Math.PI);                                                                                 //角度の初期化
 121             display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
 122             /****************************************************************************/
 123     }else{
 124         reader.onload = function(event){
 125                 image.onload = function(){
 126
 127                     //canvasのアンチエイリアスを無効
 128                     display.context.mozImageSmoothingEnabled = false;
 129                     display.context.webkitImageSmoothingEnabled = false;
 130                     display.context.msImageSmoothingEnabled = false;
 131                     display.context.imageSmoothingEnabled = false;
 132
 133                     if(display == display1){
 134                         if(image.width > image.height){
 135                                 IMAGE_SIZE = image.width;
 136                         }else{
 137                                 IMAGE_SIZE = image.height;
 138                         }
 139                     }
 140
 141                     imageAspect = image.width / image.height;
 142                     if (imageAspect >= 1) { //画像が横長
 143                         left = 0;
 144                         width = display.canvas.width;
 145                         height = display.canvas.height / imageAspect;
 146                         to = (display.canvas.height - height) / 2;
 147                     } else {               //画像が縦長
 148                         to = 0;
 149                         width = display.canvas.width * imageAspect;
 150                         height = display.canvas.height;
 151                         left = (display.canvas.width - width) / 2;
 152                     }
 153
 154                     //ファイルアップロード2回目以降のcanvasの初期化
 155                     display.context.clearRect(0,0,display.canvas.width,display.canvas.height);
 156
 157                     /****************変換適用***********************************************/
 158                     display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2));  //コンテキストに対する効果の始点を中心に移動
 159                     display.context.scale(display.magnification,display.magnification);                                                                 //倍率をコンテキストに反映
 160                     display.context.rotate(display.angle / 180 * Math.PI);                                                                                              //回転をコンテキストに反映
 161                     display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
 162                     /**************************************************************************/
 163
 164                     //画像をアスペクト比を維持して中心に表示(描画時は効果を元の位置に戻す)
 165                     display.context.drawImage(image, 0, 0, image.width, image.height, (left+(display.movx)), (to-(display.movy)), width, height);
 166
 167                     /*****************変換調整***********************************************/
 168                     display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2));  //コンテキストに対する効果の始点を中心に移動
 169                     display.context.scale(1 / display.magnification,1 / display.magnification);                                                 //画像の倍率の初期化
 170                     display.context.rotate(-1 * display.angle / 180 * Math.PI);                                                                                 //角度の初期化
 171                     display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
 172                     /****************************************************************************/
 173                     if(display == display2 && display2.thumbnail_number){
 174                         Display2ToThumbnails(display.thumbnail_number); //Display2のサムネイルごとにパラメータを保持
 175                     }
 176                 }
 177                 image.src = event.target.result;
 178             }
 179             if(display.file && display.file.type.match('image.*')){
 180                 reader.readAsDataURL(display.file);
 181             }else{
 182                 return false;
 183             }
 184         }
 185 }
 186
 187 //倍率の値を持ってくる関数
 188 function scaling(number){
 189         if(number == 1){
 190                 display1.magnification = parseFloat(form1.magnification.value);
 191                 displayImage(display1);
 192         }else if(number == 2){
 193                 display2.magnification = parseFloat(form2.magnification.value);
 194                 displayImage(display2);
 195         }else if(number == 4){
 196                 display4.magnification = parseFloat(form4.magnification.value);
 197                 displayImage(display4);
 198         }
 199 }
 200
 201 // 回転角を持ってくる関数
 202 function rotation(number){
 203     if(number == 1){
 204                 display1.angle = parseFloat(form1.angle.value);
 205                 displayImage(display1);
 206         }else if(number == 2){
 207                 display2.angle = parseFloat(form2.angle.value);
 208                 displayImage(display2);
 209         }
 210 }
 211
 212  //平行移動のパラメータを持ってくる関数
 213 function moving(number){
 214     if(number == 1){
 215         var pixel_length = d1_unit.pixel_length.value; //[unit]/px
 216         var order = d1_unit.order.value;        //[unit]の次数
 217         var orderx = form1.orderx.value;        //movexの次数
 218         var ordery = form1.ordery.value;        //moveyの次数
 219
 220                 display1.movx = parseFloat(form1.movex.value)/pixel_length * Math.pow(10,-orderx-(-order));//px
 221                 display1.movy = parseFloat(form1.movey.value)/pixel_length * Math.pow(10,-ordery-(-order));
 222                 displayImage(display1);
 223         }else if(number == 2){
 224                 var pixel_length = d2_unit.pixel_length.value; //[unit]/px
 225         var order = d2_unit.order.value;        //[unit]の次数
 226         var orderx = form2.orderx.value;        //movexの次数
 227         var ordery = form2.ordery.value;        //moveyの次数
 228
 229                 display2.movx = parseFloat(form2.movex.value)/pixel_length * Math.pow(10,-orderx-(-order));
 230                 display2.movy = parseFloat(form2.movey.value)/pixel_length * Math.pow(10,-ordery-(-order));
 231                 displayImage(display2);
 232         }else if(number == 4){
 233                 var pixel_length = d4_unit.pixel_length.value; //[unit]/px
 234         var order = d4_unit.order.value;        //[unit]の次数
 235         var orderx = form4.orderx.value;        //movexの次数
 236         var ordery = form4.ordery.value;        //moveyの次数
 237
 238                 display4.movx = parseFloat(form4.movex.value)/pixel_length * Math.pow(10,-orderx-(-order));
 239                 display4.movy = parseFloat(form4.movey.value)/pixel_length * Math.pow(10,-ordery-(-order));
 240                 displayImage(display4);
 241         }
 242 }
 243
 244 //回転角を０に戻す関数
 245 function rotation_init(number,display){
 246         if(number == 1){
 247                 form1.angle.value = 0;
 248             display.angle = parseFloat(form1.angle.value);
 249         }else if(number == 2){
 250                 form2.angle.value = 0;
 251                 display.angle = parseFloat(form2.angle.value);
 252         }
 253 }
 254
 255 //倍率を１に戻す関数
 256 function magnification_init(number,display){
 257         if(number == 1){
 258                 form1.magnification.value = 1.00;
 259         display.magnification = parseFloat(form1.magnification.value);
 260         }else if(number == 2){
 261                 form2.magnification.value = 1.00;
 262         display.magnification = parseFloat(form2.magnification.value);
 263         }else if(number == 4){
 264                 form4.magnification.value = 1.00;
 265         display.magnification = parseFloat(form4.magnification.value);
 266         }
 267 }
 268
 269 //平行移動パラメータの初期化
 270 function move_params_init(number,display){
 271         if(number == 1){
 272                 form1.movex.value = 0;
 273             form1.movey.value = 0;
 274             display.movx = parseFloat(form1.movex.value);
 275             display.movy = parseFloat(form1.movey.value);
 276         }else if(number == 2){
 277                 form2.movex.value = 0;
 278             form2.movey.value = 0;
 279             display.movx = parseFloat(form2.movex.value);
 280             display.movy = parseFloat(form2.movey.value);
 281         }else if(number == 4){
 282                 form4.movex.value = 0;
 283             form4.movey.value = 0;
 284             display.movx = parseFloat(form4.movex.value);
 285             display.movy = parseFloat(form4.movey.value);
 286         }
 287 }
 288
 289 //全パラメータのリセット
 290 function reseting(number){
 291         if(number == 1){
 292                 move_params_init(number,display1);
 293             rotation_init(number,display1);
 294             magnification_init(number,display1);
 295             displayImage(display1);
 296         }else if(number == 2){
 297                 move_params_init(number,display2);
 298             rotation_init(number,display2);
 299             magnification_init(number,display2);
 300             displayImage(display2);
 301         }else if(number == 4){
 302                 move_params_init(number,display4);
 303             magnification_init(number,display4);
 304             displayImage(display4);
 305         }
 306 }
 307
 308 //テーブルに画像を受け付ける行を追加
 309 function add_table(){
 310         var tbody = document.getElementById("tbody_thumbnail_files");
 311         var tr = tbody.rows;
 312         if(tr.length > 0 && !thumbnails[tr.length - 1].file){
 313                 window.alert("Please upload image file at No." + (tr.length));
 314                 return false;
 315         }
 316
 317         var new_tr = tbody.insertRow(-1);
 318         var row_index = new_tr.rowIndex;
 319
 320         var number_td = new_tr.insertCell(-1);
 321         var imageflie_td = new_tr.insertCell(-1);
 322         var configflie_td = new_tr.insertCell(-1);
 323         var delete_button = new_tr.insertCell(-1);
 324
 325         thumbnail_add(row_index);
 326
 327         number_td.innerHTML = thumbnails[row_index - 1].thumbnail_number;
 328         imageflie_td.innerHTML = "<input type='file' accept='image/*' onChange='loadFile(this.files,this.parentNode.parentNode.rowIndex);'>";
 329         configflie_td.innerHTML = "<input type='file' accept='text/*' onChange='config_upload(this.files, this.parentNode.parentNode.rowIndex)'>"
 330         delete_button.innerHTML = "<input type='button' value='del' onClick='delete_table(this.parentNode.parentNode.rowIndex)'>";
 331 }
 332
 333 //テーブルから行削除
 334 function delete_table(row_index){
 335         var tbody = document.getElementById("tbody_thumbnail_files");
 336         var row_length = tbody.rowIndex;
 337
 338         tbody.deleteRow(row_index - 1);
 339         thumbnail_del(row_index);
 340
 341         for(var j = 0; j <= thumbnails.length - row_index; j++){
 342                 var tr = tbody.rows[row_index + j - 1];
 343                 var number_td = tr.cells[0];
 344                 number_td.innerHTML = thumbnails[row_index + j - 1].thumbnail_number;
 345         }
 346         //console.log(thumbnails);
 347 }
 348
 349 //テーブル全消去
 350 function clear_table(){
 351         var tbody = document.getElementById("tbody_thumbnail_files");
 352     var row_length = tbody.rows.length;
 353
 354     for(var i = 0; i < Math.ceil(row_length / 2); i++){//6->3,7->4
 355         tbody.deleteRow(-1);
 356         if(tbody.rows.length != 0){//奇数用
 357                 tbody.deleteRow(-1);
 358         }
 359         thumbnail_clr(row_length - i - 1);
 360     }
 361 }
 362
 363 //画像のデータ保持のための配列に追加
 364 function thumbnail_add(row_index){
 365         var thumbnail = new Display();
 366         thumbnail.thumbnail_number = row_index;
 367         thumbnails.push(thumbnail);
 368         //console.log(thumbnails);
 369 }
 370
 371 //削除
 372 function thumbnail_del(row_index){
 373         var tbody = document.getElementById("thumbnail_canvas");
 374         var row_length = tbody.rows.length;
 375         if(row_index%2==1){
 376                 for(var i=Math.ceil(row_index/2); i<=row_length; i++){
 377                         tbody.deleteRow(-1);
 378                 }
 379         }else if(row_index%2==0){
 380                 for(var i=Math.ceil(row_index/2); i<row_length; i++){
 381                         tbody.deleteRow(-1);
 382                 }
 383                 tr = tbody.rows[Math.ceil(row_index/2) - 1];
 384                 tr.deleteCell(-1);
 385         }
 386         thumbnails.splice(row_index-1,1);
 387         for(var i=row_index; i<=thumbnails.length; i++){
 388                 thumbnails[i-1].thumbnail_number -= 1;
 389                 make_canvas(thumbnails[i-1]);
 390         }
 391 }
 392
 393 //全消去
 394 function thumbnail_clr(index){
 395         //thumbnails[index].context.clearRect(0,0,thumbnails[index].canvas.width,thumbnails[index].canvas.height);
 396         var tbody = document.getElementById("thumbnail_canvas");
 397         var tr = tbody.deleteRow(-1);//canvasを消去
 398
 399         thumbnails.pop();
 400         if(thumbnails.length != 0){//奇数用
 401                 thumbnails.pop();
 402         }
 403         //console.log(thumbnails);
 404 }
 405
 406 //サムネイルを生成
 407 function make_canvas(thumbnail){
 408
 409         var tbody = document.getElementById("thumbnail_canvas");
 410         var id = "canvas_" + thumbnail.thumbnail_number;
 411         thumbnail.thumbnail_canvas_id = id;
 412         //odd->行追加,　even->列追加
 413         if(thumbnail.thumbnail_number % 2 == 1){
 414                 var new_tr = tbody.insertRow(-1);
 415                 var odd_canvas_td = new_tr.insertCell(-1);
 416
 417                 odd_canvas_td.innerHTML = "<canvas id='" + id + "' style='width: 200px; height: 200px;' onClick='ThumbnailsToDisplay2(" + thumbnail.thumbnail_number +  ")'></canvas><br>" + thumbnail.thumbnail_number;
 418                 thumbnail.canvas = document.getElementById(id);
 419                 thumbnail.context = thumbnail.canvas.getContext('2d');
 420                 displayImage(thumbnail);
 421
 422         }else if(thumbnail.thumbnail_number % 2 == 0){
 423                 var tr = tbody.rows[thumbnail.thumbnail_number / 2 - 1];
 424                 var even_canvas_td = tr.insertCell(-1);
 425
 426                 even_canvas_td.innerHTML = "<canvas id='" + id + "' style='width: 200px; height: 200px;' onClick='ThumbnailsToDisplay2(" + thumbnail.thumbnail_number +  ")'></canvas><br>" + thumbnail.thumbnail_number;
 427                 thumbnail.canvas = document.getElementById(id);
 428                 thumbnail.context = thumbnail.canvas.getContext('2d');
 429                 displayImage(thumbnail);
 430         }
 431 }
 432
 433 //ThumbnailからクリックでDisplay2に反映
 434 function ThumbnailsToDisplay2(number){
 435         display2.file = thumbnails[number-1].file;
 436         display2.magnification = thumbnails[number-1].magnification;
 437         display2.angle = thumbnails[number-1].angle;
 438         display2.movx = thumbnails[number-1].movx;
 439         display2.movy = thumbnails[number-1].movy;
 440         display2.thumbnail_number = number;
 441         form2.magnification.value = thumbnails[number-1].magnification;
 442         form2.angle.value = thumbnails[number-1].angle;
 443         form2.movex.value = thumbnails[number-1].movx;
 444         form2.movey.value = thumbnails[number-1].movy;
 445         displayImage(display2);
 446         show_config(number);
 447 }
 448
 449 //Display2で表示時に変更したパラメータをデータ保持配列に格納
 450 function Display2ToThumbnails(number){
 451         thumbnails[number-1].file = display2.file;
 452         thumbnails[number-1].magnification = display2.magnification;
 453         thumbnails[number-1].angle = display2.angle;
 454         thumbnails[number-1].movx = display2.movx;
 455         thumbnails[number-1].movy = display2.movy;
 456 }
 457
 458 //Blend Elementsの表示の削除とblend()の呼び出し
 459 function blend_switch(what){
 460         if(what == 'thumbnails'){
 461
 462                 var blend_elements_area = document.getElementById("blend_elements");
 463                 blend_elements_area.innerHTML = "";
 464
 465                 if(thumbnails.length == 0){
 466                         window.alert("Please upload image to Imagelist.");
 467                         return false;
 468                 }
 469
 470                 blend(blend_elements,display3,1)
 471         }
 472 }
 473
 474 var blend_elements = [];//BlendElementsのデータ保持
 475
 476 //BlendElementsの生成
 477 function make_blend_elements(){//他関数内でcanvasのdata配列を取得する時canvasに完全に描画済みでないといけないので関数として分けることで冗長性を出し実現させている。
 478         var blend_elements_area = document.getElementById("blend_elements");
 479         blend_elements = [];//初期化
 480
 481         for(var i=0; i<=thumbnails.length; i++){
 482                 var id = "blend_elements" + i;
 483                 var text = "<canvas id='" + id + "'></canvas>";
 484
 485                 blend_elements_area.insertAdjacentHTML('beforeend',text);
 486                 blend_elements[i] = new Display();
 487                 if(i==0){//dispolay1の写し
 488                         blend_elements[i].file = display1.file;
 489                         blend_elements[i].magnification = display1.magnification;
 490                         blend_elements[i].movx = display1.movx;
 491                         blend_elements[i].movy = display1.movy;
 492                         blend_elements[i].angle = display1.angle;
 493                 }else{//thumbnailの拡大写し
 494                         blend_elements[i].file = thumbnails[i-1].file;
 495                         blend_elements[i].magnification = thumbnails[i-1].magnification;
 496                         blend_elements[i].movx = thumbnails[i-1].movx;
 497                         blend_elements[i].movy = thumbnails[i-1].movy;
 498                         blend_elements[i].angle = thumbnails[i-1].angle;
 499                 }
 500                 blend_elements[i].canvas = document.getElementById(id);
 501                 blend_elements[i].context = blend_elements[i].canvas.getContext('2d');
 502                 blend_elements[i].canvas.width = CANVAS_SIZE;
 503                 blend_elements[i].canvas.height = CANVAS_SIZE;
 504                 displayImage(blend_elements[i]);
 505                 //console.log(blend_elements[i]);
 506         }
 507 }
 508
 509 //合成の下準備と合成画像の表示
 510 function blend(blend_resorce, display, color_change_flag){//配列（ブレンド元）,表示先,1有or0無
 511
 512         //元
 513         var image = [];
 514         for(var i=0; i<blend_resorce.length; i++){
 515                 //image[i] = blend_resorce[i].context.getImageData(0,0,display.canvas.width,display.canvas.height);
 516                 image[i] = blend_resorce[i].context.getImageData(0,0,blend_resorce[i].canvas.width,blend_resorce[i].canvas.height);
 517         }
 518         //先
 519         var image_blend = display.context.createImageData(display.canvas.width,display.canvas.height);
 520
 521         //元
 522         var image_rgbas = [];
 523
 524         for(var i=0; i<blend_resorce.length; i++){
 525                 image_rgbas[i] = image[i].data;//２次元配列の生成
 526         }
 527         //先
 528         var image_blend_rgba = image_blend.data;//1次元配列の生成
 529
 530         //カラーチェンジ ON
 531         if(color_change_flag){
 532
 533                 for(var i=0; i<blend_resorce.length; i++){
 534                         image_rgbas[i] = color_change(image_rgbas[i],i);
 535                 }
 536         }
 537
 538         //新しい画像の生成
 539         image_blend_rgba = make_new_Image(image_rgbas, image_blend_rgba);//(2d,1d)
 540         //先へ反映
 541         display.context.putImageData(image_blend, 0, 0);
 542
 543         if(color_change_flag){
 544                 //display4への写し
 545                 display4.context.putImageData(image_blend, 0, 0);
 546         }
 547 }
 548
 549 //画像の何色を変えるか入力するフォームの生成
 550 function create_color_table(){
 551         var tbody = document.getElementById("color_table_tbody");
 552         var tr = tbody.insertRow(-1);
 553         var number_td = tr.insertCell(-1);
 554         var before_color_td = tr.insertCell(-1);
 555         var arrow_td = tr.insertCell(-1);
 556         var after_color_td = tr.insertCell(-1);
 557         var id_before;
 558         var id_after;
 559         tbody.innerHTML = "";
 560         for( var i=0; i<thumbnails.length; i++){
 561
 562                 tr = tbody.insertRow(-1);
 563                 number_td = tr.insertCell(-1);
 564                 before_color_td = tr.insertCell(-1);
 565                 arrow_td = tr.insertCell(-1);
 566                 after_color_td = tr.insertCell(-1);
 567
 568                 number_td.innerHTML = thumbnails[i].thumbnail_number;
 569                 id_before = "before_color_" + (i+1);
 570                 id_after = "after_color_" + (i+1);
 571                 before_color_td.innerHTML = "<select id=" + id_before + "><option value='0'>select the color</option><option value='1'>Red</option><option value='2'>Yellow</option><option value='3'>Green</option><option value='4'>Cyan</option><option value='5'>Blue</option><option value='6'>Magenta</option></select>";
 572         arrow_td.innerHTML = "➡︎";
 573         after_color_td.innerHTML = "<select id=" + id_after + "><option value='0'>select the color</option><option value='1'>Red</option><option value='2'>Yellow</option><option value='3'>Green</option><option value='4'>Cyan</option><option value='5'>Blue</option><option value='6'>Magenta</option></select>";
 574         }
 575 }
 576
 577 //color tableのcolorをリセット
 578 function color_reset(){
 579         var before_id_d1 = "before_color_display1";
 580         var after_id_d1 = "after_color_display1";
 581         var before_id = "before_color_";
 582         var after_id = "after_color_";
 583
 584         for(var i=0; i<=thumbnails.length; i++){
 585                 if(i==0){
 586                         before_color = document.getElementById(before_id_d1);
 587                         after_color = document.getElementById(after_id_d1);
 588                 }else{
 589                         before_color = document.getElementById(before_id + i);
 590                         after_color = document.getElementById(after_id + i);
 591                 }
 592         before_color.value = 0;
 593         after_color.value = 0;
 594         }
 595         blend_switch('thumbnails');
 596 }
 597
 598 //ピクセル配列の値(色情報)の書き換え
 599 function color_change(image_rgba, index){
 600         var max, min;
 601         var R,G,B;
 602         var H;
 603         var before_color,after_color;
 604         var diff_color;
 605
 606         if(index==0){
 607                 var before_id = "before_color_display1";
 608                 var after_id = "after_color_display1";
 609         }else{
 610                 var before_id = "before_color_" + index;
 611                 var after_id = "after_color_" + index;
 612         }
 613
 614         //console.log(index);
 615         before_color = document.getElementById(before_id).value;
 616         after_color = document.getElementById(after_id).value;
 617         diff_color = after_color - before_color;
 618         /*
 619         console.log("before_color is..."+before_color);
 620         console.log("after_color is..."+after_color);
 621         console.log("diff_color is..."+diff_color);
 622         */
 623         /**********RGB->HSV***********/
 624         for (var i = 0; i < image_rgba.length ; i++){
 625                 R = image_rgba[i * 4] / 255;//RGBAの値は0-255で与えられている
 626                 G = image_rgba[i * 4 + 1] / 255;
 627                 B = image_rgba[i * 4 + 2] / 255;
 628
 629                 if(R == G && G == B){
 630                         continue;
 631                 }else if(R >= G && R >= B){
 632                         if(G >= B){
 633                                 max = R;
 634                                 min = B;
 635                         }else if(B > G){
 636                                 max = R;
 637                                 min = G;
 638                         }
 639                 }else if(G >= R && G >= B){
 640                         if(R >= B){
 641                                 max = G;
 642                                 min = B;
 643                         }else if(B > R){
 644                                 max = G;
 645                                 min = R;
 646                         }
 647                 }else if(B >= R && B >= G){
 648                         if(R >= G){
 649                                 max = B;
 650                                 min = G;
 651                         }else if(G > R){
 652                                 max = B;
 653                                 min = R;
 654                         }
 655                 }
 656
 657                 if(max == R){
 658                         H = 60 * (G - B)/(max - min);
 659                         H %= 360;
 660                 }else if(max == G){
 661                         H = (60 * (B - R) / (max - min)) + 120;
 662                         H %= 360;
 663                 }else if(max == B){
 664                         H = (60 * (R - G) / (max - min)) + 240;
 665                         H %= 360;
 666                 }
 667
 668                 /*****************color change*************************/
 669                 //値書き換え（色相変換）
 670                 if (before_color != 1 && after_color != 1){//両方赤でない
 671                         if(H >= (before_color-1) * 60 -30 && H < (before_color * 60 -30)){
 672                                 H = H + 60 * diff_color;
 673                         }
 674                 }else if(before_color == 1 && after_color != 1){//前者が赤
 675                         if(H >= 0 && H < 30){
 676                                 H = H + 60 * diff_color;
 677                         }else if(H >= 330 && H <= 360){
 678                                 H = H - 60 * (6 - diff_color);
 679                         }
 680                 }else if(before_color != 1 && after_color == 1){//後者が赤
 681                         if(H >= (before_color - 1) * 60 -30 && H < (before_color - 1) * 60 ){
 682                                 H = H + 60 * (6 + diff_color);
 683                         }else if(H >= (before_color - 1) * 60 && H < before_color * 60 -30){
 684                                 H = H + 60 * diff_color;
 685                         }
 686                 }else{
 687                         continue;
 688                 }
 689
 690                 /***********************HSV->RGB************************/
 691                 if(H >= 0 &&  H < 60){
 692                         R = max;
 693                         G = (H / 60) * (max - min) + min;
 694                         B = min;
 695                 }else if(H >= 60 && H < 120){
 696                         R = -((H-120) / 60) * (max - min) + min;
 697                         G = max;
 698                         B = min;
 699                 }else if(H >= 120 && H < 180){
 700                         R = min
 701                         G = max;
 702                         B = ((H-120) / 60) * (max - min) + min;
 703                 }else if(H >= 180 && H < 240){
 704                         R = min
 705                         G = -((H-240) / 60) * (max - min) + min;
 706                         B = max;
 707                 }else if(H >= 240 && H < 300){
 708                         R = ((H-240) / 60) * (max - min) + min;
 709                         G = min;
 710                         B = max;
 711                 }else if(H >= 300 && H <= 360){
 712                         R = max;
 713                         G = min;
 714                         B = (-(H-360) / 60) * (max - min) + min;
 715                 }else{
 716                         continue;
 717                 }
 718
 719                 image_rgba[i * 4] = R * 255;
 720                 image_rgba[i * 4 + 1] = G * 255;
 721                 image_rgba[i * 4 + 2] = B * 255;
 722
 723         }
 724         return image_rgba;
 725 }
 726
 727         //getImageDataのdataで取り出される配列が持つ意味
 728         /*
 729         image_rgba[count * 4]           //R
 730         image_rgba[count * 4 + 1]       //G
 731         image_rgba[count * 4 + 2]       //B
 732         image_rgba[count * 4 + 3]       //A
 733         */
 734
 735 //新しい画像の生成
 736 function make_new_Image(image_rgbas, new_image_rgba){
 737         var image_amount = 0;
 738         var white_pixel_amount=0;//同座標上のピクセルでそのピクセルが白(0,0,0,0)である数
 739         //new_image_rgbaは255以上になるとカンストするからこれでクッションを置く
 740         var new_image_r = 0;
 741         var new_image_g = 0;
 742         var new_image_b = 0;
 743         var new_image_a = 0;
 744         //console.log(new_image_rgba.length);
 745         //縮小した際に画像ではないピクセルはRGBA(0,0,0,0)だから、合成色を求める計算で母数から外している。色は足しているが各値が０なので考慮しないのと同義。
 746         for(var j=0; j<new_image_rgba.length; j++){
 747                 new_image_rgba[j * 4] = 0;
 748                 new_image_rgba[j * 4 + 1] = 0;
 749                 new_image_rgba[j * 4 + 2] = 0;
 750                 new_image_rgba[j * 4 + 3] = 0;
 751                 for(var i=0; i<image_rgbas.length; i++){
 752                         /*
 753                         new_image_rgba[j * 4] += image_rgbas[i][j * 4];
 754                         new_image_rgba[j * 4 + 1] += image_rgbas[i][j * 4 + 1];
 755                         new_image_rgba[j * 4 + 2] += image_rgbas[i][j * 4 + 2];
 756                         new_image_rgba[j * 4 + 3] += image_rgbas[i][j * 4 + 3];
 757                         */
 758                         new_image_r += image_rgbas[i][j * 4];
 759                         new_image_g += image_rgbas[i][j * 4 + 1];
 760                         new_image_b += image_rgbas[i][j * 4 + 2];
 761                         new_image_a += image_rgbas[i][j * 4 + 3];
 762
 763                         if(image_rgbas[i][j*4]==0 && image_rgbas[i][j*4+1]==0 && image_rgbas[i][j*4+2]==0 && image_rgbas[i][j*4+3]==0 ){
 764                                 white_pixel_amount++;
 765                         }
 766                 }
 767                 image_amount = image_rgbas.length-white_pixel_amount;
 768                 if(image_amount==0){//両方のキャンバスで白のピクセルは分子０分母０になるから分母１にする
 769                         image_amount=1;
 770                 }
 771
 772                 new_image_rgba[j * 4] = new_image_r / image_amount;
 773                 new_image_rgba[j * 4 + 1] = new_image_g / image_amount;
 774                 new_image_rgba[j * 4 + 2] = new_image_b / image_amount;
 775                 new_image_rgba[j * 4 + 3] = new_image_a / image_amount;
 776
 777                 new_image_r = 0;
 778                 new_image_g = 0;
 779                 new_image_b = 0;
 780                 new_image_a = 0;
 781                 image_amount = 0;
 782                 white_pixel_amount = 0;
 783         }
 784         /*
 785         console.log(new_image_rgba.length);
 786         for(var i=0; i<image_rgbas.length; i++){
 787                 console.log(image_rgbas[i]);
 788         }
 789         console.log(new_image_rgba);
 790         */
 791         return new_image_rgba;
 792 }
 793
 794 //preview displayの表示
 795 function preview_on(){
 796         //console.log("On!");
 797         var preview_canvas_area = document.getElementById("preview_canvas_area");
 798         var preview_canvas_update_button = document.getElementById("preview_canvas_update_button");
 799         preview_canvas_update_button.innerHTML = "<input type='button' value='update' onclick='preview_update()'>";
 800         preview_canvas_area.innerHTML = "<canvas id='preview_canvas'></canvas>";
 801         var display_preview = new Display();
 802         display_preview.canvas = document.getElementById("preview_canvas");
 803         display_preview.context = preview_canvas.getContext('2d');
 804         display_preview.canvas.width = CANVAS_SIZE;
 805         display_preview.canvas.height = CANVAS_SIZE;
 806         var blend_resorce = [display1, display2];
 807         //console.log(display1);
 808         blend(blend_resorce, display_preview, 0);
 809 }
 810
 811 //preview displayの非表示
 812 function preview_off(){
 813         //console.log("Off...");
 814         var preview_canvas_area = document.getElementById("preview_canvas_area");
 815         var preview_canvas_update_button = document.getElementById("preview_canvas_update_button");
 816         preview_canvas_update_button.innerHTML = "";
 817         preview_canvas_area.innerHTML = "";
 818 }
 819
 820 //preview displayの更新
 821 function preview_update(){
 822         preview_off();
 823         preview_on();
 824 }
 825
 826 //config fileのアップロード
 827 function config_upload(files, index){
 828
 829     var csv_text = "";
 830     var arr = [];
 831
 832     var reader = new FileReader();
 833     reader.readAsText(files[0]);
 834     reader.onload = function(event){
 835
 836         csv_text = reader.result;
 837
 838         arr = csv_text.split(',');
 839         //console.log(arr);
 840         for(var i=0; i<arr.length; i++){
 841                 arr[i] = parseFloat(arr[i].replace('"',''));
 842         }
 843         //console.log(arr);
 844         thumbnails[index-1].config_x = arr[0];
 845         thumbnails[index-1].config_y = arr[1];
 846         thumbnails[index-1].config_z = arr[2];
 847         thumbnails[index-1].config_alfa = arr[3];
 848         thumbnails[index-1].config_beta = arr[4];
 849         thumbnails[index-1].config_offsetX = arr[5];
 850         thumbnails[index-1].config_offsetY = arr[6];
 851         thumbnails[index-1].config_angle = arr[7];
 852     }
 853     //console.log(thumbnails);
 854     //show_config(index);
 855 }
 856
 857 //config fileの情報を表示
 858 function show_config(index){
 859         var x = document.getElementById("configx");
 860         var y = document.getElementById("configy");
 861         var z = document.getElementById("configz");
 862         var alfa = document.getElementById("configalfa");
 863         var beta = document.getElementById("configbeta");
 864         var offsetX = document.getElementById("configoffsetx");
 865         var offsetY = document.getElementById("configoffsety");
 866         var angle = document.getElementById("configangle");
 867
 868         x.innerHTML = thumbnails[index-1].config_x;
 869     y.innerHTML = thumbnails[index-1].config_y;
 870     z.innerHTML = thumbnails[index-1].config_z;
 871     alfa.innerHTML = thumbnails[index-1].config_alfa;
 872     beta.innerHTML = thumbnails[index-1].config_beta;
 873     offsetX.innerHTML = thumbnails[index-1].config_offsetX;
 874     offsetY.innerHTML = thumbnails[index-1].config_offsetY;
 875     angle.innerHTML = thumbnails[index-1].config_angle;
 876 }
 877
 878 //coordinate メンバー
 879 function Coordinate(_number, _x, _y, _z){
 880     this.number = _number;
 881     this.x = _x;
 882     this.y = _y;
 883     this.z = _z;//将来的に３次元での解析を見越してZ座標をメンバーとして加えている
 884 }
 885
 886 //マウスカーソルのキャンバス内の座標計算
 887 function calculate_xy(event){
 888
 889     var mouseX = 0;       //coordinate x of mouse point
 890     var mouseY = 0;       //coordinate y of mouse point
 891     var positionX = 0;    //coordinate x of canvas
 892     var positionY = 0;    //coordinate y of canvas
 893     var x = 0;            //coordinate x of mouse point in canvas
 894     var y = 0;            //coordinate y of mouse point in canvas
 895
 896     var order1 = parseInt(d4_unit.order.value);    //mm or μm or nm or A(angstrom)//計算用
 897     var order2 = parseInt(list_form.order2.value); //mm or um or nm or A          //表用
 898
 899     var pixel_length = d4_unit.pixel_length.value; //画像のピクセルの大きさ（サーバー側から受け取り可能）
 900
 901     mouseX = event.pageX;
 902     mouseY = event.pageY;
 903
 904     clientRect = document.getElementById("canvas4").getBoundingClientRect();
 905     positionX = clientRect.left + window.pageXOffset;
 906     positionY = clientRect.top + window.pageYOffset;
 907
 908     //画像中心を原点としてピクセル座標計算（平行移動対応）
 909     if(CANVAS_SIZE%2){//奇数
 910         x = mouseX - positionX - (display4.canvas.width / 2) - display4.movx;
 911         y = -(mouseY - positionY - (display4.canvas.height / 2)) - display4.movy;
 912     }else{//偶数（偶数の場合は原点は右上を採用）
 913         x = mouseX - positionX - (display4.canvas.width / 2) - display4.movx;
 914         y = -(mouseY - positionY - ((display4.canvas.height / 2) - 1)) - display4.movy;
 915     }
 916
 917     //小数点切り捨て（ピクセル座標を0-CANVASSIZEを整数値で表す、上のメソッド返ってくるピクセル座標が少数点あり）
 918     x = ~~x;
 919     y = ~~y;
 920
 921     //画像の実際の大きさのサイズに戻す
 922     x *= IMAGE_SIZE / CANVAS_SIZE;
 923     y *= IMAGE_SIZE / CANVAS_SIZE;
 924
 925     //px -> mm,mim,nm ...ピクセルの寸法と元画像の大きさから算出
 926     x *= pixel_length * Math.pow(10,-order1-(-order2)) / display4.magnification;
 927     y *= pixel_length * Math.pow(10,-order1-(-order2)) / display4.magnification;
 928
 929     var coordinate = new Coordinate();
 930     coordinate.x = parseFloat(x.toFixed(2));
 931     coordinate.y = parseFloat(y.toFixed(2));
 932     coordinate.z = 0;
 933
 934     return coordinate;
 935 }
 936
 937 //現在のマウスカーソル座標の表示　マウスが動くと発火イベント
 938 document.getElementById("canvas4").addEventListener("mousemove", function(event){
 939     var current_coordinate = document.getElementById("current_coordinate");
 940     var coordinate = new Coordinate();
 941     coordinate = calculate_xy(event);
 942     if(!IMAGE_SIZE){
 943         return false;
 944     }else{
 945         current_coordinate.innerHTML = "x: " + coordinate.x + " y:" + coordinate.y + " z:" + coordinate.z;
 946     }
 947 });
 948
 949 //クリックしたマウスカーソル座標を取得　クリックすると発火イベント
 950 document.getElementById("canvas4").addEventListener("click", function(event){
 951     if(0){//display4に合成画像が表示されているかどうか
 952         window.alert("Please load image file.");
 953         move_params_init();
 954         return false;
 955     }else{
 956         var current_coordinate = document.getElementById("click_coordinate");
 957         var coordinate = new Coordinate();
 958         coordinate = calculate_xy(event);
 959         add_list(coordinate);
 960     }
 961 });
 962
 963 var coordinate_database = []; //座標のオブジェクトを格納する配列
 964
 965 //クリックした座標データを表に反映、データ保持配列に格納
 966 function add_list(coordinate){
 967
 968     var tbody = document.getElementById("coordinate_table_tbody");
 969     var new_tr = tbody.insertRow(-1);
 970     var row_Index = new_tr.rowIndex; //row's index (start = 1) equal to table numbering
 971
 972     var number_td = new_tr.insertCell(-1);
 973     var x_td = new_tr.insertCell(-1);
 974     var y_td = new_tr.insertCell(-1);
 975     var z_td = new_tr.insertCell(-1);
 976     var button_td = new_tr.insertCell(-1);
 977
 978     coordinate.number = row_Index;
 979
 980     //表に反映
 981     number_td.innerHTML = coordinate.number;
 982     x_td.innerHTML = coordinate.x;
 983     y_td.innerHTML = coordinate.y;
 984     z_td.innerHTML = coordinate.z;
 985     button_td.innerHTML = '<input type="button" value="delete" onClick="dele_list(this.parentNode.parentNode.rowIndex)">'//this.parentNode.parentNode.rowIndex -> Row number in list
 986
 987     //新しい座標データが来た時、coordinate_databaseに格納
 988     if(coordinate_database.length == row_Index - 1){
 989         coordinate_database[row_Index - 1] = new Coordinate(coordinate.number,coordinate.x,coordinate.y,coordinate.z);
 990     }
 991     /*
 992     for(var j = 0; j < coordinate_database.length; j++){
 993             console.log(coordinate_database[j]);
 994     }
 995     */
 996 }
 997
 998 //クリックした座標行を削除、データ保持配列からの削除
 999 function dele_list(row_number){
1000     var tbody = document.getElementById("coordinate_table_tbody");
1001     var rows_length = tbody.rows.length;
1002     for(var i=row_number; i <= rows_length; i++){
1003         tbody.deleteRow(row_number-1);//deleteRow(0) -> delete table's 1st row.
1004     }
1005
1006     coordinate_database.splice(row_number-1,1);//delete 1 data[row_number-1] from coordinate_database
1007
1008     //ボタンを押した階層より後の同レベル階層を削除（Table）
1009     //配列データ(coordinate database)は座標データを残しaddlistに送ってnumberを書き換えtableに反映
1010     for(j = row_number - 1; j < coordinate_database.length; j++){
1011         add_list(coordinate_database[j])
1012     }
1013 }
1014
1015 //座標行、データ保持配列の全消去
1016 function all_clear(){
1017     var tbody = document.getElementById("coordinate_table_tbody");
1018     var rows_length = tbody.rows.length;
1019
1020     for(var i=1; i <= rows_length; i++){
1021         tbody.deleteRow(-1);
1022         coordinate_database.pop(); //最下層まで消す
1023     }
1024     //console.log(coordinate_database);
1025 }
1026
1027 //座標データをファイルに書き出しローカルに保存
1028 function download(){
1029     var number;
1030     var x;
1031     var y;
1032     var z;
1033
1034     var text = "";
1035     //リストをテキストにする
1036     for(var i=0; i<coordinate_database.length; i++){
1037
1038         number = coordinate_database[i].number;
1039         x = coordinate_database[i].x;
1040         y = coordinate_database[i].y;
1041         z = coordinate_database[i].z;
1042
1043         text += '"' + number + '","' + x + '","' + y + '","' + z + '"\n';
1044     }
1045
1046     var blob = new Blob([text], {type: 'text/plain'});
1047     var link = document.getElementById('download_link');
1048     var filename = download_form.filename.value;
1049
1050     if(!filename){//ファイル名指定なし
1051         window.alert("Please write filename");
1052         return false;
1053     }
1054
1055     //ボタン付近に設置したaタグにblobデータのリンクを貼り、クリックさせることで保存させる。
1056     link.href = window.URL.createObjectURL(blob);
1057     link.download = filename;
1058     link.click();
1059 }
1060
1061 //座標データが格納されたファイルを読み込んで画面のCoordinate listに反映
1062 function upload(files){
1063
1064     all_clear();
1065
1066     var csv_text = "";
1067     var array_csv;
1068     var arr = [];
1069     var coordinate = new Coordinate;
1070
1071     var reader = new FileReader();
1072     reader.readAsText(files[0]);
1073     reader.onload = function(event){
1074
1075         csv_text = reader.result;
1076         array_csv = csv_text.split('\n');
1077
1078     //２次元配列にしてオブジェクトに変更後、addlistへ渡す。
1079         for(var i=0; i<array_csv.length; i++){
1080             if(array_csv[i] == ''){
1081                 break;
1082             }
1083             arr[i] = array_csv[i].split(',');
1084
1085             for(var j=0; j<arr[i].length; j++){
1086                 arr[i][j] = parseFloat(arr[i][j].replace('"',''));
1087             }
1088                 coordinate.number = arr[i][0];
1089                 coordinate.x = arr[i][1];
1090                 coordinate.y = arr[i][2];
1091                 coordinate.z = arr[i][3];
1092
1093                 add_list(coordinate);
1094         }
1095     }
1096 }
1097
1098 }
1099
1100