laravel
Intervention
LaravelDay 13

Intervention Image 全51個のAPIを試す

これは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の組み合わせで、スマホの写真が横向きになるのを補正したりと、現場でも役に立つ便利なライブラリです。