表示した画像をCanvasに描画します。
imgの元画像は600pxですが、CSSで200pxにしているので、canvasでも200pxに合わせてリサイズしています。
このサンプルは、jQueryも利用しています。
まず、普通にimgタグで画像を表示します。
<img src="/img/demo/hand/001.jpg" id="demo_image">
次にcanvasタグを埋め込み、読み込んだ画像を描画します。
<canvas id="myCanvas" width="200" height="134"></canvas>
見た目は全く同じ二つの画像ですが、描画方法が違います。
canvasで描画するといろいろな加工が可能になります。
JSの記述はこちら
//画像を分析するので読み込んでから発火
//$(function(){ にはしない
$(window).load(function(){
var $img = $('#demo_image');
var imgW = $img.width();
var imgH = $img.height();
//取得した画像サイズのcanvasを追加
$("#demo_space").append('<canvas id="myCanvas" width="'+imgW+'" height="'+imgH+'"></canvas>');
//キャンパスに描画するためのコンテキストを用意する
var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d');
//取得した画像を新しいオブジェクトとして生成する
var image = new Image();
image.src = $img.attr("src");
// 描画する
// drawImage(image.src,開始X,開始Y,終点X,終点Y,リサイズ開始X,リサイズ開始Y,リサイズ終点X,リサイズ終点Y)
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, imgW, imgH);
// 元画像のサイズのまま描画する場合、ctx.drawImage(image, 0, 0)でよい
});
HTMLはこちら
<img src="/img/demo/hand/001.jpg" id="demo_image"> <div id="demo_space"></div>
応用は別記事にて紹介します。
