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

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

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

ดูแล้ว 13,043 ครั้ง


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

 

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

    เราสามารถปรับขนาด หรือตัดรูปภาพตามต้องการโดยใช้คำสั่งเหล่านี้
 
    resize()
    ปรับขนาดรูปภาพ โดยระบุความกว้างและความสูงที่ต้องการ สามารถกำหนดให้ปรับขนาดรูป
โดยคงสัดส่วนของรูปภาพได้ หรือไม่ให้ปรับขนาดถ้ากำหนดขนาดเกินขนาดรูปต้นฉบับ
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?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() แต่คำสั่งนี้จะระบุแค่ความกว้าง แล้วให้ความสูง
ปรับให้ได้สัดส่วนอัตโนมัติเอง สามารถกำหนดไม่ให้ปรับขนาดถ้ากำหนดขนาดเกินขนาดรูปต้นฉบับ
 
1
2
3
4
5
6
7
8
<?php
// ปรับขนาดความกว้างตามกำหนด และให้ความสูงปรับขนาดอัตโนมัติตามสัดส่วน
$img->widen(300);
 
// ปรับขนาดความกว้างตามกำหนด และให้ความสูงปรับขนาดอัตโนมัติตามสัดส่วน
$img->widen(300, function ($constraint) {
    $constraint->upsize(); // ถ้าค่าความกว้างที่กำหนดมากกว่าค่าเดิม ไม่ต้องปรับขนาด
});
 
    heighten()
    ปรับความสูงรูปภาพ คล้ายคำสั่ง resize() แต่คำสั่งนี้จะระบุแค่สูง แล้วให้ความกว้าง
ปรับให้ได้สัดส่วนอัตโนมัติเอง สามารถกำหนดไม่ให้ปรับขนาดถ้ากำหนดขนาดเกินขนาดรูปต้นฉบับ
 
1
2
3
4
5
6
7
8
<?php
// ปรับขนาดความสูงตามกำหนด และให้ความกว้างปรับขนาดอัตโนมัติตามสัดส่วน
$img->heighten(200);
 
// ปรับขนาดความสูงตามกำหนด และให้ความกว้างปรับขนาดอัตโนมัติตามสัดส่วน
$img->heighten(200, function ($constraint) {
    $constraint->upsize(); // ถ้าค่าความสูงที่กำหนดมากกว่าค่าเดิม ไม่ต้องปรับขนาด
});
 
    crop()
    ตัดรูปภาพ โดยระบุขนาดความกว้างและความสูงที่ต้องการ และกำหนดตำแหน่งจุดเริ่มต้นการตัดรูป
ที่จุดตำแหน่งมุมบุนซ้าย x,y ถ้าไม่ระบุจะใช้จุดกึ่งกลางของรูปต้นฉบับ 
 
1
2
3
4
5
6
<?php
// ตัดรูปขนาด 100x100 โดยให้กึ่งกลางรูปที่ตัดอยู่ตำแหน่งกึ่งกลางรูปต้นฉบับ
$img->crop(100, 100);
 
// ตัดรูปขนาด 100x100 โดยให้ตำหน่งมุมบนของรูปที่ตัด อยู่ที่ตำแหน่ง x,y ที่ 25,25 ของต้นฉบับ
$img->crop(100, 100, 25, 25);
 
    fit()  
    ตัดรูปภาพและปรับขนาดไปพร้อมกัน คล้ายคำสั่ง crop() และ resize() ทำงานร่วมกัน โดยระบุความกว้าง
และความสูง หรือระบุเฉพาะความกว้างกรณีเป็นรูปสี่เหลี่ยมจัตุรัส สามารถกำหนดไม่ให้ปรับขนาดถ้ากำหนดขนาด
เกินขนาดรูปต้นฉบับ
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?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()
    ใช้ปรับขนาดพื้นที่ของรูป โดยระบุขนาดความกว้าง ความสูงของพื้นที่รูปที่้ต้องการ สามารถระบุ
ค่าแบบอ้างอิงจากขนาดเดิมหรือระบุขนาดแบบจำเพาะได้ สามารถใส่สีพื้นหลังกรณีพื้นที่ของรูปใหม่มีพื้นที่ว่าง
ที่เพิ่มขึ้นจากรูปเดิม
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?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()
    ใช้ตัดขอบสีของรูป โดยระบุสีของขอบที่ต้องการตัดตามตำแหน่งมุนบนซ้าย หรือมุมล่างขวาหรือตัดขอบ
ที่เป็นโปรงใสออก สามารถเลือกที่จัดเฉพาะขอบด้านใดด้านหนึ่งหรือหลายๆ ด้านได้ สามารถกำหนดเปอร์เช็นต์
ของความคลาดเคลื่อนของค่าสีหรือค่าสีที่ใกล้เคียงที่ยอมรับได้จากสีที่เลือก สามารถกำหนดการฟุ้งของขอบได้
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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 คือไม่มีการเปลี่ยนแปลง
 
1
2
3
<?php
// กำหนดค่าแกมม่าเท่ากับ 1.6
$img->gamma(1.6);
 
    brightness()
    ปรับความสว่างของรูป โดยระบุค่าระหว่าง -100 ถึง 100 โดยที่ 0 คือค่าความสว่าง
เริ่มต้นของรูปที่ไม่ได้มีการเปลี่ยนแปลง
 
1
2
3
<?php
// เพิ่มความสว่างของรูปภาพ
$img->brightness(35);
 
    contrast()
    ปรับความคมชัดของรูป โดยระบุค่าระหว่าง -100 ถึง 100 โดยที่ 0 คือค่าความคมชัด
เริ่มต้นของรูปที่ไม่ได้มีการเปลี่ยนแปลง
 
1
2
3
<?php
// เพิ่มความคมชัดของรูป
$img->contrast(65);
 
    colorize()
    ปรับโทนสีของรูปภาพเป็นค่าสี RGB ที่ต้องการ โดยเพิ่ม หรือ ลดค่าสี RGB ระหว่างค่า -100 ถึง 100
จะทำให้โทนสีของรูปภาพปรับไปตามค่าที่มีการเพิ่มหรือลด หรือที่เรียกว่า Color Balance ใน Photoshop
 
1
2
3
4
5
6
<?php
// ลดค่าสีแดงและเพิ่มค่าสีน้ำเงินให้กับรูปภาพ
$img->colorize(-100, 0, 100);
 
// เพิ่มค่าสีเขียวเล็กน้อยให้กับรูป
$img->colorize(0, 30, 0);
 
    fill()
    เติมสีให้กับรูปหรือเติมรูปลวดลายลงบนรูป
 
1
2
3
4
5
6
<?php
// เติมสีแดงลงไปในรูป
$img->fill('#FF0000');
 
// เติมรปลวดลายเป็นชิ้นๆ ซ้อนกันลงในรูป
$img->fill('tile.png');
 
    greyscale()
    ปรับโทนสีของรูปภาพเป็นขาวดำ
 
1
2
3
<?php
// ปรับรูปภาพให้เป็นสีขาวดำ
$img->greyscale();
 
    invert()
    ปรับโทนสี GRB ของรูปภาพเป็นค่าตรงข้าม เช่น สีดำเดิมเป็น 0,0,0 ปรับตรงข้ามก็เป็น 255,255,255
ซึ่งก็เป็นค่าของสีขาว ในลักษณะแบบนี้เป็นต้น
 
1
2
3
<?php
// ปรับค่าสีเป็นค่าตรงข้าม
$img->invert();
 
    mask()
    การคลุมหรือบังรูปภาพโดยใช้รูปที่มีส่วนโปร่งใส ใช้กับไฟล์ png ที่รองรับการปรับค่าโปรงใส เช่น
เราเอารูปที่สอง มาบังรูปแรกโดยรูปที่สองมีส่วนที่เป็นโปร่งใส เมื่อซ้อนทับกัน ส่วนที่โปร่งใสก็จะบังทับรูปแรก
ส่วนที่ไม่โปร่งใส ก็จะแสดงเป็นรูปแรกแทน (* จากการทดสอบ คำสั่งนี้ใช้ทรัพยากรในการทำงานมาก จึงไม่ค่อย
แนะนำให้ใช้งาน)
 
1
2
3
4
5
6
7
8
9
<?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()
    ปรับรูปภาพให้พลิกกลับสลับซ้ายขวา หรือบนล่าง 
 
1
2
3
4
5
6
7
<?php
// กลับรุปภาพในแนวนอน คล้ายภาพสะท้อนในกระจก
$img->flip();
//$img->flip('h'); // กำหนดหรือไม่ก็ได้
 
// กลับรูปภาพในแนวตั้ง
$img->flip('v');
 
    rotate()
    การปรับหมุนรูปภาพด้วยมุมตามเข็มหรือทวนเข็มนาฬิกา โดยระบุองศาที่ต้องการ ค่า - คือหมุนตาม
เข็มนาฬิกา สามารถระบุสีพื้นหลังของรูปได้
 
1
2
3
4
5
6
7
8
9
10
<?php
// หมุนรูปภาพตามองศาที่ต้องการ ถ้าเป็นค่าลบ คือหมุนตามเข็มนาฬิกา
$img->rotate(-45);
 
// หมุนรูปภาพตามองศาที่ต้องการ ถ้าเป็นค่าบวก คือหมุนทวนเข็มนาฬิกา
$img->rotate(75);
 
// หมุนรูปภาพตามองศาที่ต้องการ ถ้าเป็นค่าบวก คือหมุนทวนเข็มนาฬิกา
// กำหนดสีพื้นหลังของรูปส่วนเกินที่เกิดขึ้นจากการหมุน ถ้าไม่กำหนดสี และเป็นไฟล์ png หรือ gif จะเป็นโปร่งใส
$img->rotate(45,'#FF0000');
 
    opacity()
    การปรับการมองเห็นของรูปใช้สำหรับภาพที่ต้องการแสดงเป็น png ไฟล์ โดยระบุเปอร์เซ็นต์
ค่าความโปร่งใส ระหว่าง 0 ถึง 100 ค่า 0 คือให้เป็นรูปโปร่งใส 100 คือเป็นค่าปกติ (* การใช้กับภาพที่มีขนาดใหญ่
จะมีผลต่อการใช้ทรัพยากรในการทำงาน ให้เลือกใช้โดยพิจารณาตามความเหมาะสม)
 
1
2
3
4
5
6
<?php
// ปรับค่ามองเห็นของรูปให้เป็นโปร่งใส
$img->opacity(0);
 
// ปรับค่ามองเห็นของรูปให้เป็นโปร่งใส 50%
$img->opacity(50);
 
    orientate()
    การปรับหมุนรูปภาพ คล้าย rotate() แต่คำสั่งนี้จะไปทำการอ่านค่า ทิศทางของรูป จากข้อมูล
ใน EXIF แล้วหมุนรูปไปในทิศทางที่ถูกต้องอัตโนมัติ
 
1
2
3
<?php
// หมุนรูปตามค่าทิศทางของรูปที่กำหนดใน EXIF data
$img->orientate();



 

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

 
    filter()
    ใช้สำหรับเรียงใช้คำสั่งการปรับแต่งหลายคำสั่งรวมกัน ที่เรากำหนดขึ้นมาเอง
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?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 ของรูปให้มีขนาดตามต้องการ ทำให้รูปภาพแสดงคล้ายสี่เหลี่ยม
เรียงต่อๆ กัน
 
1
2
3
<?php
// กำหนดขนาด pixel เพื่อสร้าง pixelation effect เท่ากับ 12
$img->pixelate(12);
 
    blur()
    ปรับความเบลอของรูปภาพ โดยค่าเริ่มต้นเป็น 1 หรือกำหนดค่าระหว่าง 0 ถึง 100 ค่ายิ่งมาก
รูปก็จะยิ่งเบลอมาก
 
1
2
3
4
5
6
<?php
// กำหนดภาพเบลอระดับ 1
$img->blur();
 
// กำหนดภาพเบลอระดับ 15
$img->blur(15);
 
 
    sharpen()
    ปรับความคมของภาพ โดยค่าเริ่มต้นเป็น 10 หรือกำหนดค่าระหว่าง 0 ถึง 100
 
1
2
3
4
5
6
<?php
// กำหนดความคมของภาพระดับ 10
$img->sharpen();
 
// กำหนดความคมของภาพระดับ 15
$img->sharpen(15);


 

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

    เราสามารถใช้คำสังต่อไปนี้ ในการวาดรูป เส้นตรง รูปสี่เหลี่ยม รูปหลายเหลี่ยม วงกลม วงรี เป็นต้น 
ลงในรูปภาพ
 
    text()
    ใช้สำหรับเขียนข้อความ โดยระบุข้อความ ตำแหน่งเริ่มต้นข้อความในจุด x,y สามารถกำหนดไฟล์
fonts ที่ต้องการ กำหนดขนาด สี การจัดแนวนอน การจัดแนวตั้ง และมุมของข้อความได้
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?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 ของจุดนั้นๆ ได้
 
1
2
3
<?php
// วาดจุด pixel สีขาว ตำแหน่ง 10,200
$img->pixel('#FFFFFF', 10, 200);
 
    line()  
    ใช้สำหรับวาดเส้นตรง โดยระบุจุด x,y เริ่มต้น และ x,y สิ้นสุดของเส้น สามารถระบุสีเส้นได้
 
1
2
3
4
5
<?php
// วาดเส้นตรงเริ่มต้นตำแหน่ง 400,10 สิ้นสุด 195,195 แบบมีระบุสีของเส้น
$img->line(400, 10, 195, 195, function ($draw) {
    $draw->color('#FFF200');
});
 
    rectangle()
    ใช้สำหรับวาดสี่เหลี่ยม โดยระบุจุด x,y มุมบนซ้าย กับจุด x,y มุมล่างขวาของรูปสี่เหลี่ยม  
สามารถระบุสีพื้นหลัง และสีขอบพร้อมขนาดได้ 
 
1
2
3
4
5
6
<?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 ไปตามจำนวนของเหลี่ยม
ของรูปนั้น สามารถระบุสีพื้นหลัง สีและขนาดของเส้นขอบได้
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?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 สามารถระบุสีพื้นหลัง สีและขนาดของเส้นขอบได้
 
1
2
3
4
5
6
<?php
// วาดรูปวงกลมเส้นผ่านศูนย์กล้าง 100 ตำแหน่ง 100,300 เทสีพื้นหลังและเส้นขอบ
$img->circle(100, 100, 300, function ($draw) {
    $draw->background('#0000ff');
    $draw->border(3, '#FFF200');
});
 
    ellipse()
    ใช้สำหรับวาดรูปวงรี โดยระบุขนาดความกว้าง และความสูง กับระบุตำแหน่งจุดกึ่งกลาง
ของวงรีในตำแหน่ง x,y สามารถระบุสีพื้นหลัง สีและขนาดของเส้นขอบได้
 
1
2
3
4
5
6
<?php
// วาดรูปวงรีกว้าง 60 สูง 120 ตำแหน่ง 310,310 เทสีพื้นหลังและเส้นขอบ
$img->ellipse(60, 120, 310, 310, function ($draw) {
    $draw->background('#0000ff');
    $draw->border(1, '#ff0000');
});
 
ตัวอย่างโค้ด 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<?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
 
1
2
<?php
$width = $img->width();
 
    height()
    อ่านค่าความสูงของรูปภาพ มีหน่วยเป็น px
 
1
2
<?php
$height = $img->height();
 
    mime()
    อ่านค่า MIME type ของรูปภาพ ตัวอย่างเช่น image/jpeg , image/png , image/gif
 
1
2
<?php
$mime = $img->mime();
 
    exif()
    อ่านค่า EXIF data ถ้าไม่มีข้อมูลคืนค่าเป็น NULL
 
1
2
3
<?php
$arr_data1 = $img->exif();  // กรณีไม่ระบุ จะเป็นดึงค่าทั้งหมด ถ้ามีข้อมูล
$data3 = $img->exif('COMPUTED'); // กรณีระบุค่าเฉพาะที่ต้องการ
 
    iptc()
    อ่านค่า IPTC data ถ้าไม่มีข้อมูลคืนค่าเป็น NULL
 
1
2
3
<?php
$arr_data2 = $img->iptc(); // กรณีไม่ระบุ จะเป็นดึงค่าทั้งหมด ถ้ามีข้อมูล
$data4 = $img->iptc('Copyright'); // กรณีระบุค่าเฉพาะที่ต้องการ
 
    pickColor()
    อ่านค่าสีของ pixel ตำแหน่งจุด x,y ที่กำหนด
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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');
 
 
ตัวอย่างโค้ด 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?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  จะมีรูปแบบการใช้งานดังนี้
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?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 ได้
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?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 แล้วค่อยๆ ชัดขึ้น
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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 สามารถนำไปใช้แสดงในรูปแบบที่ต้องการ
หรือบันทึกไว้ใช้งานได้
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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/

 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



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









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



Tags:: ปรับแต่งรูปภาพ php intervention image







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












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ