今回は HTML5 で用意されている canvas を使って画像ファイルを描画する方法について説明します。 canvas の使い方ですが、以下の様に順を追って説明します。
■画像の描画
直線の描画を行う為のコンテキストオブジェクトのメソッドは以下のものがあります。
| メソッド | 書式 | 説明 |
|---|---|---|
| drawImage | drawImage(image, x, y) image:画像オブジェクト x:描画開始の x 座標 y:描画開始の y 座標 |
シンプルな描画 |
| drawImage | drawImage(image, x, y, dWidth, dHeight) image:画像オブジェクト x:描画開始の x 座標 y:描画開始の y 座標 dWidth:描画する横幅 dHeight:描画する縦幅 |
描画開始位置と縮小幅を指定した描画 |
| drawImage | drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) image:画像オブジェクト sx:描画元の x 座標 sy:描画元の y 座標 sWidth:描画する元画像の横幅 sHeight:描画する元画像の縦幅 dx:描画開始の x 座標 dy:描画開始の y 座標 dWidth:描画する横幅 dHeight:描画する縦幅 |
元画像の取り出し位置と幅、及び描画開始位置と幅指定 |
上記の drawImage の3種類の例として以下のソースを示します。
尚、今回使用した画像ファイルは以下の様なものです。
この処理の肝は、イメージオブジェクトへの画像ファイルを指定しす直後には描画処理を行わないことです。
画像ファイルの読込には時間が掛かるので、ファイルのロードが終わったタイミングで描画処理をする必要があります。
ソース上では img1.src = の直後に img1.onload がありますので、勘違いされないないように。
img1.onload ではロード直後に呼ばれる関数を宣言しています。 （実際のファイルロード後この関数が実行されます）
<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Image関数
function drawImage(iSwitch) {
var canvas = $("#canvas");
var ctx = canvas[0].getContext("2d");
//イメージオブジェクト
var img1 = new Image();
//画像ファイル指定でファイル読込開始
img1.src = "./canvastest1.jpg";
//画像ロード後に画像を描画できる。
img1.onload = function(){
//画像の大きさを設定
width = img1.width;
height = img1.height;
canvas.attr('width' , width);
canvas.attr('height', height);
//画像を描画
switch (iSwitch) {
case 1:
ctx.drawImage(img1, 0, 0);
break;
case 2:
ctx.drawImage(img1, 50, 50, 100, 100);
break;
case 3:
ctx.drawImage(img1, 0, 0, 150, 150, 10, 10, 150, 150);
break;
}
}
return false;
}
</script>
</head>
<body>
<h2>test canvas</h2>
<canvas id="canvas" width="200" height="200" ></canvas>
<br />
<button onclick="drawImage(1);">開始座標指定のみ</button>
<button onclick="drawImage(2);">開始座標,幅指定</button>
<button onclick="drawImage(3);">元画像,描画先の指定</button>
</body>
</html>
■画像の大きさにcanvasを合わせる描画
画像の大きさに合わせて canvas の横と縦の幅を合わせる例を示します。
<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Image関数
function drawImage(imageFile) {
var canvas = $("#canvas");
var ctx = canvas[0].getContext("2d");
//イメージオブジェクト
var img1 = new Image();
//画像ファイル指定でファイル読込開始
img1.src = imageFile;
//画像ロード後に画像を描画できる。
img1.onload = function(){
//画像の大きさを設定
width = img1.width;
height = img1.height;
canvas.attr('width' , width);
canvas.attr('height', height);
//画像を描画
ctx.drawImage(img1, 0, 0, width, height);
}
return false;
}
</script>
</head>
<body>
<h2>test canvas</h2>
<canvas id="canvas" width="200" height="200" ></canvas>
<br />
<button onclick="drawImage('./canvastest1.jpg');">Image1</button>
<button onclick="drawImage('./canvastest2.jpg');">Image2</button>
</body>
</html>
「Image1」をクリックすると上記の画像が表示され、「Image2」をクリックすると少し大きい画像が表示されます。
■ページロード直後の描画
画像ファイルの表示には Img タグを使えばいいのですが、javascript による描画をしたい時があります。 その場合にはページがロードされた直後に canvas への画像を行います。
上記の画像表示関数を流用すれば特に難しくなく、ページロード時の $(function() { でその描画関数を呼出せば行えます。
<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Image関数
function drawImage() {
var canvas = $("#canvas");
var ctx = canvas[0].getContext("2d");
//イメージオブジェクト
var img1 = new Image();
//画像ファイル指定でファイル読込開始
img1.src = "./canvastest1.jpg";
//画像ロード後に画像を描画できる。
img1.onload = function(){
//画像の大きさを設定
width = img1.width;
height = img1.height;
canvas.attr('width' , width);
canvas.attr('height', height);
//画像を描画
ctx.drawImage(img1, 0, 0, width, height);
}
return false;
}
$(function() {
//描画関数をCALL
drawImage();
});
</script>
</head>
<body>
<h2>test canvas</h2>
<canvas id="canvas" width="200" height="200" ></canvas>
</body>
</html>
PR
コメント