HTML5のCanvasで画像をリサイズ＆トリミングして中央表示する方法
画像をリサイズ&トリミングして中央は位置する方法にも、
PHPなどサーバーサイドで書き出す方法や,
JavaScriptでトリミングしているように見せかける方法、
CSS3のcropを用いる方法などいろいろありますが、
今回はCanvasを使って画像をリサイズ&トリミングし、中央に配置する方法について考えてみんました。
↓こちらがデモです
方法
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <head> ・・・ <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> ・・・ </head> <body> ・・・ <ul> <li><a href="images/image01.jpg"><canvas id="canvas1" data-src="images/image01.jpg" width="120" height="120">イメージ1</canvas></a></li> <li><a href="images/image02.jpg"><canvas id="canvas2" data-src="images/image02.jpg" width="120" height="120">イメージ2</canvas></a></li> <li><a href="images/image03.jpg"><canvas id="canvas3" data-src="images/image03.jpg" width="120" height="120">イメージ3</canvas></a></li> <li><a href="images/image04.jpg"><canvas id="canvas4" data-src="images/image04.jpg" width="120" height="120">イメージ4</canvas></a></li> <li><a href="images/image05.jpg"><canvas id="canvas5" data-src="images/image05.jpg" width="120" height="120">イメージ5</canvas></a></li> </ul> ・・・ </body> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | $(function(){ var cnt = 1, //カウンターを初期化 canvas = []; //Canvasを設定する配列を初期化 //キャンバスごとに実行 $("ul li canvas").each(function(){ var imgSrc = $(this).attr("data-src"), //画像のsrcを取得 img = new Image(); //Imageオブジェクトを呼び出し img.src = imgSrc; //Imageオブジェクトにsrcを指定 //Canvasの準備 canvas[cnt] = document.getElementById('canvas' + cnt); var ctx = canvas[cnt].getContext('2d'); //画像が読み込み終わったら実行 img.onload = function() { var imgWidth = img.width, //画像の元の幅を取得 imgHeight = img.height, //画像の元の高さを取得 imgRate = imgWidth / imgHeight, //画像の比率を取得 imgPos = 0; //Canvas上での画像の位置を初期化 if(imgRate >= 1){ //画像が横長のとき imgPos = (120 - (120 * imgRate)) / 2; //横方向の画像位置を計算 ctx.drawImage(img, imgPos, 0, 120 * imgRate, 120); //Canvasに幅を基準に画像を描画 }else{ //画像が縦長のとき imgPos = (120 - (120 / imgRate)) / 2; //縦方向の画像位置を計算 ctx.drawImage(img, 0, imgPos, 120, 120 / imgRate); //Canvasに高さを基準に画像を描画 } } cnt++; //カウンターを設定 }); $("ul li a").boxer(); }); |
手順としては、
- HTMLで、<img>の代わりに<canvas>を設置し、src属性の代わりにdata-src属性に画像のパスを設定する。
- JavaScriptで、Image()オブジェクトを使って、元画像の大きさを取得し、縦横比を計算。
- 縦・横の幅の小さい方を基準に画像をリサイズし、はみ出す分画像位置を移動し、Canvasに表示する。
となっております。
参考サイト
Author Profile
SHARE
