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>
|
