PHPでの開発をしているとよく必要になってくる機能の一つに「画像のアップロード」というのがあります。
画像の送信自体は input タグの type file を利用すれば簡単に実行できるのですが、いざ送信された画像のリサイズやトリムなどをしようとするとトタンに計算やらを行う必要がでてきます。
そんな時は intervention の出番です。
intervention は直感的に画像の編集ができるようになっているのでとてもおすすめです。
intervention は直感的に画像の編集ができるようになっているのでとてもおすすめです。
ということで今日は intervention の記事をお届けしたいとおもいます。
【準備】
intervention は composer でインストールできます。
(ホントに composer は便利ですね^^)
composer require intervention/image
【使い方】
1.まずは画像を読み込みます。
intervention は様々な画像の読み込み方法が用意されていて、以下がその全てになります。
- ローカル画像のパス
- 画像のリソース
- GDのリソース
- 画像のURL
- (Laravelの場合は)アップロードされた画像を取得するメソッド
今回は基本的な利用法として画像のパスから読み込む方法を見ていきましょう。
$img = Image::make('example.jpg');
はい。
たったこれだけで画像編集の準備が完了です。
後は、画像の大きさを変更したり様々な編集ができるわけですがここでは基本的なメソッドを紹介します。
・サイズの変更(リサイズ)
$img->resize(300, 200);
横と縦の長さを入力するだけで完了します。
もしどちらかの数値に null を指定した場合は元の長さになります。
つまり、
$img->resize(null, 200);
とした場合、元の画像の横の長さが500pxだったとすると画像のサイズは 500×200 px になります。
・クロップ(切り取り)
crop() は画像の一部を切り取るメソッドです。
引数は、
となります。
・fit(フィット)
fix() メソッドを利用すると画像が指定したサイズいっぱいになるように自動で切り取りとリサイズを行ってくれます。
つまり、 編集後の縦横比が違っている場合は画像の縦か横が切り取られることになります。
(上のサンプル画像は横が切り取られています)
・rotate(回転)
rotate() は画像を回転させるメソッドです。
数値にはマイナスも指定できます。
・text(文字を挿入)
text() を利用すると画像の中に文字を挿入することができます。テレビのテロップみたいなものですね。
引数は
ちなみに日本語を利用する場合は以下のようにフォントを指定しないといけません。
また、画像の色を指定したい場合もこのようにクロージャを利用して指定します。
・insert(画像の挿入)
insert() は画像の中に別の画像を挿入するメソッドです。
サンプルのように好きな位置に別の画像(上のは私の顔写真です)を重ねることができます。
画像にロゴなどを追加したい場合に利用できると思います。
もし画像の中央に挿入したい場合は
と「center」を追加するだけでOKで、それ以外にも
また、
とX、Y座標を指定するとその長さの分だけ中央に寄せることもできます。
・opacity(透明化)
opacity() を使うと画像を透明にすることができます。
数値が100の場合、透明にはなりません。
・save(画像の保存)
もし png や gif などで保存したい場合は「example.png」「example.gif」とすればOKです。
また、以下のようにすることで画像の質を変更することも可能です。
(100が一番質がいい状態です)
・encode(画像の変換)
encode() は画像の形式を変換することができます。
また以下のようにすることで直接画像を表示させることもできます。
ちなみに利用できる画像形式は以下になります。
・iptc & exif(画像データ)
iptc() と exif() は画像に埋め込まれた文字データを読み取ります。
【IPTC】
1.IPTCの全データを取得
【EXIF】
1.EXIFの全データを取得
・width、height、filesize(各種画像のデータ)
そのまま、上から
を取得することができます。
・クロップ(切り取り)
$img->crop(100, 100, 25, 25);
crop() は画像の一部を切り取るメソッドです。
引数は、
- 切り取る長さ
- 切り取る高さ
- 切り取りを開始する位置(X座標)・・・任意
- 切り取りを開始する位置(Y座標)・・・任意
となります。
・fit(フィット)
$img->fit(500, 360);
fix() メソッドを利用すると画像が指定したサイズいっぱいになるように自動で切り取りとリサイズを行ってくれます。
つまり、 編集後の縦横比が違っている場合は画像の縦か横が切り取られることになります。
(上のサンプル画像は横が切り取られています)
・rotate(回転)
$img->rotate(-45);
rotate() は画像を回転させるメソッドです。
数値にはマイナスも指定できます。
・text(文字を挿入)
text() を利用すると画像の中に文字を挿入することができます。テレビのテロップみたいなものですね。
$img->text('Deep code is beautiful!!', 50, 50);
引数は
- 挿入したい文字
- X座標
- Y座標
ちなみに日本語を利用する場合は以下のようにフォントを指定しないといけません。
また、画像の色を指定したい場合もこのようにクロージャを利用して指定します。
$img->text('ディープ・コーブの景色は感激です!', 10, 25, function($font) { $font->file('sazanami-gothic.ttf'); $font->size(22); $font->color('#ee0000'); });
・insert(画像の挿入)
$img->insert('face.jpg');
insert() は画像の中に別の画像を挿入するメソッドです。
サンプルのように好きな位置に別の画像(上のは私の顔写真です)を重ねることができます。
画像にロゴなどを追加したい場合に利用できると思います。
もし画像の中央に挿入したい場合は
$img->insert('face.jpg', 'center');
と「center」を追加するだけでOKで、それ以外にも
- top-left (default)
- top
- top-right
- left
- center
- right
- bottom-left
- bottom
- bottom-right
また、
$img->insert('face.jpg', 'bottom-right', 10, 10);
とX、Y座標を指定するとその長さの分だけ中央に寄せることもできます。
・opacity(透明化)
$img->opacity(50);
opacity() を使うと画像を透明にすることができます。
数値が100の場合、透明にはなりません。
・save(画像の保存)
$img->save('example.jpg');
もし png や gif などで保存したい場合は「example.png」「example.gif」とすればOKです。
また、以下のようにすることで画像の質を変更することも可能です。
(100が一番質がいい状態です)
$img->save('example.jpg', 60);
・encode(画像の変換)
encode() は画像の形式を変換することができます。
また以下のようにすることで直接画像を表示させることもできます。
header('Content-Type: image/png'); echo $img->encode('png');
ちなみに利用できる画像形式は以下になります。
- jpg
- png
- gif
- tif
- bmp
- data-url
・iptc & exif(画像データ)
iptc() と exif() は画像に埋め込まれた文字データを読み取ります。
【IPTC】
1.IPTCの全データを取得
$data = Image::make('public/foo.jpg')->iptc();2.Copyright だけを取得
$copyright = Image::make('public/foo.jpg')->iptc('Copyright');
【EXIF】
1.EXIFの全データを取得
$data = Image::make('public/foo.jpg')->exif();2.Model だけを取得
$name = Image::make('public/foo.jpg')->exif('Model');
・width、height、filesize(各種画像のデータ)
echo $img->width(); echo $img->height(); echo $img->filesize();
そのまま、上から
- 画像の横幅
- 画像の縦幅
- ファイルサイズ
を取得することができます。
ということで、今回は便利な画像編集パッケージの intervention の使い方をお届けしました。
今回は紹介できませんでしたが、 intervention には線や丸を書いたりするなど他の機能もありますので興味のある方はぜひトライしてみてください。
ではでは。
今回は紹介できませんでしたが、 intervention には線や丸を書いたりするなど他の機能もありますので興味のある方はぜひトライしてみてください。
ではでは。
0 件のコメント:
コメントを投稿