LANG SELRCT

コードを書く場所についてはこちら

2019年1月25日金曜日

画像内で選択した範囲を取得してcanvasで書き出す


画像内を範囲選択して切り取りたい




コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>

<body>
<div id="body_div">
<img id="source" src="https://4.bp.blogspot.com/-21du8qaTVhw/V2plI3Jl7aI/AAAAAAAAAYY/0cxXsUZVo5ky6kisOTRhe7LminP6na3ogCLcB/s1600/icon.png" draggable="false">

<div id="canvas_div2">

</div>
<br>
  X座標移動中:<input type="text" id="moveX" />
  Y座標移動中:<input type="text" id="moveY" />
  <br>
  X座標ここから:<input type="text" id="fromX" />
  Y座標ここから:<input type="text" id="fromY" />
  <br>
  X座標ここまで:<input type="text" id="toX" />
  Y座標ここまで:<input type="text" id="toY" />
  <br>
  切り取る幅:<input type="text" id="cutX" />
  切り取る高さ:<input type="text" id="cutY" />
</div>
<script>

/************************************
elem
************************************/
function elem(id){
  return document.getElementById(id);
}

/************************************
グローバル変数
************************************/
var canvas_div2 = elem("canvas_div2");
var fromX = elem("fromX");
var fromY = elem("fromY");
var moveX = elem("moveX");
var moveY = elem("moveY");
var toX = elem("toX");
var toY = elem("toY");
var cutX = elem("cutX");
var cutY = elem("cutY");

/************************************
イベント
************************************/
document.onmousedown = on_mousedown; 
document.onmouseup = on_mouseup; 
document.onmousemove = on_mousemove; 


/************************************
on_mousemove
************************************/
function on_mousemove(e){
  //座標を取得する
  var X = e.pageX;  //X座標
  var Y = e.pageY;  //Y座標
  
  //座標を表示する
  moveX.value = X;
  moveY.value = Y;
};

/************************************
on_mousedown
************************************/
function on_mousedown(e){
  //座標を取得する
  var X = e.pageX;  //X座標
  var Y = e.pageY;  //Y座標
  
  //座標を表示する
  fromX.value = X;
  fromY.value = Y;
};

/************************************
on_mouseup
************************************/
function on_mouseup(e){
  //座標を取得する
  var X = e.pageX;  //X座標
  var Y = e.pageY;  //Y座標
  
  //座標を表示する
  toX.value = X;
  toY.value = Y;
  get_trimed();
}

/************************************
get_trimed
************************************/
function get_trimed(){
  var X1 = parseInt(fromX.value);
  var Y1 = parseInt(fromY.value);
  var X2 = parseInt(toX.value);
  var Y2 = parseInt(toY.value);
  
  //逆向きからの選択に対応
  var X = nomalize_position(X1, X2);
  X1 = X[0];
  X2 = X[1];

  //逆向きからの選択に対応
  var Y = nomalize_position(Y1, Y2);
  Y1 = Y[0];
  Y2 = Y[1];

  //範囲を取得する
  var X3 = Math.abs(X2 - X1);
  var Y3 = Math.abs(Y2 - Y1);

  //座標を表示する
  cutX.value = X3;
  cutY.value = Y3;
  
  //描画する
  draw_image(X1, Y1, X3, Y3);
}

/************************************
nomalize_position
上から下、左から右に選択すれば問題ないが
下から上や右から左に選択すると
起点よりも終点の方が小さくなり
範囲が正しく取得できないので
起点が終点よりも大きい場合は両者を入れ替えて
逆向きからの選択に対応する
************************************/
function nomalize_position(A, B){
  if(A > B){
    var A0 = A;
    A = B;
    B = A0;
  }
  var result = [A, B];
  return result;
}

/************************************
draw_image
************************************/
function draw_image(X1, Y1, X3, Y3) {
  var source = elem('source');
  remove_child("canvas_div2");
  var canvas = create_canvas();
  var context = canvas.getContext('2d');
  
  canvas.style.width = X3;
  canvas.style.width = Y3;
  context.drawImage(source, X1, Y1, X3, Y3, 0, 0, X3, Y3);
}

/************************************
create_canvas
************************************/
function create_canvas(){
  var canvas = document.createElement("canvas");
  canvas.setAttribute("id", "image_canvas");
  canvas_div2.appendChild(canvas);
  return canvas;
}

/************************************
remove_child
************************************/
function remove_child(id) {
  var elem = document.getElementById(id);
  for (var i = elem.childNodes.length - 1; i >= 0; i--) {
    elem.removeChild(elem.childNodes[i]);
  }
}
</script>
</body>
</html>