Halo teman-teman,
Saya sedang melakukan explorasi mandiri di Laravel 10, khususnya bagaimana cara menambahkan teks pada gambar (Text on Image). Ide ini muncul setelah saya melihat ada kebutuhan untuk memberikan watermark, label, atau bahkan teks dinamis pada gambar secara otomatis melalui aplikasi web.

Dalam prosesnya saya menggunakan: invertion image yang mana ini adalah sebuah library php untuk manipulasi gambar. dokumentasinya bisa di lihat di link ini https://image.intervention.io/v3. library ini memudahkan kita untuk melakukan berbagai operasi seperti crop, resize, rotate, hingga menambahkan teks ke dalam gambar. lalu ada tambahan bebarapa bagian kecil yaitu bostrap css untuk mempermudah pembuatan tampilan juga mengambil fonts pada google fonts untuk customisasi fonts tambahan.

ok langsung saja ke instalasi untuk awalan seperti biasa, kita mulai dari install composer. tapi sebelum itu pastikan php dan composer sudah terinstall dan perlu dihatikan dari ke 2 versi tersebut agar menghindari kegagalan karena adanya ketidak cocokan yang berakibat tidak berjalannya laravel. didalam project ini saya menggunakan laravel 10.

nah saat dirun menggunakan 'php artisan serve' tampilan lobby yang akan keluar yaitu tampilan default laravel


nah ada bagian buat file blade baru pada resouce/views yaitu index.blade.php yang isi codenya kurang lebih seperti ini.


lalu pastikan pada routes/web.php ubah 'welcome' menjadi 'index', tujuannnya unutk mengubah route default dari welcome.blade.php menjadi ke index.blade.php, hasil nya untuk derfault tampilan kurang lebih seperti ini

selanjutnya masuk ke invertion image.

untuk menggunakan library invertion perlu menginstallnya menggunakan 'composer require intervention/image-laravel' pada terminal nah kelebihan antara install menggunakan ' -laravel '  dengan tidak('composer require intervention/image').kalau  tidak menggunakan -laravel maka hanya core library PHP (bisa dipakai di semua project PHP, termasuk Laravel, tapi harus setup manual, tetapi jika pakai sudah ada ServiceProvider, Facade, dan dukungan config publish → Laravel langsung bisa pakai tanpa konfigurasi ribet.
lengkapnya bisa dicek pada dokumentasinya https://image.intervention.io/v3/getting-started/frameworks. 

Setelah instalasi selesai tambahkan di config/app.php  ''Image'=>Intervention\Image\Facades\Image::class,'  pada bagian aliases. di lanjutkan run 

php artisan vendor:publish --provider="Intervention\Image\Laravel\ServiceProvider"

tujuannya untuk copy file konfigurasi bawaan package ke project.

• Package Intervention Image punya config default di dalam vendor. Dengan perintah ini, file config tersebut dipublish ke config/image.php.Jadi bisa ubah pengaturan tanpa ngotak-atik file vendor (yang bisa ke-overwrite kalau update). jika sudah selesai dan berhasil runnya pasti akan ada image.php pada config.
  
  

Selanjutnya buka kembali bagian routes/web.php dan tambahkan route ' Route::post('post',[Controller::class,'store']); ' tujuannya Laravel akan mendaftarkan route dengan URL /post. Method HTTP-nya POST (biasanya dipakai untuk kirim data dari form, upload file, dll). Kalau ada request POST ke /post, Laravel akan jalankan method store() yang ada di Controller.

Di lanjut pada inti project ini yaitu controller.php yang ada pada app/http/controller. kurang lebih isinya seperti ini:

Sedikit penjelasan fungsi syntax
~ untuk bagian import/use statement

  - JpegEncoder → buat encode gambar ke format JPEG.

  - Request → ambil data request (termasuk file upload).

  - Driver → pakai engine GD (driver untuk manipulasi gambar).

  - ImageManager → object utama untuk baca/edit gambar.

  - AuthorizesRequests, ValidatesRequests → trait Laravel bawaan untuk otorisasi & validasi.

  - BaseController → parent class semua controller di Laravel.

~ untuk kelas controler

membuata controller utama -> use AuthorizesRequests, ValidatesRequests → biar bisa pakai fitur authorize() & validate().

~ Cek & Ambil File Upload

untuk logicnya pada hasfile ia akan mengecek apakah ada input masuk dari 'file' yang terhubung ke index langsung. lalu pada file $request ia akan mengambil file yang di upload. dan yang terakhir buat nama unit timestamp ditambah nama original file yang diup. 
Sedikit fakta tentang timestamp:

time() di PHP = jumlah detik sejak 1 Januari 1970 (Unix Epoch). Jadi angka ini unik setiap detiknya.

Contoh:

• Sekarang time() = 1737852800 → artinya detik ke 1.738.852.800 sejak 1970.
• Makanya dipakai buat nama file unik biar gak nabrak nama yang sama.

Misalnya:

• Upload file foto.png → jadi 1737852800_foto.png.
• Kalau upload lagi detik berikutnya → 1737852801_foto.png.

~ setup image manager

bagian imageManager  untuk menggunakan engine GD untuk manipulasi gambar, dan untuk manager untuk baca

 file gambar yang di upload jadi object image.

~ bagian custom text in image

  - text() ini untuk menambahkan text disini isinya yang bisa dicustom disini saya mengisi 'every life is a gift'

  - 200, 200 untuk posisi x dan y textnya
  - juga ada inisialisasi function untuk textnya yg tujuannya untuk cutomisasi textnya seperti custom font, sizenya, colornya, text-alignnya, juga valignnya.
dan pada bagian ini saya yakin bisa dikembangkan untuk cutomisasi penuh disisi client dan user bisa meng-custom mungkin selain text tapi logo, twibon, atau tanda tangan sesuai dengan keinginan masing2 user.

~ lalu ada bagian save image

yang bertujuan menyimpan hasil edit pada folder images.

~ dan yang terakhir

ini adalah encode dan return response. 

  - encode menggunakan JpegEncoder yang bertujuan mengubah format apapun itu gambarnya menjadi .jpeg
meskipun pada akhirnya balik ke atas ia akan balik lagi ke nama awal saat di upload jadi akan tetap balik ke format awal.
  - reponse 200 kirim balik ke browser dengan HTTP 200 OK.

  - kasih tahu browser kalau ini file gambar JPEG, jadi bisa langsung ditampilkan.

~ return back

balik lagi jika tidak ada file yang di up.

krang lebih seperti itu, sebelum mengakhiri. pastikan pada directory public untuk membuat folder 'images' , juga jangan lupa untuk menambahkan:

pada web.php , di paling atas dengan tujuan supaya bisa pakai Route::get(), Route::post(), dll tanpa nulis full namespace panjang. juga pada app. php tambahkan:

• dengan tujuan supaya bisa extend/merge daftar alias class di Laravel dengan cara yang rapi.
  
  saat semua sudah disusun maka project laravel sederhana ini sudah bisa di gunakan, silahkan jalankan serve nya lalu upload gambarnya, dan seperti ini hasilnya:
  
  
  hasilnya bisa di cek pada folder images
  
  
  
  

Kesimpulan

1. Upload File
File gambar (format apapun, misalnya PNG/JPG) diupload lewat form.

1. 2. ImageManager + Driver
   Laravel pakai Intervention Image dengan ImageManager(new Driver()) (driver GD).
   → Ini yang membaca, mengedit, dan menyimpan gambar.
• 3. Penambahan Text

 - Posisi teks diatur lewat koordinat X, Y.

 - align('center') untuk meratakan teks horizontal.

 - valign('top') biar titik Y dianggap dari atas teks.

 - Dengan $img->width() / 2, teks otomatis ada di tengah horizontal gambar, tapi tinggi tetap fix 200 px.

• 4. Simpan & Encode

 - Disimpan di folder public/images/ dengan nama unik (timestamp_namafile).

 - Encode ke JPEG saat dikembalikan ke browser.

 - Jadi hasil di browser → .jpg,

 - hasil file yang tersimpan → masih format asli upload (misalnya .png).

• 5. Route & Controller

 - web.php dengan use Illuminate\Support\Facades\Route; dipakai untuk definisi route.

 - Controller meng-handle request upload → edit → simpan → return ke user.