คราวนี้เป็นบทความสั้นๆ เกี่ยวกับการอัพโหลดภาพ ด้วย 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

เพิ่ม Provider

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

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

Intervention\Image\ImageServiceProvider::class

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

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

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

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

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

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

<form class="form-horizontal" role="form" method="POST" action="{{ url('/wallet/addTransactions/new') }}" enctype="multipart/form-data">
	<input type="hidden" name="_token" value="{{ csrf_token() }}">
	<div class="form-group">
		<label class="col-md-4 control-label">Picture</label>
		<div class="col-md-6">
			<input type="file" name="picture" class="form-control" accept="image/*">
		</div>
									
	</div>
	<div class="form-group">
		<div class="col-md-6 col-md-offset-4">
			<button type="submit" class="btn btn-primary">Save</button>
		</div>
	</div>
</form>

เขียน Controller

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

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

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

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

if($image->width() > 500){

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

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

$image->save($path);

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

public function uploadImageTransaction(){
	if(Input::file())
        {

            $extension = Input::file('picture')->getClientOriginalExtension();;
            $image = Image::make(Input::file('picture'));
            $filename  = time() . '.' . $extension;
            $path = 'img/transactions/' . $filename;

            if($image->width() > 500){

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

            if($image->height() > 500){

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

            }

            $image->save($path);

            return  $path;
        }
    }

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

จบแล้ว

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