jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

アップロードした画像をリサイズしてサムネイル用に真四角にする

2018年2月26日

画像アップロードで複数サイズを生成する際に、そういえば真四角にトリミングする方法を知らなかったなぁと思いまして、考えてみました。

サンプルはこちら

縦長でも横長でもだいたい中央でトリミングされているかと思います。画像のドラッグドロップに関してはこちらに書いていますので省きます。

phpでアップロードした画像をリサイズする

画像のアップロード方法は色々なサイトで紹介されているので省きますが、簡単に言えばアップロードされた画像を、作成したい縦横サイズを指定してリサイズすることになります。当然、縦横の比率に応じて計算し、新しい縦横サイズを決めてあげないとぴったりと収まりません。

横長画像の例

横÷縦で比率を求め、サムネイルサイズ(300pxと仮定)で縮小した画像サイズを決めます。縦はそのまま300px、横は300pxに比率を掛けたものになります。そのサイズで画像を作成しておきます。ここで中央に寄せる位置を決めるのですが、縦は300pxそのままなので0、横はリサイズした幅から300pxを引き、その半分の位置を左端にする事で中央に寄る事になります。

縦長画像は縦に対してこの計算を行います。

 

サイズが決まったらサムネイル画像を作成

あとは300px * 300px で白紙の画像を作成し、決めた座標を指定して貼り付けるだけですね。

おそらくこの手の処理を簡単に出来るプラグインとか有ると思うんですが、自分で出来ればコントロールし易いかと思います。今はもう、WordPress等のCMSが主流ですので、あえてこういったものを作る案件って少ないのですが、HTMLのみで作成したサイトにお知らせを掲載したいといったことも多少は有りますので、エディターなんかに組み込むと良いかもしれません。

 

 
  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP