webcode-labサイトロゴ

  • お問い合わせへのリンクバナー

Webcode Laboratory
for website coding & program & seo;

Topics

この Blog CMS について
【ImageMagick/PHP等】画像リサイズ・切り出し基本コマンド一覧 長方形/正方形 サムネイル作成 eyecatch画像

【ImageMagick/PHP等】画像リサイズ・切り出し基本コマンド一覧 長方形/正方形 サムネイル作成

rss

JPG・PNG・GIF等の画像アップロード時のタイミングに、画像を縮小・切り取り・切り抜きしてサムネイルも同時作成したいことがよくあります。
そんな時によく使用する画像のリサイズ&切り出しの、ImageMagick基本コマンド一覧です。

ImageMagickのconvertコマンドを使用し、PHPなどサーバー側で必要な画像サイズのサムネイルパターンに切り出しします。
サイズ縮小のみ(リサイズ)と、画像切り出し+サイズ縮小(リサイズ)とで、
よく使う基本コマンドを一覧にしてみました。

画像は切り抜く際、真ん中切り取りを基本としています。
今回、コマンドの詳しい説明は割愛してます。

 基本的なImageMagickコマンド一覧 目次

   
 
 
 使用サンプル元画像
1024px x 768px(デジカメ標準画像3:4の比率)
オリジナル画像(横長)
横長の元画像 1024px x 768px
   
オリジナル画像(縦長画像)
縦長の元画像 768px x 1024px



縮小リサイズのコマンド(元画像の縦横比率キープ)

 ※下記“before.jpg” “after.jpg”の画像名部分は、画像のパスを相対パス OR フルパスで指定

 
長辺px指定の縮小リサイズ

(例)長辺250pxリサイズ指定

convert -resize 250x250 "before.jpg" "after.jpg"

長辺が幅の場合の画像切り抜き  長辺が高さの場合の画像切り抜き

  長さ矢印 長辺250px


横長画像の場合は幅250pxに、縦長画像の場合は高さ250pxに、長辺基準で縮小リサイズ(元画像の縦横比率キープ)

 
幅px指定の縮小リサイズ

(例)幅250pxリサイズ指定

convert -resize 250x "before.jpg" "after.jpg"

横画像の場合の画像切り抜き  縦画像の場合の画像切り抜き

  長さ矢印 幅250px


横長画像・縦長画像ともに、幅基準で250pxに縮小リサイズ(元画像の縦横比率キープ)

 
高さpx指定の縮小リサイズ

(例)高さ250pxリサイズ指定

convert -resize x250 "before.jpg" "after.jpg"

横画像の場合の画像切り抜き  縦画像の場合の画像切り抜き

  長さ矢印 高さ250px


横長画像・縦長画像ともに、高さ基準で250pxに縮小リサイズ(元画像の縦横比率キープ)

 

 

ここまでのサムネイル作成の場合、リサイズしただけだと横長画像と縦長画像で縦横比が異なります。
横長画像であっても、縦長画像であっても、切り抜き後の縦横サイズを同じにしたい場合もよくあります。
幅・高さを揃えたサムネイルを作成したい

その場合は、下記の切り出し系コマンドを供に利用します。







切り抜き+縮小リサイズのコマンド(元画像の縦横比率変更)

 ※下記“before.jpg” “after.jpg”の画像名部分は、画像のパスを相対パス OR フルパスで指定
正方形で真ん中切り出し(+ 1辺px指定の縮小リサイズ)

(例)1辺250px切り抜き指定
 

元画像が横長の場合
convert -resize x250 -gravity center -crop 250x250+0+0! "before.jpg" "after.jpg"

横長画像の場合の正方形切り抜き  最終切り取り正方形画像

  長さ矢印 1辺250px 元画像の高さいっぱいに正方形切り抜き

元画像の短辺(縦)基準でリサイズし、幅は真ん中切り取りで正方形作成しています。
 
元画像が縦長の場合
convert -resize 250x -gravity center -crop 250x250+0+0! "before.jpg" "after.jpg"

縦長画像の場合の正方形切り抜き   最終切り取り画像

  長さ矢印 1辺500px 元画像の幅いっぱいに正方形切り抜き


元画像の短辺(幅)基準でリサイズし、縦は真ん中切り取りで正方形作成しています。

 

幅 × 高さ 自由指定で真ん中切り出し(+ px指定の縮小リサイズ)

(例)幅250px、高さ220px の切り抜き指定
 

元画像の横比率が、指定切り抜きサイズの横比率より大きい場合

※元画像の横比率(元画像幅 ÷ 元画像高さ) >= 切り抜きサイズの横比率(指定幅 ÷ 指定高さ) の場合

convert -resize x220 -gravity center -crop 250x220+0+0! "before.jpg" "after.jpg"

指定自由サイズに切り抜き(縦基準の場合)  指定自由サイズに切り抜き後(縦基準の場合)

  長さ矢印 幅250px 長さ矢印 高さ220px 元画像の縦いっぱいに幅は真ん中で切り抜き


元画像の縦を基準にリサイズし、幅は真ん中切り取りしています。

 
元画像の横比率が、指定切り抜きサイズの横比率より小さい場合

※元画像の横比率(元画像幅 ÷ 元画像高さ) < 切り抜きサイズの横比率(指定幅 ÷ 指定高さ) の場合

convert -resize 250x -gravity center -crop 250x220+0+0! "before.jpg" "after.jpg"

指定自由サイズに切り抜き(横基準の場合)  指定自由サイズに切り抜き後(横基準の場合)

  長さ矢印 幅250px 長さ矢印 高さ220px 元画像の横いっぱいに縦は真ん中で切り抜き


元画像の幅を基準にリサイズし、高さは真ん中切り取りしています。

 
 

※最後の②「幅 × 高さ 自由指定で真ん中切り取り(+縮小リサイズ)」で正方形も作成できるので、
幅と高さを指定して画像切り出しするなら、②が万能です。

 

実際には、これらリサイズや切り出しトリミング処理以外に、
元画像の幅・高さを取得し、元画像の大きさ判定(指定切り抜きサイズより大きいか)によって画像処理を変更したり、
元画像の縦横の向きを正しく判定(Exif情報で)したり、
リサイズ・切り抜き時に併せてコマンドオプションを加え、圧縮軽量化したりして、画像処理を行います。

一連の流れのご希望があれば、また機会をもって投稿したいと思います。
 


ページの先頭へ

rss
1件目 (1件中)