ด้วยสํานึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์เป็นล้นพ้นอันหาที่สุดมิได้
ด้วยสํานึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์เป็นล้นพ้นอันหาที่สุดมิได้


การใช้งาน คำสั่งต่างๆ ใน Intervention Image ปรับแต่งรูปภาพ ตอนที่ 2

เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdee
intervention image php ปรับแต่งรูปภาพ

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ intervention image php ปรับแต่งรูปภาพ

ปัจจุบัน นักพัฒนาสามารถ ใช้ ChatGPT | Gemini | Claude | Perplexity | Deepseek ช่วยในการแก้ไขปัญหาต่างๆ ในการเขียนโปรแกรม หรือหาข้อมูลเพิ่มเติมได้ง่ายและสะดวก แนะนำให้ทุกคนใช้งานเพื่อพัฒนาศักยภาพของตัวเอง

ดูแล้ว 14,435 ครั้ง


เนื้อหานี้ จะเป็นการมาอธิบายการใช้งานเพิ่มเติม เกี่ยวกับ Intervention Image ที่เป็น PHP Library
จัดการรุปภาพที่น่าสนใจ ต่อจากตอนที่แล้ว
    แนวทาง การใช้งาน Intervention Image ปรับแต่งรูปภาพใน PHP ตอนที่ 1 
 
โดยจะขอแบ่งการอธิบายเป็นแต่ละส่วน ตามรูปแบบของคำสั่งที่นำมาใช้งาน เนื่องจากมีคำสั่งจำนวนมาก
จึงไม่มีรูปภาพประกอบทุกคำสั่ง  แต่สามารถนำตัวอย่างไปทดลองรันดูผลลัพธ์ได้ ตามความสนใจ

 

การปรับขนาดรูปภาพ

    เราสามารถปรับขนาด หรือตัดรูปภาพตามต้องการโดยใช้คำสั่งเหล่านี้
 
    resize()
    ปรับขนาดรูปภาพ โดยระบุความกว้างและความสูงที่ต้องการ สามารถกำหนดให้ปรับขนาดรูป
โดยคงสัดส่วนของรูปภาพได้ หรือไม่ให้ปรับขนาดถ้ากำหนดขนาดเกินขนาดรูปต้นฉบับ
 
<?php
// ปรับขนาดแบบฟิกค่า กำหนดความกว้าง ความสูง
$img->resize(300, 200);

// ปรับขนาดรูปเฉพาะความกว้าง 
$img->resize(300, null);

// ปรับขนาดเฉพาะความสูง
$img->resize(null, 200);

// ปรับขนาดเฉพาะความกว้าง ส่วนความสูงให้ปรับขนาดตามอัตโนมัติ แบบได้สัดส่วน
$img->resize(300, null, function ($constraint) {
    $constraint->aspectRatio();// ให้คงสัดส่วนของรูปภาพ
});
// รูปแบบคำสั่งด้านบนนี้ สามารถใช้คำสั่ง widen() แทนได้
// $img->widen(300);

// ปรับขนาดเฉพาะความสูง ส่วนความกว้างให้ปรับขนาดตามอัตโนมัติ แบบได้สัดส่วน
$img->resize(null, 200, function ($constraint) {
    $constraint->aspectRatio(); // ให้คงสัดส่วนของรูปภาพ
});
// รูปแบบคำสั่งด้านบนนี้ สามารถใช้คำสั่ง heighten() แทนได้
// $img->heighten(200);

// ปรับขนาดเฉพาะความสูง ส่วนความกว้างให้ปรับขนาดตามอัตโนมัติ แบบได้สัดส่วน
$img->resize(null, 400, function ($constraint) {
    $constraint->aspectRatio(); // ให้คงสัดส่วนของรูปภาพ
    $constraint->upsize(); // ถ้าค่าที่กำหนดมากกว่าค่าเดิม ไม่ต้องปรับขนาด
});
 
    widen()
    ปรับความกว้างรูปภาพ คล้ายคำสั่ง resize() แต่คำสั่งนี้จะระบุแค่ความกว้าง แล้วให้ความสูง
ปรับให้ได้สัดส่วนอัตโนมัติเอง สามารถกำหนดไม่ให้ปรับขนาดถ้ากำหนดขนาดเกินขนาดรูปต้นฉบับ
 
<?php
// ปรับขนาดความกว้างตามกำหนด และให้ความสูงปรับขนาดอัตโนมัติตามสัดส่วน
$img->widen(300);

// ปรับขนาดความกว้างตามกำหนด และให้ความสูงปรับขนาดอัตโนมัติตามสัดส่วน
$img->widen(300, function ($constraint) {
    $constraint->upsize(); // ถ้าค่าความกว้างที่กำหนดมากกว่าค่าเดิม ไม่ต้องปรับขนาด
});
 
    heighten()
    ปรับความสูงรูปภาพ คล้ายคำสั่ง resize() แต่คำสั่งนี้จะระบุแค่สูง แล้วให้ความกว้าง
ปรับให้ได้สัดส่วนอัตโนมัติเอง สามารถกำหนดไม่ให้ปรับขนาดถ้ากำหนดขนาดเกินขนาดรูปต้นฉบับ
 
<?php
// ปรับขนาดความสูงตามกำหนด และให้ความกว้างปรับขนาดอัตโนมัติตามสัดส่วน
$img->heighten(200);

// ปรับขนาดความสูงตามกำหนด และให้ความกว้างปรับขนาดอัตโนมัติตามสัดส่วน
$img->heighten(200, function ($constraint) {
    $constraint->upsize(); // ถ้าค่าความสูงที่กำหนดมากกว่าค่าเดิม ไม่ต้องปรับขนาด
});
 
    crop()
    ตัดรูปภาพ โดยระบุขนาดความกว้างและความสูงที่ต้องการ และกำหนดตำแหน่งจุดเริ่มต้นการตัดรูป
ที่จุดตำแหน่งมุมบุนซ้าย x,y ถ้าไม่ระบุจะใช้จุดกึ่งกลางของรูปต้นฉบับ 
 
<?php
// ตัดรูปขนาด 100x100 โดยให้กึ่งกลางรูปที่ตัดอยู่ตำแหน่งกึ่งกลางรูปต้นฉบับ
$img->crop(100, 100);

// ตัดรูปขนาด 100x100 โดยให้ตำหน่งมุมบนของรูปที่ตัด อยู่ที่ตำแหน่ง x,y ที่ 25,25 ของต้นฉบับ
$img->crop(100, 100, 25, 25);
 
    fit()  
    ตัดรูปภาพและปรับขนาดไปพร้อมกัน คล้ายคำสั่ง crop() และ resize() ทำงานร่วมกัน โดยระบุความกว้าง
และความสูง หรือระบุเฉพาะความกว้างกรณีเป็นรูปสี่เหลี่ยมจัตุรัส สามารถกำหนดไม่ให้ปรับขนาดถ้ากำหนดขนาด
เกินขนาดรูปต้นฉบับ
 
<?php
// ตัดรูปให้ได้สัดส่วน (300/200)  แล้วปรับขนาดให้เท่ากับ 300x200
$img->fit(300, 200);

// ตัดรูปให้ได้สัดส่วน (200/200) หรือสี่เหลี่ยมจัตุรัส แล้วปรับขนาดให้เท่ากับ 200x200
$img->fit(200);

// ตัดรูปให้ได้สัดส่วน (300/200)  แล้วปรับขนาดให้เท่ากับ 300x200
$img->fit(300, 200, function ($constraint) {
    $constraint->upsize(); // ถ้าค่าที่กำหนดมากกว่าค่าเดิม ไม่ต้องปรับขนาด
});

//	top-left
//	top
//	top-right
//	left
//	center (default)
//	right
//	bottom-left
//	bottom
//	bottom-right

// ตัดรูปให้ได้สัดส่วน (300/200)  แล้วปรับขนาดให้เท่ากับ 300x200
$img->fit(300, 200, function ($constraint) {
    $constraint->upsize(); // ถ้าค่าที่กำหนดมากกว่าค่าเดิม ไม่ต้องปรับขนาด
},'top'); // ถ้าต้องการระบุตำแหน่งที่ตัดรูป
 
    resizeCanvas()
    ใช้ปรับขนาดพื้นที่ของรูป โดยระบุขนาดความกว้าง ความสูงของพื้นที่รูปที่้ต้องการ สามารถระบุ
ค่าแบบอ้างอิงจากขนาดเดิมหรือระบุขนาดแบบจำเพาะได้ สามารถใส่สีพื้นหลังกรณีพื้นที่ของรูปใหม่มีพื้นที่ว่าง
ที่เพิ่มขึ้นจากรูปเดิม
 
<?php
// ปรับขนาดพื้นที่ของรูป ถ้าขนาดที่กำหนดน้อยกว่าค่าเดิม  ส่วนเกินของรูปจะถูกตัดออก คล้าย crop()
// ถ้าขนาดที่กำหนดมากกว่าค่าเดิม พื้นที่ที่เกินมาจากค่าเดิมจะเป็นสีขาวถ้าไม่กำหนดสี หรือเป้นโปร่งใส 
// ถ้าเป็นไฟล์ png หรือ gif
// ปรับขนาดพื้นที่ของรูปเป็น 300x200
$img->resizeCanvas(300, 200);

// ปรับขนาดพื้นที่ของรูปเฉพาะความกว้าง
$img->resizeCanvas(300, null);

// ปรับขนาดพื้นที่ของรูปเฉพาะความสูง
$img->resizeCanvas(null, 200);

// ปรับขนาดพื้นที่ของรูป โดยตัดที่ตำแหน่ง bottom-right
$img->resizeCanvas(300, 200, 'bottom-right');

// ปรับขนาดโดยให้มีการเพิ่มหรือลด สัมพันธ์กับขนาดรูปเดิม  โดยความกว้างขยายออกข้างละ 100
// ความสูงลดลงข้างละ 10 จากรูปเดิม
$img->resizeCanvas(10, -10, 'center', true);

// ปรับขนาดและกำหนดสีให้กับพี้นที่ส่วนเกินที่เกิดขึ้นถ้ามี
$img->resizeCanvas(1280, 720, 'center', false, 'ff00ff');
 
    trim()
    ใช้ตัดขอบสีของรูป โดยระบุสีของขอบที่ต้องการตัดตามตำแหน่งมุนบนซ้าย หรือมุมล่างขวาหรือตัดขอบ
ที่เป็นโปรงใสออก สามารถเลือกที่จัดเฉพาะขอบด้านใดด้านหนึ่งหรือหลายๆ ด้านได้ สามารถกำหนดเปอร์เช็นต์
ของความคลาดเคลื่อนของค่าสีหรือค่าสีที่ใกล้เคียงที่ยอมรับได้จากสีที่เลือก สามารถกำหนดการฟุ้งของขอบได้
 
<?php
// ตัดขอบรูปทุกด้าน ที่มีสีเดียวกับสีของ มุมบนซ้าย
$img->trim();

// ตัดขอบรูปทุกด้าน ที่มีสีเดียวกับสีของ มุมล่างขวา
$img->trim('bottom-right');

// ตัดเฉพาะขอบบน และล่าง ที่เป็นโปร่งใส 
$img->trim('transparent', array('top', 'bottom'));

// ตัดขอบด้านซ้าย ที่มีสีเดียวกับสีของ มุมบนซ้าย 
$img->trim('top-left', 'left');

// ตัดขอบรูปทุกด้าน ที่มีค่าสีเดียวกับสีของ มุมบนซ้าย ที่มีค่าคลาดเคลื่อน 40% (40% tolerance)
$img->trim('top-left', null, 40);

// ตัดขอบรูปทุกด้าน ที่มีค่าสีเดียวกับสีของ มุมบนซ้าย ที่มีค่าคลาดเคลื่อน 25% (25% tolerance)
// และให้มีความฟุ้งขอบขนาดประมาณ 50 
$img->trim('top-left', null, 25, 50);

 
 
 

การปรับแต่งรูปภาพ

    เราสามารถปรับแต่งรูปภาพ เช่น กำหนดความสว่าง ความคมชัด การปรับภาพให้เป็นขาวดำ
กำหนดค่าแกมม่า เป็นต้น ด้วยคำสั่งเหล่านี้
 
    gamma()
    ปรับความสว่างของรูปโดยใช้ค่าแกมม่า โดยค่าที่น้อยกว่า 1 จะเป็นการปรับความสว่างให้น้ยอลง
และค่าที่มากกว่า 1 เป็นปรับความสว่างเพิ่มขึ้น ค่าเท่ากับ 1 คือไม่มีการเปลี่ยนแปลง
 
<?php
// กำหนดค่าแกมม่าเท่ากับ 1.6
$img->gamma(1.6);
 
    brightness()
    ปรับความสว่างของรูป โดยระบุค่าระหว่าง -100 ถึง 100 โดยที่ 0 คือค่าความสว่าง
เริ่มต้นของรูปที่ไม่ได้มีการเปลี่ยนแปลง
 
<?php
// เพิ่มความสว่างของรูปภาพ
$img->brightness(35);
 
    contrast()
    ปรับความคมชัดของรูป โดยระบุค่าระหว่าง -100 ถึง 100 โดยที่ 0 คือค่าความคมชัด
เริ่มต้นของรูปที่ไม่ได้มีการเปลี่ยนแปลง
 
<?php
// เพิ่มความคมชัดของรูป
$img->contrast(65);
 
    colorize()
    ปรับโทนสีของรูปภาพเป็นค่าสี RGB ที่ต้องการ โดยเพิ่ม หรือ ลดค่าสี RGB ระหว่างค่า -100 ถึง 100
จะทำให้โทนสีของรูปภาพปรับไปตามค่าที่มีการเพิ่มหรือลด หรือที่เรียกว่า Color Balance ใน Photoshop
 
<?php
// ลดค่าสีแดงและเพิ่มค่าสีน้ำเงินให้กับรูปภาพ
$img->colorize(-100, 0, 100);

// เพิ่มค่าสีเขียวเล็กน้อยให้กับรูป
$img->colorize(0, 30, 0);
 
    fill()
    เติมสีให้กับรูปหรือเติมรูปลวดลายลงบนรูป
 
<?php
// เติมสีแดงลงไปในรูป
$img->fill('#FF0000');

// เติมรปลวดลายเป็นชิ้นๆ ซ้อนกันลงในรูป
$img->fill('tile.png');
 
    greyscale()
    ปรับโทนสีของรูปภาพเป็นขาวดำ
 
<?php
// ปรับรูปภาพให้เป็นสีขาวดำ
$img->greyscale();
 
    invert()
    ปรับโทนสี GRB ของรูปภาพเป็นค่าตรงข้าม เช่น สีดำเดิมเป็น 0,0,0 ปรับตรงข้ามก็เป็น 255,255,255
ซึ่งก็เป็นค่าของสีขาว ในลักษณะแบบนี้เป็นต้น
 
<?php
// ปรับค่าสีเป็นค่าตรงข้าม
$img->invert();
 
    mask()
    การคลุมหรือบังรูปภาพโดยใช้รูปที่มีส่วนโปร่งใส ใช้กับไฟล์ png ที่รองรับการปรับค่าโปรงใส เช่น
เราเอารูปที่สอง มาบังรูปแรกโดยรูปที่สองมีส่วนที่เป็นโปร่งใส เมื่อซ้อนทับกัน ส่วนที่โปร่งใสก็จะบังทับรูปแรก
ส่วนที่ไม่โปร่งใส ก็จะแสดงเป็นรูปแรกแทน (* จากการทดสอบ คำสั่งนี้ใช้ทรัพยากรในการทำงานมาก จึงไม่ค่อย
แนะนำให้ใช้งาน)
 
<?php
$img = $manager->make('images/Dock.jpg');  
// ใช้รูป mask.png เป็นหน้ากาก แสดงรูป Dock.jpg เฉพาะบริเวณที่ไม่โปร่งใส
// โดยให้ค่า alpha เป็น false ทำให้รูปที่แสดงเป็นลักษณะโปร่งๆ มองทะลุผ่านได้
$img->mask('images/mask.png');

// ใช้รูป mask.png เป็นหน้ากาก แสดงรูป Dock.jpg เฉพาะบริเวณที่ไม่โปร่งใส
// โดยให้ค่า alpha เป็น true ทำให้รูปที่แสดงเป็นลักษณะไม่โปร่งใส เพราะใช้ alpha channel บังด้วย
$img->mask('images/mask.png',true);
 
    flip()
    ปรับรูปภาพให้พลิกกลับสลับซ้ายขวา หรือบนล่าง 
 
<?php
// กลับรุปภาพในแนวนอน คล้ายภาพสะท้อนในกระจก
$img->flip();
//$img->flip('h'); // กำหนดหรือไม่ก็ได้

// กลับรูปภาพในแนวตั้ง
$img->flip('v');
 
    rotate()
    การปรับหมุนรูปภาพด้วยมุมตามเข็มหรือทวนเข็มนาฬิกา โดยระบุองศาที่ต้องการ ค่า - คือหมุนตาม
เข็มนาฬิกา สามารถระบุสีพื้นหลังของรูปได้
 
<?php
// หมุนรูปภาพตามองศาที่ต้องการ ถ้าเป็นค่าลบ คือหมุนตามเข็มนาฬิกา
$img->rotate(-45);

// หมุนรูปภาพตามองศาที่ต้องการ ถ้าเป็นค่าบวก คือหมุนทวนเข็มนาฬิกา
$img->rotate(75);

// หมุนรูปภาพตามองศาที่ต้องการ ถ้าเป็นค่าบวก คือหมุนทวนเข็มนาฬิกา
// กำหนดสีพื้นหลังของรูปส่วนเกินที่เกิดขึ้นจากการหมุน ถ้าไม่กำหนดสี และเป็นไฟล์ png หรือ gif จะเป็นโปร่งใส
$img->rotate(45,'#FF0000');
 
    opacity()
    การปรับการมองเห็นของรูปใช้สำหรับภาพที่ต้องการแสดงเป็น png ไฟล์ โดยระบุเปอร์เซ็นต์
ค่าความโปร่งใส ระหว่าง 0 ถึง 100 ค่า 0 คือให้เป็นรูปโปร่งใส 100 คือเป็นค่าปกติ (* การใช้กับภาพที่มีขนาดใหญ่
จะมีผลต่อการใช้ทรัพยากรในการทำงาน ให้เลือกใช้โดยพิจารณาตามความเหมาะสม)
 
<?php
// ปรับค่ามองเห็นของรูปให้เป็นโปร่งใส
$img->opacity(0);

// ปรับค่ามองเห็นของรูปให้เป็นโปร่งใส 50%
$img->opacity(50);
 
    orientate()
    การปรับหมุนรูปภาพ คล้าย rotate() แต่คำสั่งนี้จะไปทำการอ่านค่า ทิศทางของรูป จากข้อมูล
ใน EXIF แล้วหมุนรูปไปในทิศทางที่ถูกต้องอัตโนมัติ
 
<?php
// หมุนรูปตามค่าทิศทางของรูปที่กำหนดใน EXIF data
$img->orientate();



 

การใช้งานแอฟเฟค

 
    filter()
    ใช้สำหรับเรียงใช้คำสั่งการปรับแต่งหลายคำสั่งรวมกัน ที่เรากำหนดขึ้นมาเอง
 
<?php
// include composer autoload
require_once 'vendor/autoload.php';
 
// import the Intervention Image Manager Class
use Intervention\Image\ImageManager;  
use Intervention\Image\Filters\DemoFilter;  
 
// สร้างตัวแปรอ้างอิง object ตัวจัดการรูปภาพ
$manager = new ImageManager();      
     
// การอ่านไฟล์จากรูภาพที่มีอยู่แล้ว โดยระ path ของรูปภาพ ที่จะใช้งาน เพื่อสร้างข้อมูลรูปภาพใหม่
$img = $manager->make('images/Dock.jpg');  

// เรียกใช้งาน filter ที่สร้างขึ้น
$img->filter(new DemoFilter(30));

// ส่ง HTTP header และข้อมูลของรูปเพื่อนำไปแสดง
echo $img->response('png');
?>
 
ดูตัวอย่างเพิ่มเติม ได้ที่ http://image.intervention.io/api/filter
 
    pixelate()
    ปรับขนาด pixel ของรูปให้มีขนาดตามต้องการ ทำให้รูปภาพแสดงคล้ายสี่เหลี่ยม
เรียงต่อๆ กัน
 
<?php
// กำหนดขนาด pixel เพื่อสร้าง pixelation effect เท่ากับ 12
$img->pixelate(12);
 
    blur()
    ปรับความเบลอของรูปภาพ โดยค่าเริ่มต้นเป็น 1 หรือกำหนดค่าระหว่าง 0 ถึง 100 ค่ายิ่งมาก
รูปก็จะยิ่งเบลอมาก
 
<?php
// กำหนดภาพเบลอระดับ 1
$img->blur();

// กำหนดภาพเบลอระดับ 15
$img->blur(15);
 
 
    sharpen()
    ปรับความคมของภาพ โดยค่าเริ่มต้นเป็น 10 หรือกำหนดค่าระหว่าง 0 ถึง 100
 
<?php
// กำหนดความคมของภาพระดับ 10
$img->sharpen();

// กำหนดความคมของภาพระดับ 15
$img->sharpen(15);


 

การวาดภาพ การเขียนภาพ

    เราสามารถใช้คำสังต่อไปนี้ ในการวาดรูป เส้นตรง รูปสี่เหลี่ยม รูปหลายเหลี่ยม วงกลม วงรี เป็นต้น 
ลงในรูปภาพ
 
    text()
    ใช้สำหรับเขียนข้อความ โดยระบุข้อความ ตำแหน่งเริ่มต้นข้อความในจุด x,y สามารถกำหนดไฟล์
fonts ที่ต้องการ กำหนดขนาด สี การจัดแนวนอน การจัดแนวตั้ง และมุมของข้อความได้
 
<?php
// ใส่ข้อความไปไว้ในตำแหน่งที่ต้องการ ในแนว x=120 y=100 ไม่มีการกำหนดใดๆ เกี่ยวกับ fonts
$img->text('The quick brown fox jumps over the lazy dog.', 120, 100);

// ใช้ฟังก์ชั่น กำหนดรายละเอียดของข้อความ 
$img->text('ทดสอบแสดงข้อความภาษาไทย
   ข้อความ  คั่น ระหว่างนี้
ขึ้นบรรทัดใหม่', 0, 24, function($font) {
    $font->file('fonts/THSarabun.ttf'); // ไฟล์ fonts ข้อความ
    $font->size(24); // ขนาด fonts หน่วย px ถ้าไม่กำหนดค่าเริ่มต้นเท่ากับ 12
    $font->color('#FFFFFF');
//    $font->align('center');  // การจัดแนวนอน [ left, right center ] ค่าเริ่มต้น left
//    $font->valign('top'); // การจัดแนวตั้ง [ top bottom middle ] ค่าเริ่มต้น bottom
//    $font->angle(45); // การกำหนดมุมการหมุนของข้อความ
});
 
    pixel()  
    ใช้สำหรับวาดจุด pixel โดยสามารถระบุสี และตำแหน่ง x,y ของจุดนั้นๆ ได้
 
<?php
// วาดจุด pixel สีขาว ตำแหน่ง 10,200
$img->pixel('#FFFFFF', 10, 200);
 
    line()  
    ใช้สำหรับวาดเส้นตรง โดยระบุจุด x,y เริ่มต้น และ x,y สิ้นสุดของเส้น สามารถระบุสีเส้นได้
 
<?php
// วาดเส้นตรงเริ่มต้นตำแหน่ง 400,10 สิ้นสุด 195,195 แบบมีระบุสีของเส้น
$img->line(400, 10, 195, 195, function ($draw) {
    $draw->color('#FFF200');
});
 
    rectangle()
    ใช้สำหรับวาดสี่เหลี่ยม โดยระบุจุด x,y มุมบนซ้าย กับจุด x,y มุมล่างขวาของรูปสี่เหลี่ยม  
สามารถระบุสีพื้นหลัง และสีขอบพร้อมขนาดได้ 
 
<?php
// วาดรูปสี่เหลี่ยมตำแหน่งมุมบนซ้าย 180,150 มุมล่างขวา 300,300 เทสีพื้นหลังโปร่งใส และเส้นขอบ
$img->rectangle(180, 150, 300, 300, function ($draw) {
    $draw->background('rgba(255, 255, 255, 0.5)');
    $draw->border(2, '#000');
});
 
    polygon()
    ใช้สำหรับวาดรูปหลายเหลี่ยม โดยระบุจุดเชื่อมของเส้นขอบ x,y ไปตามจำนวนของเหลี่ยม
ของรูปนั้น สามารถระบุสีพื้นหลัง สีและขนาดของเส้นขอบได้
 
<?php
// กำหนดจุดเชื่อมของรูปหลายเหลี่ยม
$points = array(
    353,  173,  // Point 1 (x, y)
    385,  220, // Point 2 (x, y)
    432,  186,  // Point 3 (x, y)
    401, 170,  // Point 4 (x, y)
    362,  103,  // Point 5 (x, y)
    323,  140,   // Point 6 (x, y)
    376,  159   // Point 7 (x, y)	
);

// วาดรูปหลายเหลี่ยมจากจุดเชื่อมที่กำหนด เทสีพื้นหลัง ขนาดและสีของขอบ
$img->polygon($points, function ($draw) {
    $draw->background('#0000ff');
    $draw->border(2, '#FFF200');
});
 
    circle()
    ใช้สำหรับวาดรูปวงกลม โดยระบุขนาดเส้นผ่านศูนย์กลางของวงกลม กับตำแหน่งจุดกึ่งกลาง
ของวงกลมในตำแหน่ง x,y สามารถระบุสีพื้นหลัง สีและขนาดของเส้นขอบได้
 
<?php
// วาดรูปวงกลมเส้นผ่านศูนย์กล้าง 100 ตำแหน่ง 100,300 เทสีพื้นหลังและเส้นขอบ
$img->circle(100, 100, 300, function ($draw) {
    $draw->background('#0000ff');
    $draw->border(3, '#FFF200');
});
 
    ellipse()
    ใช้สำหรับวาดรูปวงรี โดยระบุขนาดความกว้าง และความสูง กับระบุตำแหน่งจุดกึ่งกลาง
ของวงรีในตำแหน่ง x,y สามารถระบุสีพื้นหลัง สีและขนาดของเส้นขอบได้
 
<?php
// วาดรูปวงรีกว้าง 60 สูง 120 ตำแหน่ง 310,310 เทสีพื้นหลังและเส้นขอบ
$img->ellipse(60, 120, 310, 310, function ($draw) {
    $draw->background('#0000ff');
    $draw->border(1, '#ff0000');
});
 
ตัวอย่างโค้ด 
 
<?php
// include composer autoload
require_once 'vendor/autoload.php';
 
// import the Intervention Image Manager Class
use Intervention\Image\ImageManager;  
 
// สร้างตัวแปรอ้างอิง object ตัวจัดการรูปภาพ
$manager = new ImageManager();      
     
// สร้างรูปใหม่ ขนาด 500x400 px และมี พื้นหลังสีแดง
$img = $manager->canvas(500, 400, '#ED1C24');

// ใส่ข้อความไปไว้ในตำแหน่งที่ต้องการ ในแนว x=120 y=100 ไม่มีการกำหนดใดๆ เกี่ยวกับ fonts
$img->text('The quick brown fox jumps over the lazy dog.', 120, 100);

// ใช้ฟังก์ชั่น กำหนดรายละเอียดของข้อความ 
$img->text('ทดสอบแสดงข้อความภาษาไทย
   ข้อความ  คั่น ระหว่างนี้
ขึ้นบรรทัดใหม่', 0, 24, function($font) {
    $font->file('fonts/THSarabun.ttf'); // ไฟล์ fonts ข้อความ
    $font->size(24); // ขนาด fonts หน่วย px ถ้าไม่กำหนดค่าเริ่มต้นเท่ากับ 12
    $font->color('#FFFFFF');
//    $font->align('center');  // การจัดแนวนอน [ left, right center ] ค่าเริ่มต้น left
//    $font->valign('top'); // การจัดแนวตั้ง [ top bottom middle ] ค่าเริ่มต้น bottom
//    $font->angle(45); // การกำหนดมุมการหมุนของข้อความ
});

// วาดรูปวงกลมเส้นผ่านศูนย์กล้าง 100 ตำแหน่ง 100,300 เทสีพื้นหลังและเส้นขอบ
$img->circle(100, 100, 300, function ($draw) {
    $draw->background('#0000ff');
    $draw->border(3, '#FFF200');
});

// วาดรูปวงรีกว้าง 60 สูง 120 ตำแหน่ง 310,310 เทสีพื้นหลังและเส้นขอบ
$img->ellipse(60, 120, 310, 310, function ($draw) {
    $draw->background('#0000ff');
    $draw->border(1, '#ff0000');
});

// วาดรูปสี่เหลี่ยมตำแหน่งมุมบนซ้าย 180,150 มุมล่างขวา 300,300 เทสีพื้นหลังโปร่งใส และเส้นขอบ
$img->rectangle(180, 150, 300, 300, function ($draw) {
    $draw->background('rgba(255, 255, 255, 0.5)');
    $draw->border(2, '#000');
});

// วาดจุด pixel สีขาว ตำแหน่ง 10,200
$img->pixel('#FFFFFF', 10, 200);

// วาดเส้นตรงเริ่มต้นตำแหน่ง 400,10 สิ้นสุด 195,195 แบบมีระบุสีของเส้น
$img->line(400, 10, 195, 195, function ($draw) {
    $draw->color('#FFF200');
});

// กำหนดจุดเชื่อมของรูปหลายเหลี่ยม
$points = array(
    353,  173,  // Point 1 (x, y)
    385,  220, // Point 2 (x, y)
    432,  186,  // Point 3 (x, y)
    401, 170,  // Point 4 (x, y)
    362,  103,  // Point 5 (x, y)
    323,  140,   // Point 6 (x, y)
    376,  159   // Point 7 (x, y)	
);

// วาดรูปหลายเหลี่ยมจากจุดเชื่อมที่กำหนด เทสีพื้นหลัง ขนาดและสีของขอบ
$img->polygon($points, function ($draw) {
    $draw->background('#0000ff');
    $draw->border(2, '#FFF200');
});

// ส่ง HTTP header และข้อมูลของรูปเพื่อนำไปแสดง
echo $img->response();
?>
 
ตัวอย่างผลลัพธ์
 
 
 

 
 

การเรียกดูข้อมูลภาพ 

    เราสามารถใช้คำสั่งต่อไปนี้ ในการเรียกดูข้อมูลของภาพ ในกรณีที่มีข้อมูลนั้นๆ อยู่ภายในรูปภาพ
เช่น ความกว้าง ความสูง 
 
    width()  
    อ่านค่าความกว้างของรูปภาพ มีหน่วยเป็น px
 
<?php
$width = $img->width();
 
    height()
    อ่านค่าความสูงของรูปภาพ มีหน่วยเป็น px
 
<?php
$height = $img->height();
 
    mime()
    อ่านค่า MIME type ของรูปภาพ ตัวอย่างเช่น image/jpeg , image/png , image/gif
 
<?php
$mime = $img->mime();
 
    exif()
    อ่านค่า EXIF data ถ้าไม่มีข้อมูลคืนค่าเป็น NULL
 
<?php
$arr_data1 = $img->exif();  // กรณีไม่ระบุ จะเป็นดึงค่าทั้งหมด ถ้ามีข้อมูล
$data3 = $img->exif('COMPUTED'); // กรณีระบุค่าเฉพาะที่ต้องการ
 
    iptc()
    อ่านค่า IPTC data ถ้าไม่มีข้อมูลคืนค่าเป็น NULL
 
<?php
$arr_data2 = $img->iptc(); // กรณีไม่ระบุ จะเป็นดึงค่าทั้งหมด ถ้ามีข้อมูล
$data4 = $img->iptc('Copyright'); // กรณีระบุค่าเฉพาะที่ต้องการ
 
    pickColor()
    อ่านค่าสีของ pixel ตำแหน่งจุด x,y ที่กำหนด
 
<?php
//	array: array(255, 255, 255, 1)
//	rgb: rgb(255, 255, 255)
//	rgba: rgba(255, 255, 255, 0.5)
//	hex: #cccccc
//	int: 16776956
// อ่านค่าสีที่ pixel ตำแหน่ง 100,100 คืนค่าเป็น array ค่าสี RGB
$arraycolor = $img->pickColor(100, 100);

// อ่านค่าสีที่ pixel ตำแหน่ง 100,100 คืนค่าเป็นตัวเลข
$intcolor = $img->pickColor(100, 100, 'int');

// อ่านค่าสีที่ pixel ตำแหน่ง 100,100 คืนค่าข้อความเป็นเลขฐานหก เช่น #FFFFFF
$hexcolor = $img->pickColor(100, 100, 'hex');
 
 
ตัวอย่างโค้ด 
 
<?php
// include composer autoload
require_once 'vendor/autoload.php';
 
// import the Intervention Image Manager Class
use Intervention\Image\ImageManager;  
 
// สร้างตัวแปรอ้างอิง object ตัวจัดการรูปภาพ
$manager = new ImageManager();      
     
// สร้างไฟล์ จากไฟล์ต้นฉบับ 
$img = $manager->make('images/Dock.jpg');

$width = $img->width();
$height = $img->height();
$mime = $img->mime();
$arr_data1 = $img->exif();  // กรณีไม่ระบุ จะเป็นดึงค่าทั้งหมด ถ้ามีข้อมูล
$arr_data2 = $img->iptc(); // กรณีไม่ระบุ จะเป็นดึงค่าทั้งหมด ถ้ามีข้อมูล
$data3 = $img->exif('COMPUTED'); // กรณีระบุค่าเฉพาะที่ต้องการ
$data4 = $img->iptc('Copyright'); // กรณีระบุค่าเฉพาะที่ต้องการ

//	array: array(255, 255, 255, 1)
//	rgb: rgb(255, 255, 255)
//	rgba: rgba(255, 255, 255, 0.5)
//	hex: #cccccc
//	int: 16776956
// อ่านค่าสีที่ pixel ตำแหน่ง 100,100 คืนค่าเป็น array ค่าสี RGB
$arraycolor = $img->pickColor(100, 100);

// อ่านค่าสีที่ pixel ตำแหน่ง 100,100 คืนค่าเป็นตัวเลข
$intcolor = $img->pickColor(100, 100, 'int');

// อ่านค่าสีที่ pixel ตำแหน่ง 100,100 คืนค่าข้อความเป็นเลขฐานหก เช่น #FFFFFF
$hexcolor = $img->pickColor(100, 100, 'hex');

echo "<pre>";
echo $width;
echo "<hr>";
echo $height;
echo "<hr>";
echo $mime;
echo "<hr>";
echo $data3;
echo "<hr>";
echo $data4;
echo "<hr>";
print_r($arr_data1);
echo "<hr>";
print_r($arr_data2);
echo "<hr>";
print_r($data3);
echo "<hr>";
print_r($data4);

echo "<hr>";
print_r($arraycolor);
echo "<hr>";
echo $intcolor;
echo "<hr>";
echo $hexcolor;
echo "</pre>";
?>
 

 

การใช้คำสั่งอื่นๆ เพิ่มเติม

 
    backup() reset()
    โดยคำสั่งทั้งสองนี้จะใช้ควบคู่กัน คำสั่ง backup() จะใช้สร้างจุดที่มีการเก็บสภาวะของรูป
ที่เราต้องการเรียกใช้งาน จากจุดนั้นๆ ซ้ำ และคำสั่ง reset() ใช้สำหรับกลับไปเรียกคืนสภาวะรูปที่ได้ทำการ
backup() ไว้มาใช้งาน สมมติเช่น เราต้องการให้สภาวะรูปที่จะ backup เป็นรูปที่ทำการแปลงเป็นขาวดำแล้ว
แต่จะใช้งานปรับขนาดและบันทึก แยกกันสองครั้งคือ 100 กับ 200  จะมีรูปแบบการใช้งานดังนี้
 
<?php
// include composer autoload
require_once 'vendor/autoload.php';
 
// import the Intervention Image Manager Class
use Intervention\Image\ImageManager;  
 
// สร้างตัวแปรอ้างอิง object ตัวจัดการรูปภาพ
$manager = new ImageManager();      
     
// การอ่านไฟล์จากรูภาพที่มีอยู่แล้ว โดยระ path ของรูปภาพ ที่จะใช้งาน เพื่อสร้างข้อมูลรูปภาพใหม่
$img = $manager->make('images/Dock.jpg');  

// เปลี่ยนเป็นสีขาวดำก่อน สร้างเป็นสภาวะรูปที่ต้องการเรียกใช้งานซ้ำ
$img->greyscale();

// สร้าง backup สภวะรูปที่เป็นสีขาวดำไว้ใช้งาน
$img->backup();

// ปรับขนาดรูปขาวดำให้มีขนาดที่ 100x100 แลัวบันทึกเป็นไฟล์ใหม่
$img->fit(100)->save('images/bw100.jpg');

// กลับไปใช้งานสภาวะรูปที่เป็นรูปขาวดำที่ backup ไว้
$img->reset();

// ปรับขนาดรูปขาวดำให้มีขนาดที่ 200x200 แลัวบันทึกเป็นไฟล์ใหม่
// จะเห็นว่ารูปที่นำมาปรับขนาดในครั้งที่สอง เป็นรูปที่มาจากสภาวะที่ backup ไว้
// ไม่ใช่รูปที่ปรับขนาดเป็น 100 แล้วมาปรับเป้น 200 แบบนี้เป็นต้น
$img->fit(200)->save('images/bw200.jpg');

?>
 
    getCore()
    ใช้สำหรับคืนค่า resource ของรูปตามประเภทของ Driver ที่ใช้งาน สมมติเช่น เราใช้งาน GD driver
เมื่อใช้คำสั่ง getCore เราก็จะได้ GD resource กลับมา ทำให้เราสามารถใช้คำสั่งต่างๆ ของ GD library ได้
 
<?php
// include composer autoload
require_once 'vendor/autoload.php';
 
// import the Intervention Image Manager Class
use Intervention\Image\ImageManager;  
 
// สร้างตัวแปรอ้างอิง object ตัวจัดการรูปภาพ
$manager = new ImageManager();      
     
// การอ่านไฟล์จากรูภาพที่มีอยู่แล้ว โดยระ path ของรูปภาพ ที่จะใช้งาน เพื่อสร้างข้อมูลรูปภาพใหม่
$img = $manager->make('images/Dock.jpg');  

// get gd instance
$im = $img->getCore();
imageflip($im,IMG_FLIP_HORIZONTAL);
header('Content-type: image/png');
imagejpeg($im);
imagedestroy($im);
?>
 
    interlace()
    ใช้สำหรับปรับโหมดของรูปภาพให้เป็นรูปที่มีรูปแบบการแสดง แบบค่อยๆโหลดข้อมูล แทนการแสดง
แบบปกติ ที่โหลดข้อมูลครั้งเดียวและแสดงรูปภาพหลังจากโหลดข้อมูลเรียบร้อยแล้ว ถ้าเป็นไฟล์ jpg จะเรียกว่า
progressive JPEG รูปจะค่อยๆ แสดงไล่ไปทีละแถวข้อมูลรูป จนแสดงรูปภาพเต็ม ถ้าเป็นไฟล์ GIF จะเรียกว่า 
interlace GIF รูปจะแสดงคล้ายภาพ sensor แล้วค่อยๆ ชัดขึ้น
 
<?php
// include composer autoload
require_once 'vendor/autoload.php';
 
// import the Intervention Image Manager Class
use Intervention\Image\ImageManager;  
 
// สร้างตัวแปรอ้างอิง object ตัวจัดการรูปภาพ
$manager = new ImageManager();      
     
// การอ่านไฟล์จากรูภาพที่มีอยู่แล้ว โดยระ path ของรูปภาพ ที่จะใช้งาน เพื่อสร้างข้อมูลรูปภาพใหม่
$img = $manager->make('images/Dock.jpg');  

// กำหนดให้แสดงแบบ pregressive JPEG
$img->interlace();

// ส่ง HTTP header และข้อมูลของรูปเพื่อนำไปแสดง
echo $img->response();
?>
 
    stream()
    ใช้สำหรับสร้างข้อมูลของรูปภาพ เป็น Stream Object สามารถนำไปใช้แสดงในรูปแบบที่ต้องการ
หรือบันทึกไว้ใช้งานได้
 
<?php
// include composer autoload
require_once 'vendor/autoload.php';
 
// import the Intervention Image Manager Class
use Intervention\Image\ImageManager;  
 
// สร้างตัวแปรอ้างอิง object ตัวจัดการรูปภาพ
$manager = new ImageManager();      
     
// การอ่านไฟล์จากรูภาพที่มีอยู่แล้ว โดยระ path ของรูปภาพ ที่จะใช้งาน เพื่อสร้างข้อมูลรูปภาพใหม่
$img = $manager->make('images/Dock.jpg');  

// สร้าง stream object
$stream = $img->stream('jpg', 60);
// สร้างการแสดงข้อมูลแบบกำหนดเอง
header('Content-Type: image/jpg');
echo $stream;
?>
 
ทั้งหมดเป็นการอธิบานอย่างง่าย เกี่ยวกับการใช้งานคำสั่งต่างๆ ของ Intervention Image ที่ใช้ในการจัดการ
รูปภาพ ยังมีคำสั่งบางอย่างที่ยังไม่ได้กล่าวในที่นี้ มีรายละเอียดเพิ่มเติม จะมานำเสนอในตอนต่อๆ ไป
หรือดูรายละเอียดการใช้งานเพิ่มเติมได้ที่ http://image.intervention.io/

 





อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง








เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ