Edited at
LaravelDay 13

Intervention Image 全51個のAPIを試す

More than 1 year has passed since last update.

これはLaravel Advent Calendar 2017 13日目の記事になります。

こんにちは @kako_351です。

12日目の記事は, @willow710kut さんの Laravelで過去に詰まった点を穴開き形式でまとめ。 でした。

Laravelで躓きやすいところをクイズ感覚で確認できるが素敵ですね。知ってるものでも、穴埋めだと一瞬「あれ?」となりますね(汗)。リンク先に飛び確認してLaravel知識を再確認できました。

さて、今回は、前に仕事で触った「Intervention Image」に感動したので、「Intervention Image」の全51個のAPIを試してみようと思います。

公式はこちら

Intervention Image


オリジナル画像

この画像にいろいろエフェクトやAPI処理をしていきます。

この間買ったダンボーフィギュアを自分で撮った写真です。

かわいいよ。。。ダンボー。

sample.jpg


1. backup

現在のイメージ状態をバックアップします。reset()とともに使います。

以下の場合、#b53717で塗りつぶされた画像が表示されます。


コード

$img = Image::canvas(120, 90, '#000000');

// fill image with color
$img->fill('#b53717');

// backup image with colored background
$img->backup();

// fill image with tiled image
$img->fill('#DD0000');

// return to colored background
$img->reset();


表示

1backup.png


2. blur

ぼかします。


コード

// create new Intervention Image

$img = Image::make('public/foo.jpg');

// apply stronger blur
$img->blur(15);


表示

2.jpg

ぼけてるよ。。。ダンボー。


3. brightness

画像の明るさを調整します。


コード

// create new Intervention Image

$img = Image::make('public/foo.jpg');

// increase brightness of image
$img->brightness(35);


表示

3.jpg

まぶしいよ。。。ダンボー


4. cache

キャッシュを作成します。


 コード

// create a cached image and set a lifetime and return as object instead of string

$img = Image::cache(function($image) {
$image->make('public/foo.jpg')->resize(300, 200)->greyscale();
}, 10, true);


5. canvas

新しい空の状態のイメージインスタンスを作成します。


コード

// create a new empty image resource with red background

$img = Image::canvas(120, 90, '#0000ff');


表示

5.png


6. circle

指定のx,y座標で、直径の円を描画します


コード

$img = Image::make('public/foo.jpg');

// draw a filled blue circle
$img->circle(100, 50, 50, function ($draw) {
 $draw->background('#0000ff');
});


表示

6.jpg

左上に青い〇が描かれてますね。


7. colorize

画像のRGBカラー値を変更します。


コード

$img = Image::make('public/foo.jpg');

// take out red color and add blue
$img->colorize(-100, 0, 100);


表示

7.jpg

青いよ。。。ダンボー


8. contrast

コントラストを調整します。


コード

$img = Image::make('public/foo.jpg');

// increase brightness of image
$img->contrast(65);


表示

8.jpg

色味強いよ。。。ダンボー


9. crop

トリミングします。


コード

$img = Image::make('public/foo.jpg');

// crop image
$img->crop(100, 100, 25, 25);


表示

9.jpg

頭www


10. destroy

メモリを解放します。


コード

$img = Image::make('public/foo.jpg');

// perform some modifications and destroy resource
$img->resize(320, 240);
$img->save('public/small.jpg');
$img->destroy();


11. ellipse

指定のx,y座標で、楕円の円を描画します


コード

$img = Image::make('public/foo.jpg');

$img->ellipse(100, 200, 150, 150, function ($draw) {
$draw->background('#0000ff');
});


表示

11.jpg

顔隠れたよ。。。ダンボー。


12. encode

エンコードします。以下の指定が可能です。


  • jpg - JPEGエンコードされた画像データを返す


  • png - 戻り値ポータブルネットワークグラフィックス(PNG)エンコードされたイメージデータ


  • gif - return GIF(Graphics Interchange Format)エンコードされたイメージデータ


  • tif -returnタグ付きイメージファイル形式(TIFF)でエンコードされたイメージデータ


  • bmp - ビットマップ(BMP)符号化画像データを返す


  • ico - ICOエンコードされた画像データを返す


  • psd - Photoshop Document(PSD)でエンコードされた画像データを返す


  • webp - WebPでエンコードされた画像データを返す


  • data-url - 現在のイメージデータをデータURIスキーム(RFC 2397)でエンコードします。



コード

// encode image as data-url

$data = (string) Image::make('public/bar.png')->encode('data-url');


13. exif

Exifメタ情報を取得します。


コード

// read all existing data into an array

$data = Image::make('public/foo.jpg')->exif();


戻り値例

array(8) {

["FileName"]=>
string(10) "sample.jpg"
["FileDateTime"]=>
int(1513009660)
["FileSize"]=>
int(12034)
["FileType"]=>
int(2)
["MimeType"]=>
string(10) "image/jpeg"
["SectionsFound"]=>
string(7) "COMMENT"
["COMPUTED"]=>
array(4) {
["html"]=>
string(24) "width="600" height="337""
["Height"]=>
int(337)
["Width"]=>
int(600)
["IsColor"]=>
int(1)
}
["COMMENT"]=>
array(1) {
[0]=>
string(57) "CREATOR: gd-jpeg v1.0 (using IJG JPEG v90), quality = 60"
}
}


14. filesize

ファイルサイズを取得します。


コード

$img = Image::make('public/foo.jpg');

// get file size
$size = $img->filesize();


戻り値例

12034


15. fill

画像を色または別のイメージで塗りつぶします。


コード

$img = Image::canvas(800, 600);

// fill image with color
$img->fill('#cccccc');


表示

15.jpg


16. filter

カスタムフィルタを適用します。

このAPIを使うには、

Intervention\Image\Filters\FilterInterface

にフィルタエフェクトを実装する必要があります。

デフォルトでは以下のような表示になるデモフィルターが実装されています。


コード

$img = Image::make('public/foo.jpg');

// apply filter
$img->filter(new DemoFilter(45));


表示

16.jpg


17. flip

水平または垂直にミラーリングします。


コード

$img = Image::make('public/foo.jpg');

// flip image vertically
$img->flip('v');


表示

17.jpg

逆さだよ。。。ダンボー。


18. fit

切り抜きとサイズ変更を行います。


コード

$img = Image::make('public/foo.jpg');

// crop the best fitting 5:3 (600x360) ratio and resize to 600x360 pixel
$img->fit(200, 400);


表示

18.jpg


19. gamma

ガンマ補正を行います。


コード

$img = Image::make('public/foo.jpg');

// apply gamma correction
$img->gamma(1.6);


表示

19.jpg


20. getCore

イメージのコアインスタンスを読み込みます。


コード

$img = Image::make('public/foo.jpg');

// get GD or Imagick instance
$img->getCore();


戻り値例

以下はGDの場合になります。

resource(461) of type (gd)


21. greyscale

グレースケールに変換します。


コード

$img = Image::make('public/foo.jpg')->greyscale();


表示

21.jpg

グレーだよ。。。ダンボー。


22. height

画像の高さを取得します。


コード

$height = Image::make('public/foo.jpg')->height();


戻り値例

int(337)


23. heighten

指定の高さに画像を変更をし、アスペクト比を制限します。


コード

// resize image to new height

$img = Image::make('public/foo.jpg')->heighten(100);


表示

23.jpg


24. insert

指定された画像を現在の画像に貼り付けます。

ウォーターマークなどを作成できるようです。


コード

// create new Intervention Image

$img = Image::make('public/foo.jpg');

// paste another image
$img->insert('images/watermark.png','bottom-right');


表示

24.jpg


25. interlace

インターレースモードを切り替えます。

インターレースモードを切り替えることによって、インターレースまたは標準モードで画像をエンコードする必要があるかどうかを判断します。JPEG画像がインターレースに設定されている場合、画像はプログレッシブJPEGとして処理されます。


コード

$img = Image::make('public/foo.png');

// enable interlacing
$img->interlace();

// save image interlaced
$img->save();


26. invert

画像のすべての色を反転します。


コード

$img = Image::make('public/foo.jpg')->invert();


表示

25.jpg


27. iptc

IPTCメタ情報を読み込みます。


コード

// read all existing data into an array

$data = Image::make('public/foo.jpg')->iptc();


28. limitColors

画像を指定された最大の色数を持つカラーテーブルに変換します。


コード

$img = Image::make('public/foo.png');

// limit colors to 255 (PNG-8) blending transparency against orange
$img->limitColors(255, '#ff9900');


表示

28.jpg

ちょっとオレンジっぽいです。


29. line

線を描画します。

ドライバがImagickであれば線の太さも指定できます。


コード

$img = Image::make('public/foo.png');

$img->line(0, 100, 300, 100, function ($draw) {
 $draw->color('#ff000');
//Imagick only option
// $draw->width(5);
});


表示

29.jpg


30. make

画像ソースから新しいイメージインスタンスを作成します。

大体はこのAPIを呼び出すところから始まります。


コード

// create a new image resource from file

$img = Image::make('public/foo.jpg');


31. mask

指定された画像ソースをアルファマスクとして現在の画像に適用します。


コード

// create a new image resource from file

$img = Image::make('public/foo.jpg');
// Apply another image as alpha mask on image
$img->mask("images/mask.png");


表示

31.jpg


32. mime

MIMEタイプを取得します。


コード

// read mime type of image

$mime = Image::make('public/foo.jpg')->mime();


戻り値例

"image/jpeg"


33. opacity

現在のイメージの不透明度を設定します。

不透明の場合は100%から完全な透明度の場合は0%に設定します。


コード

// create Image from file and set transparency to 50%

Image::make('public/foo.jpg')->opacity(50);


表示

33.jpg


34. orientate

XIF画像プロファイル設定 'Orientation'を読み取り、画像を回転して画像を正しく表示します。


コード

// instantiate image with auto-orientation

$img = Image::make('foo.jpg')->orientate();


表示

34.jpg


35. pickColor

現在の画像の点x、yの色を選択し、オプションの指定された形式で返します。


コード

$img = Image::make('public/foo.jpg');

// pick a color at position and format it as hex string
$hexcolor = $img->pickColor(100, 100, 'hex');


戻り値例

"#decaaf"


36. pixel

指定された色の単一のピクセルをx、yの位置に描画します。


コード

$img = Image::canvas(100, 100, '#ddd');

// draw a blue pixel
$img->pixel('#0000ff', 32, 32);


表示

35.jpg


37. pixelate

指定されたピクセルサイズで現在のイメージにピクセル化効果を適用します。


コード

$img = Image::make('public/foo.jpg');

// apply pixelation effect
$img->pixelate(12);


表示

37.jpg


38. polygon

ポリゴンを描画します。


コード

$img = Image::canvas(800, 600, '#ddd');

// define polygon points
$points = array(
40, 50, // Point 1 (x, y)
20, 240, // Point 2 (x, y)
60, 60, // Point 3 (x, y)
240, 20, // Point 4 (x, y)
50, 40, // Point 5 (x, y)
10, 10 // Point 6 (x, y)
);

// draw a filled blue polygon with red border
$img->polygon($points, function ($draw) {
$draw->background('#0000ff');
$draw->border(1, '#ff0000');
});


表示

38.png


39. rectangle

長方形を描画します。


コード

$img = Image::canvas(100, 100, '#ddd');

// draw an empty rectangle border
$img->rectangle(10, 10, 190, 190);

// draw filled red rectangle
$img->rectangle(5, 5, 195, 195, function ($draw) {
$draw->background('#ff0000');
});

// draw transparent rectangle with 2px border
$img->rectangle(5, 5, 195, 195, function ($draw) {
$draw->background('rgba(255, 255, 255, 0.5)');
$draw->border(2, '#000');
});


表示

39.png

ダンボー関係なくなってきた。。


40. reset

以前に保存された状態に変更のすべてをリセットします。

backup()とともに使用します。


コード

$img = Image::make('public/foo.jpg');

// backup status
$img->backup();

// perform some modifications
$img->resize(320, 240);
$img->invert();
$img->save('public/small.jpg');

// reset image (return to backup state)
$img->reset();


表示

40.png


41. resize

画像のサイズを変更します。


コード

$img = Image::make('public/foo.jpg');

// resize the image to a width of 300 and constrain aspect ratio (auto height)
$img->resize(300, null, function ($constraint) {
$constraint->aspectRatio();
});


表示

41.jpg

ダンボー。やっぱりかわいいよ。ダンボー。


42. resizeCanvas

キャンバスサイズを変更します。


コード

$img = Image::make('public/foo.jpg');

// resize image canvas
$img->resizeCanvas(300, 200);


表示

42.jpg

どアップダンボー。


43. response

画像をHTTPレスポンスで返します。


コード

$img = Image::canvas(800, 600, '#ff0000');

// send HTTP header and output image data
echo $img->response();


表示

43.jpg


44. rotate

反時計回りに指定した角度だけ回転させます。


コード

$img = Image::make('public/foo.jpg');

// rotate image 45 degrees clockwise
$img->rotate(-45);


表示

44.jpg

回ってるよ。。。ダンボー。


45. save

画像をファイルシステムに保存します。


コード

$img = Image::make('public/foo.jpg')->resize(300, 200);

// save file as jpg with medium quality
$img->save('public/bar.jpg', 60);


46. sharpen

画像をシャープにします。


コード

$img = Image::make('public/foo.jpg');

// sharpen image
$img->sharpen(15);


表示

46.jpg

気持ちくっきりしてる感じします。


47. stream

画像を符号化フォーマットと所定の画質及び画像データに基づいて新たなPSR-7ストリームを作成します。


コード

// encode png image as jpg stream

$stream = Image::make('public/foo.png')->stream('jpg', 60);


表示

47.jpg


48. text

画像にテキストを書き込みます。


コード

$img = Image::make('public/foo.jpg');

// write text
$img->text('Hello Would', 120, 100);


表示

48.jpg


49. trim

指定された色のイメージスペースを削除します。


コード

// trim image (on all borders with bottom-right color)

Image::make('public/foo.jpg')->trim('bottom-right');


表示

49.jpg


50. widen

新しい幅にリサイズし、アスペクト比を制限します。


コード

$img = Image::make('public/foo.jpg')->widen(300);


表示

50.jpg


51. width

新しい幅にリサイズし、アスペクト比を制限します。


コード

// read width of image

$width = Image::make('public/foo.jpg')->width();


戻り値例

600

以上、全51個APIでした。

exifとrotateの組み合わせで、スマホの写真が横向きになるのを補正したりと、現場でも役に立つ便利なライブラリです。