つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録~canvasによる画像表示

 今回はcanvasjavascriptを用いて画像を読み込んで表示する方法について紹介する。

atatat.hatenablog.com

1. 画像の読み込みと表示

 画像を読み込むには、まずimg=new.Image()でimageオブジェクトを生成し、生成したイメージオブジェクトのソース元のアドレス(ディレクトリやURL)をimg.srcに指定する。 画像は非同期で読み込まれるため、.onloadを用いるとすべての画像を読み込んでから表示することができる。canvas上に表示するにはdrawImage(img,x,y)としてimgを座標x,yを起点として描画する。

<canvas id="canvas" width="400" height="200" style="border: 1px solid black;"></canvas>

<script>
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');

var img = new Image();
img.src = 'https://hatenacorp.jp/images/company/resource/hatena-bookmark-logotype-s.png';

// 画像読み込み終了してから描画
img.onload = function(){
    c.drawImage(img, 20, 0);
}
</script>

2. 画像の縮小・拡大

 表示画像の縦横サイズを指定して表示するにはdrawImage(img,x,y,w,h)を用い、w,hにそれぞれ指定のサイズを入れる。 もとの画像のアスペクト比がわかっていないと、適当な数値を入れると縦長あるいは横長になるが、img.widhtでイメージの横幅、img.heightでイメージの縦幅を取得できる。 これらを用いてimg.widhtおよびimg.heightに対して指定の倍率をかけることで、アスペクト比を崩さずに縮小・拡大ができる。以下は元のイメージを1/2に縮小して表示する場合を示す。

<canvas id="canv_img2" width="400" height="200" style="border: 1px solid black;"></canvas>

<script>
var canvas = document.getElementById('canv_img2');
var c2 = canvas.getContext('2d');

var img2 = new Image();
img2.src = 'https://hatenacorp.jp/images/company/resource/hatena-bookmark-logotype-s.png';

img2.onload = function(){
    c2.drawImage(img2, 20, 0, img2.width/2,img2.height/2);
}
</script>

3. イメージのピクセルデータの取得

 canvasのイメージのピクセルデータRGBAの値を取得するには.dataとする。RGBA(赤緑青、透明度)は0-255の整数値で表される。.data.data[0]がR,.data[1]G,.data[2]はB,.data[3]がAとなる。 以下簡単な例としてcreateImageData(w,h)を用いて空のイメージデータを作成し、そのデータをcanvas上にテキストとして表示している。空のデータなのですべて0として表示される。

<canvas id="canv_img3" width="400" height="200" style="border: 1px solid black;"></canvas>

<script>
var canvas = document.getElementById('canv_img3');
var c3 = canvas.getContext('2d');

var img3 = new Image();
img3.src = 'https://hatenacorp.jp/images/company/resource/hatena-bookmark-logotype-s.png';

img3.onload = function(){

    var img01=c3.createImageData(100,200);

    c3.fillText(img01.data, 10, 10);
    c3.fillText("R:"+img01.data[0], 20, 40);
    c3.fillText("G:"+img01.data[1], 20, 60);
    c3.fillText("B:"+img01.data[2], 20, 80);
    c3.fillText("A:"+img01.data[3], 20, 100);
}
</script>

4. まとめ

今回はcanvasjavascriptを用いて画像を読み込んで表示する方法について紹介した。ここまででcanvasの機能についてはおおまかに一通り紹介したことになる。