Blog

HTML5のCanvasで画像をリサイズ&トリミングして中央表示する方法

2014.10.21Cat:Canvas html5 jQuery デザイナー

画像をリサイズ&トリミングして中央は位置する方法にも、

PHPなどサーバーサイドで書き出す方法や,

JavaScriptでトリミングしているように見せかける方法、

CSS3のcropを用いる方法などいろいろありますが、

今回はCanvasを使って画像をリサイズ&トリミングし、中央に配置する方法について考えてみんました。

 

↓こちらがデモです

DEMO

 

方法

HTML

 

JavaScript

 

手順としては、

  1. HTMLで、<img>の代わりに<canvas>を設置し、src属性の代わりにdata-src属性に画像のパスを設定する。
  2. JavaScriptで、Image()オブジェクトを使って、元画像の大きさを取得し、縦横比を計算。
  3. 縦・横の幅の小さい方を基準に画像をリサイズし、はみ出す分画像位置を移動し、Canvasに表示する。

 

となっております。

 

参考サイト

drawImage() メソッド – Canvasリファレンス – HTML5.JP

【jQuery】画像のオリジナルサイズを取得する | 03LOG

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ