LANG SELRCT

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

2018年8月12日日曜日

Canvasで画像を切り抜いて表示する


drawImageを使って元画像を切り取って表示してみる



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




index.html
<html>
  <body onload="draw();">
    <canvas id="canvas" width="1200" height="1200"></canvas>
    <div style="display:none;">
      <img id="source" src="画像ファイルのURL">
    </div>
    <script>
   function draw() {
     var canvas = document.getElementById('canvas');
     var source = document.getElementById('source');
     var context = canvas.getContext('2d');

     var sx = 120;//source_x←元画像の左からこの位置を起点に
     var sy = 120;//source_y←元画像の上からこ位置を起点に
     var sw = 2000;//source_width←元画像で切り取る幅
     var sh = 2000;//source_height←元画像で切り取る高さ
     
     var dx = 150;//destination_x←表示するときの画面上の左からの距離
     var dy = 15;//destination_y←表示するときの画面上の上からの距離
     var dw = 1200;//destination_width←表示するときの幅
     var dh = 1200;//destination_height←表示するときの高さ
     
     context.drawImage(source, sx, sy, sw, sh, dx, dy, dw, dh);
   }
</script>