PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


การใช้งาน PHP QRcode Library และประยุกต์ ร่วมกับ Intervention Image

07 October 2017 By
qrcode phpqrcode intervention image

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



เนื้อหาต่อไปนี้ จะแนะนำ PHP QRcode ซึ่งป็น PHP Library ที่ใช้ในการสร้าง QRcode โดยเป็นตัวที่มีการปรับปรุง
มาจากตัวเดิม ที่เคยแนะนำไปแล้วในบทความ
    สร้าง qrcode จากฐานข้อมูลอย่างง่ายด้วย phpqrcode http://niik.in/581 
    http://www.ninenik.com/content.php?arti_id=581 via @ninenik
 
เราจะติดตั้ง package มาใช้งานผ่าน composer และเนื่องจากว่าเราจะนำมาประยุกต์กับ การใช้งาน Intervention Image
จึงขอยกตัวอย่างมารวมไว้ใน PHP Project ทดสอบเดียวกันกับบทความด้านล่างนี้
    แนวทาง การใช้งาน Intervention Image ปรับแต่งรูปภาพใน PHP ตอนที่ 1 http://niik.in/822 
    http://www.ninenik.com/content.php?arti_id=822 via @ninenik
 
    จะขออธิบายแยกออกเป็นสองส่วน ส่วนแรกจะเป็นเนื้อหาเบื้องต้นการใช้งาน PHP QRcode ทั่วไป และส่วนที่สอง การ
นำไปประยุกต์ใช้กับ Intervention Image เพื่อให้เราสามารถปรับแต่งรูป QRcode ได้มากขึ้น
 
 

การใช้งาน PHP QRcode Library

    การสร้างไฟล์ QRcode

    ทำการดาวน์โหลด package มาใช้งานใน PHP Project ของเรา โดยเข้าไปใน path ของ Project ผ่าน command line
จากนั้นใช้คำสั่ง composer ตามด้านล่างนี้ เพื่อดาวน์โหลด package มาใช้งาน
 
composer require aferrandini/phpqrcode
 
รูปกาาติดตั้ง phpqrcode package ผ่าน composer

 
 


 
 
หลังจากนั้น ให้เราสร้างไฟล์เรียกใช้งาน สมมติใช้ชื่อว่า qrcode.php ไว้ใน PHP Project ของเรา ดังรูป

 
 


 
 
ทดสอบการใช้งานเบื้องต้น ไฟล์ qrcode.php 
 
<?php
// include composer autoload
require_once 'vendor/autoload.php';

// เรียกใช้งานสร้าง qrcode โดยสร้าง qrcode 
// ข้อควม http://www.ninenik.com
// บันทึกเป็นไฟล์ ชื่อ myqrcode.png ไว้ในโฟลเดอร์ images / picqrcode / myqrcode.png 
// กำหนด Error Correction ของ QRcode เท่ากับ L  (มีค่า L,M,Q และ H)
// กำหนด ขนาด pixel เท่ากับ 4
// กำหนดความหนาของกรอบ เท่ากับ 2
\PHPQRCode\QRcode::png("http://www.ninenik.com", "images/picqrcode/myqrcode.png", 'L', 4, 2);
?>
 
หลังจากเราเรียกไฟล์ qrcode.php ผ่านบราวเซอร์ จะไม่มีการแสดงค่าใดๆ แต่จะมีการสร้างไฟล์ไว้ในโฟลเดอร์
images > picqrcode > myqrcode.png ดังรูป
 
 


 
 
ค่า Error Correction ของ QRcode คือค่าที่กำหนดว่า QRcode ของเรา ว่ารองรับระดับความผิดพลาด หรือความคลาดเคลื่อน
ซึ่งอาจจะเกิดจากสภาพแวดล้อมของ QRcode นั้นๆ ถูกใช้งาน เช่น มีฝุ่นจับ การหลุดลอก หรือถูกบดบังจากการปนเปื้อน
เหล่านี้เป็นต้น โดย ค่าแต่ละระดับ เป็นดังนี้
 
  • Level L – up to 7% damage
  • Level M – up to 15% damage
  • Level Q – up to 25% damage
  • Level H – up to 30% damage
 
โดยทั่วไป ระดับ L และ M จะเป็นที่นิยมในการใช้งานในด้านการตลาด เนื่องจากมีระดับความหนาแน่นของตัว qrcode ที่
เหมาะสม ตัวอย่างการใช้งาน เช่น การนำมาแสดงในเว็บไซต์หรือโพสต่างๆในสื่อ social  การใช้ในป้ายประกาศ
ประชาสัมพันธ์ในพื้นที่ปิดหรืออาคาร การติดในแผ่นโบชัวร์แผ่นพับ เป็นต้น
ระดับ Q และ H จะนิยมใช้ในสภาพแวดล้อมที่เป็นโรงงานอุตสาหกรรมหรือพื้นที่ที่ QRcode อาจจะได้รับผลกระทบจาก
สภาพแวดล้อมโดยรอบ 
    การกำหนดระบดับ Error Correction โดยค่ายิ่งมาก การรักษาไว้ซึ่งค่าความถูกต้องของข้อมูลก็จะยิ่งมากขึ้นไปด้วย แต่
ก็มีผลต่อขนาดของตัวรูป QRcode ที่จะมีขนาดใหญ่ขึ้นตามความแน่น ดังนั้นการใช้ QRcode ที่มีความหนาแน่นน้อย ก็จะช่่วย
ให้การพิมพ์ QRcode มาใช้ขนาดเล็กลง ได้ด้วย 
    ในที่นี้เราจะใช้ระดับ M ซึ่งเพียงพอสำหรับการใช้งานในเว็บไซต์ และรองรับนำไปปรับแต่งค่าเพิ่มเติมได้
 
 
 
 

    การสร้างไฟล์ QRcode หลายๆ ไฟล์จากข้อมูลในฐานข้อมูล

    สมตติเราจะสร้างข้อมูลชื่อจังหวัดในประเทศไทยจากฐานข้อมูล สามารถทำได้ดังนี้
 
ไฟล์ dbconnect.php
 
<?php  
$mysqli = new mysqli("localhost", "root","","test");  
/* check connection */
if ($mysqli->connect_errno) {  
    printf("Connect failed: %s\n", $mysqli->connect_error);  
    exit();  
}  
if(!$mysqli->set_charset("utf8")) {  
    printf("Error loading character set utf8: %s\n", $mysqli->error);  
    exit();  
}
 
ไฟล์ qrcode.php
 
<?php
require_once('dbconnect.php');
// include composer autoload
require_once 'vendor/autoload.php';


// path โฟลเดอร์ที่จะเก็บไฟล์รูป qrcode ที่สร้าง
$path_qrcode = "images/picqrcode/provinces/";
$sql = "
SELECT * FROM tbl_provinces
";
$result = $mysqli->query($sql);
if($result && $result->num_rows>0){ 
	while($row = $result->fetch_assoc()){		
		$file_qrcode = "province_".$row['province_id'].".png";
		$full_savePath = $path_qrcode.$file_qrcode;
		$text_qrcode = $row['province_name'];
		\PHPQRCode\QRcode::png($text_qrcode, $full_savePath, 'M', 4, 2);
	}
}
?>

ทดสอบรันผ่านบราวเซอร์ จะได้ผลลัพธ์ คือมีการสร้างไฟล์ ไว้ในโฟลเดอร์ 
images > picqrcode > provinces ดังรูปด้านล่าง
 
 

 
 
เราจะได้รูป qrcode ทั้งหมด 77 รูป ตามจำนวนจังหวัดในฐานข้อมูล
 
 

    การแสดง QRcode ผ่านบราวเซอร์

    เราสามารถสร้าง QRcode และแแสดงผลทันทีโดยไม่ต้องทำการบันทึกเป็นไฟล์ ได้ด้วยวิธีดังนี้
สมมติเรารองรับการใช้ข้อมูลจากฐานข้อมูล โดยส่งค่า province_id ของจังหวัดเข้ามา เพื่อดึงข้อมูล 
และแสดง qrcode 
 
ไฟล์ qrcode.php
 
<?php
require_once('dbconnect.php');
// include composer autoload
require_once 'vendor/autoload.php';

// ส่งค่าตัวแปร GET ชื่อ id ของ id จังหวัด ที่ต้องการแสดง qrcide
if(isset($_GET['id']) && $_GET['id']!=""){
	$sql = "
	SELECT * FROM tbl_provinces WHERE province_id='".$_GET['id']."'
	";
	$result = $mysqli->query($sql);
	if($result && $result->num_rows>0){ 
		$row = $result->fetch_assoc();	
		$text_qrcode = $row['province_name'];
		header('Content-Type: image/png');
		\PHPQRCode\QRcode::png($text_qrcode, 'php://output', 'M', 4, 2);	
	}
}
?>
 
ตัวอย่างการเรียกใช้ผ่านบราวเซอร์ และผลลัพธ์ที่ได้
 
 

 
 
จากรูปเราส่ง id=1 เข้าไป ซึ่งเป็นจังหวัด กรุงเทพฯ เราก็จะได้ qrcode ของคำว่า กรุงเทพมหานคร แสดงออกมาดังรูป
โดยที่เราไม่ต้องบันทึกเป็นไฟล์การนำมาใช้ 
 
ตัวอย่างการนำไปแสดงในแท็ก HTML ในเพจของเรา สามารถกำหนดได้ดังนี้
 
<img src="qrcode.php?id=1" />
 
การใช้งานโดยแสดงรูป qrcode หลังจากสร้าง แล้วผ่านบราวเซอร์ แทนการดึงจากไฟล์ภาพที่บันทึก ถ้ามีการเรียกแสดง qrcode
จำนวนมากๆ จะมีผลต่อการทำงานของ server เราสามารถประยุกต์โดยการ cache ข้อมูลได้
 
ดูตัวอย่างเพิ่มเติมอีกสักตัวอย่าง กรณีเราต้องการแค่ส่งค่าข้อมูลผ่าน url แล้วให้แสดง อย่างง่าย เราสามารถใช้โค้ดได้ดังนี้
 
ไฟล์ qrcode.php
 
<?php
// include composer autoload
require_once 'vendor/autoload.php';

// ส่งค่าตัวแปร GET ชื่อ id ของ id จังหวัด ที่ต้องการแสดง qrcide
if(isset($_GET['val']) && $_GET['val']!=""){
	$text_qrcode = urldecode(trim($_GET['val']));
	header('Content-Type: image/png');
	\PHPQRCode\QRcode::png($text_qrcode, 'php://output', 'M', 4, 2);	
}
?>
 
การเรียกใช้งาน
 
<img src="qrcode.php?val=<?=urlencode('ทดสอบ ข้อความเว้น วรรค')?>" />
 
 
 

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

    การใช้งานรูปจากไฟล์รูป qrcode

    เราสามารถใช้ความสามารถของ Intervention Image ปรับแต่ง QRcode ได้ง่าย วิธีการก็เช่นเดียวกับการใช้งานกับรูป
ภาพโดยทั่วไป เช่น สมมติเราสร้าง qrcode เป็นไฟล์รูปภาพมาแล้ว เราก็สามารถใช้คำสั่ง make() เพื่อเรียกใช้ไฟล์นั้นๆ
มาปรับแต่งค่าได้ตามต้องการ ตัวอย่างอย่างง่าย เราใช้ไฟล์  myqrcode.png ในโฟลเดอร์ 
images > picqrcode > myqrcode.png
 
ไฟล์ img.php
 
<?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/picqrcode/myqrcode.png')->fit(200)->colorize(100,0,0);

// ส่ง HTTP header และข้อมูลของรูปเพื่อนำไปแสดง
echo $img->response();
?>
 
ผลลัพธ์ที่ได้เมื่อเปิดไฟล์ img.php ผ่านบราวเซอร์
 
 

 
 
เราจะได้รูป qrcode ขนาด 200x200 สีแดง ดังรูปด้านบน
 
 

    การใช้งานรูปจาก url ไฟล์lสร้าง qrcode

    เราสามารถใช้งานรูปจากไฟล์ ที่ทำการ gen ไฟล์รูป qrcode โดยต้องเรียกใช้งานจากไฟล์รูปที่บันทึกไว้
สมมติเราต้องการสร้าง qrcode เสร็จแล้วนำมาแปะหรือมาซ้อนเข้าไปในรูปต้นฉบับที่เราต้องการ สามารถทำได้ดังนี้
 
ไฟล์ img.php
 
<?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');

// กำหนดข้อความที่ต้องการส่งค่าไปสร้าง qrcode
$text_qrcode = "http://www.ninenik.com";
$fullqrcode_url = "http://localhost/intervention/qrcode.php?val=".urlencode($text_qrcode);

$img_qr = $manager->make($fullqrcode_url)
->fit(100)
->resizeCanvas(null,120, 'top', false, '#880015')
->text('www.ninenik.com', 7, 113, function($font) {
    $font->file('fonts/THSarabun.ttf'); // ไฟล์ fonts ข้อความ
    $font->size(15); // ขนาด fonts หน่วย px ถ้าไม่กำหนดค่าเริ่มต้นเท่ากับ 12
    $font->color('#FFFFFF');
    $font->align('left');  // การจัดแนวนอน [ left, right center ] ค่าเริ่มต้น left
//    $font->valign('bottom'); // การจัดแนวตั้ง [ top bottom middle ] ค่าเริ่มต้น bottom
//    $font->angle(45); // การกำหนดมุมการหมุนของข้อความ
});

// แทรกรูป qrcode ไว้มุมล่างซ้ายของรูปหลัก ขยับแนว x,y จากขอบข้างละ 10 px
$img->insert($img_qr,'bottom-left',10,10);

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

 
 
 
สำหรับการใช้งานร่วมกับ Intervention Image นั้น จะใช้งานคล้ายๆ กับการปรับแต่งรูปปกติทั่วไป โดยเปลี่ยนจากรุปปกติ มาใช้
รูป qrcode ที่เราต้องการ ทั้งนี้ก็เพื่อนำมาใช้งานหรือปรับแต่งร่วมกับรูปอื่นๆ แนวทางการประยุกต์ ก็สมมติว่าเราต้องการแทรกรูป
qrcode ลงไปรูปสินค้าของทางร้านเรา หลายๆ รูปพร้อมกัน ก็สามารถใช้แนวทางข้างต้นได้เลย อ่านคำสั่งต่างๆ เกี่ยวกับ
การใช้งาน Intervention Image เพิ่มเติมได้ที่บทความ
    การใช้งาน คำสั่งต่างๆ ใน Intervention Image ปรับแต่งรูปภาพ ตอนที่ 2 http://niik.in/823 
    http://www.ninenik.com/content.php?arti_id=823 via @ninenik

 




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









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



Tags:: intervention image qrcode phpqrcode






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


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