web analytics

Laravel5 : การอัพโหลดรูปภาพด้วย Intervention Image บน Laravel 5

cover-2

คราวนี้เป็นบทความสั้นๆ เกี่ยวกับการอัพโหลดภาพ ด้วย Intervention image บน Laravel 5 ตัวนี้ เจ๋งมากๆ ใช้งานง่ายอีกต่างหาก เรื่องมีอยู่ว่า ผมอยากจะทำฟีเจอร์อัพโหลดรูปให้กับแอปบันทึกรายรับรายจ่าย เลยนึกถึงตัวนี้ ว่างๆจึงมาเขียนบทความการใช้งานเบื้องต้น

 

รู้จักกับ Intervention Image

มันคือ ไลบรารี่ตัวนึงสำหรับจัดการด้านรูปภาพ ให้ง่ายขึ้น โดยใช้ภาษา php นี่แหละ ภายในตัว มันใช้ไลบรารี่สองตัวอยู่ภายในทำงานร่วมกัน คือ GD Library and Imagick ที่สำคัญมันมี Integration กับ Laravel 5 ด้วย

รายละเอียดทั้งหมดทั้งมวล

http://image.intervention.io/

 

ติดตั้งด้วย Composer

วิธีง่ายๆที่เราสามารถดาวน์โหลดมา คือใช้ Composer ให้เข้าไปที่โฟลเดอร์โปรเจค laravel และเปิด cmd ขึ้นมา พิมพ์

$ php composer.phar require intervention/image

 

2

 

เพิ่ม Provider

ดาวน์โหลดเสร็จแล้วเราก็ต้อง กำหนดให้ laravel เพิ่ม intervention image เข้า Auto load ด้วย ให้เข้าไปที่ config/app.php

เพิ่มบรรทัดข้างล่างเข้าไปใน array ของ $provider

Intervention\Image\ImageServiceProvider::class

 

และเพิ่มบรรทัดข้างล่างใน $aliases

‘Image’ => Intervention\Image\Facades\Image::class

 

จะได้ประมาณณนี้

3

4

 

เขียนหน้าจออัพโหลด

ทีนี้มาเขียน View หน้าจอฟอร์มสำหรับอัพโหลดรูปกันครับ ขอไม่อธิบายเรื่อง Route นะ ข้ามมาเขียนที่ View เลย

อย่าลืมที่ form ต้องใส่ multipart ด้วยนะ

 

5

เขียน Controller

สิ่งสำคัญอยู่ตรงนี้ เราจะนำภาพไปบันทึกใน server ซึ่งตัว Intervention Image ฟีเจอร์เพียบเลย เช่น ย่อ ขยายรูป หมุนปรับ Opacity ก็ทำได้ง่ายๆ

สร้างตัวแปรไฟล์รูปภาพขึ้นมาด้วยคำสั่ง โดย file(‘picture’) คือชื่อ name ในหน้า View ของ file

$image = Image::make(Input::file(‘picture’));

 

ย่อรูปถ้ารูปมีขนาดเกิน 500 px

 

สุดท้ายเรียก method เพื่อบันทึกรูปภาพโดยส่ง path ให้มันไป

$image->save($path);

 

ตัวอย่างโค้ดทั้งหมด

 

ทีนี้ก็จะได้ไฟล์ไปเก็บไว้ยัง path เตรียมไปใช้ต่อได้แล้ว

6

จบแล้ว

บทความสั้นมากๆ เขียนเยอะเดี๋ยวจะมีแต่น้ำ ฮ่าๆ ลองเอาไปประยุกต์ใช้ดูครับ ถ้าใช้งานรูปภาพอะไรบน laravel ก็นึกถึง Intervention Image ได้เลย มีประโยชน์มาก แถม Document ก็ยังอ่านง่ายอีกด้วย ใช้ง่าย ลองเล่นความสามารถอื่นๆได้ที่ เว็บไซต์ของ intervetion image ได้เลยครับ