เนื้อหานี้ จะเป็นการมาอธิบายการใช้งานเพิ่มเติม เกี่ยวกับ Intervention Image ที่เป็น PHP Library
จัดการรุปภาพที่น่าสนใจ ต่อจากตอนที่แล้ว
แนวทาง การใช้งาน Intervention Image ปรับแต่งรูปภาพใน PHP ตอนที่ 1
https://www.ninenik.com/content.php?arti_id=822 via @ninenik
โดยจะขอแบ่งการอธิบายเป็นแต่ละส่วน ตามรูปแบบของคำสั่งที่นำมาใช้งาน เนื่องจากมีคำสั่งจำนวนมาก
จึงไม่มีรูปภาพประกอบทุกคำสั่ง แต่สามารถนำตัวอย่างไปทดลองรันดูผลลัพธ์ได้ ตามความสนใจ
การปรับขนาดรูปภาพ
เราสามารถปรับขนาด หรือตัดรูปภาพตามต้องการโดยใช้คำสั่งเหล่านี้
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() แต่คำสั่งนี้จะระบุแค่ความกว้าง แล้วให้ความสูง
ปรับความกว้างรูปภาพ คล้ายคำสั่ง resize() แต่คำสั่งนี้จะระบุแค่ความกว้าง แล้วให้ความสูง
ปรับให้ได้สัดส่วนอัตโนมัติเอง สามารถกำหนดไม่ให้ปรับขนาดถ้ากำหนดขนาดเกินขนาดรูปต้นฉบับ
<?php
// ปรับขนาดความกว้างตามกำหนด และให้ความสูงปรับขนาดอัตโนมัติตามสัดส่วน
$img->widen(300);
// ปรับขนาดความกว้างตามกำหนด และให้ความสูงปรับขนาดอัตโนมัติตามสัดส่วน
$img->widen(300, function ($constraint) {
$constraint->upsize(); // ถ้าค่าความกว้างที่กำหนดมากกว่าค่าเดิม ไม่ต้องปรับขนาด
});
heighten()
ปรับความสูงรูปภาพ คล้ายคำสั่ง resize() แต่คำสั่งนี้จะระบุแค่สูง แล้วให้ความกว้าง
ปรับความสูงรูปภาพ คล้ายคำสั่ง 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() ทำงานร่วมกัน โดยระบุความกว้าง
ตัดรูปภาพและปรับขนาดไปพร้อมกัน คล้ายคำสั่ง 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 เป็นปรับความสว่างเพิ่มขึ้น ค่าเท่ากับ 1 คือไม่มีการเปลี่ยนแปลง
<?php // กำหนดค่าแกมม่าเท่ากับ 1.6 $img->gamma(1.6);
brightness()
ปรับความสว่างของรูป โดยระบุค่าระหว่าง -100 ถึง 100 โดยที่ 0 คือค่าความสว่าง
ปรับความสว่างของรูป โดยระบุค่าระหว่าง -100 ถึง 100 โดยที่ 0 คือค่าความสว่าง
เริ่มต้นของรูปที่ไม่ได้มีการเปลี่ยนแปลง
<?php // เพิ่มความสว่างของรูปภาพ $img->brightness(35);
contrast()
ปรับความคมชัดของรูป โดยระบุค่าระหว่าง -100 ถึง 100 โดยที่ 0 คือค่าความคมชัด
ปรับความคมชัดของรูป โดยระบุค่าระหว่าง -100 ถึง 100 โดยที่ 0 คือค่าความคมชัด
เริ่มต้นของรูปที่ไม่ได้มีการเปลี่ยนแปลง
<?php // เพิ่มความคมชัดของรูป $img->contrast(65);
colorize()
ปรับโทนสีของรูปภาพเป็นค่าสี RGB ที่ต้องการ โดยเพิ่ม หรือ ลดค่าสี RGB ระหว่างค่า -100 ถึง 100
ปรับโทนสีของรูปภาพเป็นค่าสี 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
ปรับโทนสี GRB ของรูปภาพเป็นค่าตรงข้าม เช่น สีดำเดิมเป็น 0,0,0 ปรับตรงข้ามก็เป็น 255,255,255
ซึ่งก็เป็นค่าของสีขาว ในลักษณะแบบนี้เป็นต้น
<?php // ปรับค่าสีเป็นค่าตรงข้าม $img->invert();
mask()
การคลุมหรือบังรูปภาพโดยใช้รูปที่มีส่วนโปร่งใส ใช้กับไฟล์ png ที่รองรับการปรับค่าโปรงใส เช่น
การคลุมหรือบังรูปภาพโดยใช้รูปที่มีส่วนโปร่งใส ใช้กับไฟล์ 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 ไฟล์ โดยระบุเปอร์เซ็นต์
การปรับการมองเห็นของรูปใช้สำหรับภาพที่ต้องการแสดงเป็น png ไฟล์ โดยระบุเปอร์เซ็นต์
ค่าความโปร่งใส ระหว่าง 0 ถึง 100 ค่า 0 คือให้เป็นรูปโปร่งใส 100 คือเป็นค่าปกติ (* การใช้กับภาพที่มีขนาดใหญ่
จะมีผลต่อการใช้ทรัพยากรในการทำงาน ให้เลือกใช้โดยพิจารณาตามความเหมาะสม)
<?php // ปรับค่ามองเห็นของรูปให้เป็นโปร่งใส $img->opacity(0); // ปรับค่ามองเห็นของรูปให้เป็นโปร่งใส 50% $img->opacity(50);
orientate()
การปรับหมุนรูปภาพ คล้าย rotate() แต่คำสั่งนี้จะไปทำการอ่านค่า ทิศทางของรูป จากข้อมูล
การปรับหมุนรูปภาพ คล้าย 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 ของรูปให้มีขนาดตามต้องการ ทำให้รูปภาพแสดงคล้ายสี่เหลี่ยม
ปรับขนาด pixel ของรูปให้มีขนาดตามต้องการ ทำให้รูปภาพแสดงคล้ายสี่เหลี่ยม
เรียงต่อๆ กัน
<?php // กำหนดขนาด pixel เพื่อสร้าง pixelation effect เท่ากับ 12 $img->pixelate(12);
blur()
ปรับความเบลอของรูปภาพ โดยค่าเริ่มต้นเป็น 1 หรือกำหนดค่าระหว่าง 0 ถึง 100 ค่ายิ่งมาก
ปรับความเบลอของรูปภาพ โดยค่าเริ่มต้นเป็น 1 หรือกำหนดค่าระหว่าง 0 ถึง 100 ค่ายิ่งมาก
รูปก็จะยิ่งเบลอมาก
<?php // กำหนดภาพเบลอระดับ 1 $img->blur(); // กำหนดภาพเบลอระดับ 15 $img->blur(15);
sharpen()
ปรับความคมของภาพ โดยค่าเริ่มต้นเป็น 10 หรือกำหนดค่าระหว่าง 0 ถึง 100
ปรับความคมของภาพ โดยค่าเริ่มต้นเป็น 10 หรือกำหนดค่าระหว่าง 0 ถึง 100
<?php // กำหนดความคมของภาพระดับ 10 $img->sharpen(); // กำหนดความคมของภาพระดับ 15 $img->sharpen(15);
การวาดภาพ การเขียนภาพ
เราสามารถใช้คำสังต่อไปนี้ ในการวาดรูป เส้นตรง รูปสี่เหลี่ยม รูปหลายเหลี่ยม วงกลม วงรี เป็นต้น
ลงในรูปภาพ
text()
ใช้สำหรับเขียนข้อความ โดยระบุข้อความ ตำแหน่งเริ่มต้นข้อความในจุด x,y สามารถกำหนดไฟล์
ใช้สำหรับเขียนข้อความ โดยระบุข้อความ ตำแหน่งเริ่มต้นข้อความในจุด 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 ของจุดนั้นๆ ได้
ใช้สำหรับวาดจุด pixel โดยสามารถระบุสี และตำแหน่ง x,y ของจุดนั้นๆ ได้
<?php
// วาดจุด pixel สีขาว ตำแหน่ง 10,200
$img->pixel('#FFFFFF', 10, 200);
line()
ใช้สำหรับวาดเส้นตรง โดยระบุจุด x,y เริ่มต้น และ x,y สิ้นสุดของเส้น สามารถระบุสีเส้นได้
ใช้สำหรับวาดเส้นตรง โดยระบุจุด 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 มุมล่างขวาของรูปสี่เหลี่ยม
ใช้สำหรับวาดสี่เหลี่ยม โดยระบุจุด 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 ไปตามจำนวนของเหลี่ยม
ใช้สำหรับวาดรูปหลายเหลี่ยม โดยระบุจุดเชื่อมของเส้นขอบ 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
อ่านค่าความกว้างของรูปภาพ มีหน่วยเป็น px
<?php $width = $img->width();
height()
อ่านค่าความสูงของรูปภาพ มีหน่วยเป็น px
อ่านค่าความสูงของรูปภาพ มีหน่วยเป็น px
<?php $height = $img->height();
mime()
อ่านค่า MIME type ของรูปภาพ ตัวอย่างเช่น image/jpeg , image/png , image/gif
อ่านค่า MIME type ของรูปภาพ ตัวอย่างเช่น image/jpeg , image/png , image/gif
<?php $mime = $img->mime();
exif()
อ่านค่า EXIF data ถ้าไม่มีข้อมูลคืนค่าเป็น NULL
อ่านค่า EXIF data ถ้าไม่มีข้อมูลคืนค่าเป็น NULL
<?php
$arr_data1 = $img->exif(); // กรณีไม่ระบุ จะเป็นดึงค่าทั้งหมด ถ้ามีข้อมูล
$data3 = $img->exif('COMPUTED'); // กรณีระบุค่าเฉพาะที่ต้องการ
iptc()
อ่านค่า IPTC data ถ้าไม่มีข้อมูลคืนค่าเป็น NULL
อ่านค่า IPTC data ถ้าไม่มีข้อมูลคืนค่าเป็น NULL
<?php
$arr_data2 = $img->iptc(); // กรณีไม่ระบุ จะเป็นดึงค่าทั้งหมด ถ้ามีข้อมูล
$data4 = $img->iptc('Copyright'); // กรณีระบุค่าเฉพาะที่ต้องการ
pickColor()
อ่านค่าสีของ pixel ตำแหน่งจุด x,y ที่กำหนด
อ่านค่าสีของ 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() จะใช้สร้างจุดที่มีการเก็บสภาวะของรูป
โดยคำสั่งทั้งสองนี้จะใช้ควบคู่กัน คำสั่ง 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
ใช้สำหรับคืนค่า 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 สามารถนำไปใช้แสดงในรูปแบบที่ต้องการ
ใช้สำหรับสร้างข้อมูลของรูปภาพ เป็น 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 ที่ใช้ในการจัดการ
รูปภาพ ยังมีคำสั่งบางอย่างที่ยังไม่ได้กล่าวในที่นี้ มีรายละเอียดเพิ่มเติม จะมานำเสนอในตอนต่อๆ ไป