การประยุกต์ mod_rewrite ใช้งานร่วมกับ Intervention Image

เขียนเมื่อ 6 ปีก่อน โดย Ninenik Narkdee
intervention image mod rewrite

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

ดูแล้ว 6,449 ครั้ง


เราได้รู้จัก Intervention Image มาบ้างแล้วจากบทความก่อนๆ หน้า สามารถทบทวนหรือกลับไป
ดูย้อนเพิ่มเติมได้ที่
    คำสั่ง_วิธีการ_ใช้งาน_การประยุกต์_ตัวอย่าง_เกี่ยวกับ-intervention_image
 
ต่อไปนี้ จะเป็นแนวทางการจัดการเกี่ยวกับ url หรือ path ของรูปภาพบน server ยกตัวอย่างเช่น เรามีการ
จัดเก็บรูปภาพไว้บน server ที่โฟลเดอร์ uploadimage สมมติว่าไฟล์เราชื่อ mypicture.jpg มีความกว้างความ
สูงเท่ากับ 1200 x 630 px ดังนั้นตำแหน่ง url ของไฟล์บน server ก็จะเป็น
 
http://www.mywebsite.com/uploadimage/mypicture.jpg
 
url ข้างตันก็เป็นต้นฉบับของไฟล์บน server ที่มีขนาด 1200 x 630 px
เวลานำไปใช้งาน หากต้องการแสดงรูปในขนาดต่างๆ เราก็สามารถกำหนดค่าในส่วนของแท็ก <img> หรือกำหนด
ในส่วนของ css style เป็นดังนี้
 
<img src="http://www.mywebsite.com/uploadimage/mypicture.jpg" width="500" />
 
หรือ 
 
<img src="http://www.mywebsite.com/uploadimage/mypicture.jpg" style="width:500px;">
 
หรือ 
 
<style type="text/css">
.myimageclass{
	width:500px;
}
</style>
<img src="http://www.mywebsite.com/uploadimage/mypicture.jpg" class="myimageclass" />
 
ตามตัวอย่างข้างต้น จะเห็นว่าไฟล์ที่ถูกเรียกใช้งานจะเป็นไฟล์ต้นฉบับที่มีขนาดไฟล์ค่อนข้างใหญ่ ถึงแม้จะมีการ
นำมาแสดงโดยมีการปรับขนาดการแสดงให้เล็กลงก็ตาม แต่ขนาดไฟล์ที่โหลดมาแสดงก็ยังเป็นไฟล์ขนาดใหญ่
ซึ่งหากมีการแสดงรูปในลักษณะนี้จำนวนมากๆ ในหน้าเพจ ก็จะทำให้โหลดช้าหรือกินทรัพยากรในฝั่งของ server
ค่อนข้างมาก
 
สำหรับแนวทางการประยุกต์ที่จะนำเสนอ เป็นการอาศัยความสามารถของ Intervention Image มาช่วยในการ
สร้างไฟล์ใหม่ ขนาดต่างๆ ผ่านการกำหนดใน url สำหรับการใช้งาน Intervention Image ได้อธิบายรายละเอียด
ไปแล้ว สามารถย้อนไปอ่านตามลิ้งค์ที่แนะนำไปด้านบน ในเนื้อหานี้ จะเน้นไปที่ตัวอย่างการใช้งาน
    ยกตัวอย่างกับการประยุกต์กรณีนำไปใช้งานจริง เช่น เราต้องการใช้งานรูปภาพกับระบบของ LINE API 
ในการสร้าง imagemap ใน LINE Message API ต้องการใช้งานรูปแบบ url ของไฟล์เป็นดังนี้
 
https://example.com/images/cats
 
สำหรับภาพต้นฉบับหรือภาพที่กำหนดค่าเริ่มต้น
และขนาดความกว้างของไฟล์ที่ 700 px เป็นดังนี้
 
https://example.com/images/cats/700
 
ประมาณนี้เป็นต้น
 
เริ่มเต้น ให้เราสร้างโฟลเดอร์ขึ้นมาบน server ในที่นี้แนะนำให้สร้างอย่างน้อยสองขั้น เพื่อป้องกันการกำหนด
mod_rewrite ที่อาจจะซ้ำหรือกระทบต่อการกำหนด mod_rewrite ที่ root และชื่อโฟลเดอร์ควรเป็นชื่อ
จำเพราะได้จะดี สมมตติเรากำหนดเป็น
 
imgsrc > photos
 
ก็จะได้โฟลเดอร์ imgsrc และมีไฟล์เดอร์ photos อยู่ด้านใน  จากนั้นให้เราสร้างไฟล์
ชื่อไฟล์ pic.php ไฟล์นี้จะมีการใช้งาน Intervention Image รูปแบบไฟล์เริ่มต้นเป็นดังนี้
 
<?php
// กรณีต้องการตรวจสอบการแจ้ง error ให้เปิด 3 บรรทัดล่างนี้ให้ทำงาน กรณีไม่ ให้ comment ปิดไป
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// include composer autoload
require_once '../../vendor/autoload.php';
// กรณีมีการเชื่อมต่อกับฐานข้อมูล
//require_once("dbconnect.php");

// import the Intervention Image Manager Class
use Intervention\Image\ImageManager;  

// ทดสอบแสดงค่า ตัวแปร $_GET ที่ส่งผ่าน url
echo "<pre>";
print_r($_GET);
?>
 
ลองมาดูผลลัพธ์เมื่อเราเรียกผ่านบราวเซอร์ โดยยังไม่ส่งค่าตัวแปร ใดๆ
 
 


 
 
ทีนี้มาดูว่าค่าอะไร ที่เป็นไปได้เบื้องต้นบ้างที่เราจะส่งไปกำหนดในการจัดการรูปภาพ
ซึ่งอาจจะเป็นดังนี้คือ มี
 - ชื่อรูปภาพ file 
 - ขนาดความกว้าง width 
 - ความสูงที่ต้องการ height
 - ลักษณะการจัดการรูปภาพ เช่น crop resize fit widen heighten ตามรูปแบบคำสั่งของ
   Intervention Image สมมติเราใช้เป็นตัวย่อ c-crop r-resize ....
 
ลองใส่ตัวแปร GET เข้าไปใช้ url ดังนี้
 
http://www.mywebsite.com/imgsrc/photos/pic.php?mode=f&file=sampleimage.jpg&width=400&height=200
 
จะได้ผลลัพธ์เป็น
 
 


 
 
ตอนนี้คือเรามีตัว parameter ทั้งหมด 4 ตัวตามรูปด้านบน โดยบางค่าอาจจะมีค่าหรือไม่ก็ได้
ต่อไปเราจะทำ mod_rewrite เพื่อปรับ url ข้างต้น มีเงื่อนไขว่า url ใหม่ที่ทำ mod_rewrite ต้องส่ง
parameter ทั้ง 4 ได้เหมือนกับ url ก่อนทำ mod_rewrite ด้วย
 
รูปแบบที่เราต้องการคือ
 
http://www.mywebsite.com/imgsrc/photos/f/sampleimage/400
 
ให้เราสร้างไฟล์ .htaccess ไว้ในโฟลเดอร์ photos กำหนดค่าดังนี้
 
Options +FollowSymLinks -MultiViews
# Turn mod_rewrite on
RewriteEngine On
RewriteBase /imgsrc/photos
RewriteRule ^([f|c|r|w|h]+)/([^/]*)/([0-9]{2,})-([0-9]{2,})$ pic.php?mode=$1&file=$2&width=$3&height=$4 [NC,L,QSA]
RewriteRule ^([f|c|r|w|h]+)/([^/]*)/([0-9]{2,})$ pic.php?mode=$1&file=$2&width=$3 [NC,L,QSA]
RewriteRule ^([f|c|r|w|h]+)/([^/]*) pic.php?mode=$1&file=$2 [NC,L,QSA]
 
จากนั้นอัพโหลดขึ้น server ไว้ในโฟลเดอร์ photos แล้วทสอบเรียก url 
 
http://www.mywebsite.com/imgsrc/photos/f/sampleimage/400-200
 
ก็จะได้ค่าตัวแปร GET ส่งมาครบ เหมือนก่อนทำ mod_rewrite ดังนี้
 
Array
(
    [mode] => f
    [file] => sample
    [width] => 400
    [height] => 200
)
 
โดยเงื่อนไขของ mod_rewrite ของ url ของเราก็คือ
 
f/sampleimage/400-200  
 
ตัวแรก ต้องเป็นตัว f หรือ c หรือ r หรือ w หรือ h ผิดจากนี้ จะเข้า url หน้านั้นไม่ได้
ตัวที่สอง เป็นค่าอะไรก็ได้ ในที่นี้เราใช้ชื่อไฟล์ โดยตัดนามสกุลไฟล์ออก
ตัวที่สาม เป็นขนาดความกว้างที่ต้องการกำหนด มีหรือไม่ก็ได้
ตัวที่สี่ คั่นกับตัวที่สามด้วย ( - ) เป็นความสูงที่่ต้องการกำหนด ถ้าจะใช้งาน มีหรือไม่ก็ได้
 
รูปแบบ url ที่เราเรียกใช้งานได้ผ่าน mod_rewrite นี้ได้แก่
 
f/sampleimage  ส่งเฉพาะตัวแปร mode และ file
f/sampleimage/400 ส่งเฉพาะตัวแปร mode และ file และ width
f/sampleimage/400-200 ส่งตัวแปรทั้งหมด mode และ file และ width และ height
 
สุดท้ายก็ปรับไฟล์ pic.php ทำงานตามเงื่อนไขของตัวแปร parameter ที่ส่งมา
ในที่นี้ใช้รูปแบบ if else อย่างง่ายในการตรวจสอบเงื่อนไข เพื่อให้เข้าใจการทำงาน
โดยโฟลเดอร์รูปต้นฉบับจะอยู้ในโฟลเดอร์ uploadimage ที่ได้กล่าวไปแล้วในตอนต้นของบทความ
 
ไฟล์ pic.php
 
<?php
// กรณีต้องการตรวจสอบการแจ้ง error ให้เปิด 3 บรรทัดล่างนี้ให้ทำงาน กรณีไม่ ให้ comment ปิดไป
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// include composer autoload
require_once '../../vendor/autoload.php';
// กรณีมีการเชื่อมต่อกับฐานข้อมูล
//require_once("dbconnect.php");

// import the Intervention Image Manager Class
use Intervention\Image\ImageManager;  

if(isset($_GET['file']) && $_GET['file']!=""){
	$picFile = trim($_GET['file']);
	$originalFilePath = '../../uploadimage/'; // แก้ไขเป็นโฟลเดอร์รูปต้นฉบับ
	$fullFilePath = $originalFilePath.$picFile;
	$fullFilePathJPG = $fullFilePath.'.jpg';
	$fullFilePathPNG = $fullFilePath.'.png';
	$fullFile = '';
	$picType = '';
	if(file_exists($fullFilePathJPG)){
		$picType = 'jpg';
		$fullFile = $fullFilePath.'.'.$picType;
	}
	if(file_exists($fullFilePathPNG)){
		$picType = 'png';
		$fullFile = $fullFilePath.'.'.$picType;
	}	
	if($picType==''){
		header("HTTP/1.0 404 Not Found");
		exit;
	}
	// สร้างตัวแปรอ้างอิง object ตัวจัดการรูปภาพ
	$manager = new ImageManager();    
	$img = $manager->make($fullFile);     
	if(isset($_GET['mode']) && $_GET['mode']=='f'){
		if(isset($_GET['width']) && $_GET['width']!="" && isset($_GET['height']) && $_GET['height']!=""){		
			$img->fit($_GET['width'], $_GET['height'], function ($constraint) {
				$constraint->upsize(); // ถ้าค่าที่กำหนดมากกว่าค่าเดิม ไม่ต้องปรับขนาด
			});
		}else{
			// only width
			if(isset($_GET['width']) && $_GET['width']!=""){
				$img->fit($_GET['width']);				
			}else{ // no width parameter
				
			}
		}		
	}
	if(isset($_GET['mode']) && $_GET['mode']=='c'){
		if(isset($_GET['width']) && $_GET['width']!="" && isset($_GET['height']) && $_GET['height']!=""){	
			$img->crop($_GET['width'], $_GET['height']);			
		}else{
			// only width
			if(isset($_GET['width']) && $_GET['width']!=""){
				$img->crop($_GET['width'], $_GET['width']);				
			}else{ // no width parameter
				
			}
		}		
	}	
	if(isset($_GET['mode']) && $_GET['mode']=='r'){
		if(isset($_GET['width']) && $_GET['width']!="" && isset($_GET['height']) && $_GET['height']!=""){	
			$img->resize($_GET['width'], $_GET['height']);			
		}else{
			// only width
			if(isset($_GET['width']) && $_GET['width']!=""){
				$img->resize($_GET['width'], null, function ($constraint) {
					$constraint->aspectRatio();// ให้คงสัดส่วนของรูปภาพ
				});	
			}else{ // no width parameter
				
			}
		}		
	}		
	if(isset($_GET['mode']) && $_GET['mode']=='w'){
		// only width
		if(isset($_GET['width']) && $_GET['width']!=""){
			$img->widen($_GET['width'], function ($constraint) {
				$constraint->upsize(); // ถ้าค่าความกว้างที่กำหนดมากกว่าค่าเดิม ไม่ต้องปรับขนาด
			});
		}else{ // no width parameter
			
		}
	}			
	if(isset($_GET['mode']) && $_GET['mode']=='h'){
		if(isset($_GET['width']) && $_GET['width']!="" && isset($_GET['height']) && $_GET['height']!=""){		
			$img->heighten($_GET['height'], function ($constraint) {
				$constraint->upsize(); // ถ้าค่าความสูงที่กำหนดมากกว่าค่าเดิม ไม่ต้องปรับขนาด
			});
		}else{
			// only width
			if(isset($_GET['width']) && $_GET['width']!=""){
				$img->heighten($_GET['width'], function ($constraint) {
					$constraint->upsize(); // ถ้าค่าความสูงที่กำหนดมากกว่าค่าเดิม ไม่ต้องปรับขนาด
				});				
			}else{ // no width parameter
				
			}
		}
	}	
	
	// ส่ง HTTP header และข้อมูลของรูปเพื่อนำไปแสดง
	echo $img->response();			
}else{
	header("HTTP/1.0 404 Not Found");
	exit;	
}
?>
 
 
เป็นอันเสร็จเรียบร้อย เราสามารถทดสอบเรียกใช้การแสดงรูปภาพ ผ่าน url ในรูปแบบต่างๆ ดูการทำงาน
ของได้เลย ดูตัวอย่างผลลัพธ์ตามรูปด้านล่าง
 

 


 
 
 
สามารถใช้งานร่วมกับการ cache ได้โดยสามารถดูเพิ่มเติมได้ที่บทความ
 
    วิธีใช้งานและประยุกต์การ cache รูปภาพด้วย Intervention Image ตอนที่ 3 http://niik.in/824 


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 14-11-2017


ปรับโค้ดจากกรณีใช้งาน if else เป็น switch

<?php
// กรณีต้องการตรวจสอบการแจ้ง error ให้เปิด 3 บรรทัดล่างนี้ให้ทำงาน กรณีไม่ ให้ comment ปิดไป
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// include composer autoload
require_once '../../vendor/autoload.php';
// กรณีมีการเชื่อมต่อกับฐานข้อมูล
//require_once("dbconnect.php");

// import the Intervention Image Manager Class
use InterventionImageImageManager;  

if(isset($_GET['file']) && $_GET['file']!=""){
	$picFile = trim($_GET['file']);
	$originalFilePath = '../../uploadimage/'; // แก้ไขเป็นโฟลเดอร์รูปต้นฉบับ
	$fullFilePath = $originalFilePath.$picFile;
	$fullFilePathJPG = $fullFilePath.'.jpg';
	$fullFilePathPNG = $fullFilePath.'.png';
	$fullFile = '';
	$picType = '';
	if(file_exists($fullFilePathJPG)){
		$picType = 'jpg';
		$fullFile = $fullFilePath.'.'.$picType;
	}
	if(file_exists($fullFilePathPNG)){
		$picType = 'png';
		$fullFile = $fullFilePath.'.'.$picType;
	}	
	if($picType==''){
		header("HTTP/1.0 404 Not Found");
		exit;
	}
	// สร้างตัวแปรอ้างอิง object ตัวจัดการรูปภาพ
	$manager = new ImageManager();    
	$img = $manager->make($fullFile);     
	
	$width = (isset($_GET['width']) && $_GET['width']!="")?$_GET['width']:NULL;
	$height = (isset($_GET['height']) && $_GET['height']!="")?$_GET['height']:NULL;
	$mode = (isset($_GET['mode']) && $_GET['mode']!="")?$_GET['mode']:NULL;
	
	if(!is_null($width) && !is_null($height)){
		switch ($mode) {
			case 'f':
				$img->fit($width, $height, function ($constraint) {
					$constraint->upsize(); // ถ้าค่าที่กำหนดมากกว่าค่าเดิม ไม่ต้องปรับขนาด
				});	
				break;	
			case 'c':
				$img->crop($width, $height);	
				break;	
			case 'r':
				$img->resize($width, $height);	
				break;	
			case 'w':
				$img->widen($width, function ($constraint) {
					$constraint->upsize(); // ถ้าค่าที่กำหนดมากกว่าค่าเดิม ไม่ต้องปรับขนาด
				});	
				break;			
			case 'h':
				$img->heighten($height, function ($constraint) {
					$constraint->upsize(); // ถ้าค่าที่กำหนดมากกว่าค่าเดิม ไม่ต้องปรับขนาด
				});	
				break;																	
		}
	}else{
		if(!is_null($width)){
			switch ($mode) {
				case 'f':
					$img->fit($width);	
					break;	
				case 'c':
					$img->crop($width, $width);	
					break;	
				case 'r':
					$img->resize($width, null, function ($constraint) {
						$constraint->aspectRatio();// ให้คงสัดส่วนของรูปภาพ
					});	
					break;	
				case 'w':
					$img->widen($width, function ($constraint) {
						$constraint->upsize(); // ถ้าค่าที่กำหนดมากกว่าค่าเดิม ไม่ต้องปรับขนาด
					});	
					break;			
				case 'h':
					$img->heighten($width, function ($constraint) {
						$constraint->upsize(); // ถ้าค่าที่กำหนดมากกว่าค่าเดิม ไม่ต้องปรับขนาด
					});	
					break;		
			}
		}
	}
	
	// ส่ง HTTP header และข้อมูลของรูปเพื่อนำไปแสดง
	echo $img->response();			
}else{
	header("HTTP/1.0 404 Not Found");
	exit;	
}
?>


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







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






เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน



( หรือ เข้าใช้งานผ่าน Social Login )




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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







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