Tutorial Laravel 5.5 - Memanipulasi Image / Gambar dengan Intervention Image


Laravel sudah menyediakan package untuk melakukan manipulasi image dengan mudah. Pada saat pembuatan program ada kalanya kita membutuhkan fungsi-funsgsi untuk memanipulasi gambar seperti melakukan resize, mengubah kualitas gambar untuk efisiensi, memasukkan watermark, dan lain sebagainya. Cara memanipulasi gambar tersebut sudah terdapat pada package Intervention Image yang seperti biasanya dapat diinstall pada laravel dengan menggunakan composer. Pada artikel kali ini hanya akan saya jelaskan beberapa fungsi saja yang sering digunakan, tidak akan sata bahas semuanya karena package ini memiliki banyak sekali fungsi yang dapat anda baca-baca sendiri nantinya.

#INSTALASI

Untuk instalasi pada Laravel seperti biasanya adalah melalui composer. Jalankan perintah di bawah ini pada command prompt direktori program Laravel anda.

composer require intervention/image

Kemudian tambahkan kode berikut ini yang terdapat dalam direktori config/app.php

Intervention\Image\ImageServiceProvider::class

pada bagian provider dan kode berikut

'Image' => Intervention\Image\Facades\Image::class

pada bagian aliases.



#CARA PENGGUNAAN

Setelah proses instalasi selesai sepenuhnya, sekarang adalah mengetahui bagaimana cara menggunakan package Intervention Image ini. Pada bagian cara penggunaan ini akan saya bagi menjadi beberapa bagian sesuai dengan fungsinya.


#MEMBACA IMAGE

Cara ini adalah dasar dari keseluruhan manipulasi gambar. Untuk melakukan berbagai macam manipulasi gambar, hal pertama yang perlu dilakukan adalah membaca file image itu terlebih dahulu. Caranya dapat dilihat pada kode berikut ini

$img = Image::make('url_image');

Di mana url_image diisi dengan url dari gambar yang akan dibaca. Jika anda melakukan upload file maka url_image diisi dengan $request->file('image') misalnya. Sedangkan saat anda ingin memanipulasi gambar yang sudah ada anda tinggal memasukkan url dari gambar tersebut.


*******************************
Yang paling utama saat anda akan menggunakan package ini adalah gunakan perintah use Image; terlebih dahulu pada file Controller atau file apapun di mana anda menggunakan fungsi-fungsi Image ini.
*******************************


#MENYIMPAN IMAGE

Kebalikan dari penjelasan di atas, Fungsi yang satu ini selalu digunakan di bagian akhir setelah anda selesai melakukan proses manipulasi pada gambar. Caranya adalah seperti berikut 

$img->save('url_tujuan', 'quality');

Di mana url_tujuan adalah nama file tujuan dari penyimpanan gambar yang anda lakukan. Contohnya jika anda ingin menyimpan gambar anda pada direktori upload dan nama file test.jpg maka kode yang ditulis adalah sebagai berikut 

$img->save('upload/test.jpg');

Dan yang perlu diingat adalah file tersebut akan tersimpan di dalam direktori public dari program laravel yang anda buat. Parameter kedua adalah mengatur kualitas dari gambar yang disimpan, Di mana kualitas gambar ini memiliki angka mulai dari 0 sampai 100 dan hanya berfungsi untuk gambar dengan format JPG. Nilai defaultnya adalah 90.



#RESIZE IMAGE

Cara untuk melakukan resize image adalah dengan kode berikut 

// resize image ke ukuran pasti
$img->resize(300, 200);

// resize hanya lebar image
$img->resize(300, null);

// resize hanya tinggi image
$img->resize(null, 200);

// resize image dengan lebae 300 dan tinggi mengikuti sesuai aspek rasio
$img->resize(300, null, function ($constraint) {
    $constraint->aspectRatio();
});

// resize image dengan tinggi 200 dan lebar mengikuti aspek rasio
$img->resize(null, 200, function ($constraint) {
    $constraint->aspectRatio();
});

Seperti penjelasan sebelumnya selalu lakukan dahulu kode untuk membaca image yang akan dimanipulasi, kemudian lakukan manipulasi gambar, dan terakhir adalah lakukan penyimpanan gambar.



#CROP IMAGE

Berikut ini adalah perintah untuk melakukan crop image

$img->crop(lebar, tinggi, posisi x, posisi y);

Lebar adalah lebar gambar yang akan di crop, tinggi adalah tinggi dari gambar yang akan di crop, posisi x adalah koordinat x titik mulai gambar akan di crop dan posisi y adalah koordinat y titik mulai gambar akan di crop.



#WATERMARK

Cara ini dilakukan untuk memasukkan suatu gambar ke dalam gambar terentu pada posisi yang diinginkan. Berikut ini adalah contoh penggunaannya

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

// paste another image
$img->insert('public/bar.png');

// create a new Image instance for inserting
$watermark = Image::make('public/watermark.png');
$img->insert($watermark, 'center');

// insert watermark at bottom-right corner with 10px offset
$img->insert('public/watermark.png', 'bottom-right', 10, 10);

Dari contoh di atas, terdapat 2 cara untuk memasukkan gambar. Yaitu yang cara pertama dengan cara langsung tanpa membuat instance image baru untuk gambar baru dan cara kedua adalah dengan membuat 2 instance gambar yaitu untuk gambar tujuan dan gambar watermark nya. Parameter dari perintah insert adalah gambar yang akan dimasukkan, posisi gambar, posisi x, dan posisi y.

Untuk parameter posisi sendiri dapat diisi dengan perintah-perintah berikut ini 
  • top-left (default)
  • top
  • top-right
  • left
  • center
  • right
  • bottom-left
  • bottom
  • bottom-right


Untuk perintah-perintah lebih lengkapnya dapat anda baca pada link berikut http://image.intervention.io/. Masih banyak perintah yang berguna untuk melakukan manipulasi gambar seperti rotate, greyscale, flip, dan lain-lain. 

Demikianlah penjelasan saya pada artikel Tutorial Laravel 5.5 - Memanipulasi Image / Gambar dengan Intervention Image ini. Semoga keterangan yang saya berikan dapat dipahami dan diterapkan dengan mudah. Selamat mencoba
Tutorial Laravel 5.5 - Memanipulasi Image / Gambar dengan Intervention Image Tutorial Laravel 5.5 - Memanipulasi Image / Gambar dengan Intervention Image Reviewed by Donny Winarto on February 02, 2019 Rating: 5

No comments:

Powered by Blogger.