สร้าง qrcode ด้วย php endroid qrcode อัพเดทปี 2020

บทความใหม่ ปีนี้ โดย Ninenik Narkdee
qrcode php endroid qrcode

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



เราได้เคยอธิบายเนื้อหาเกี่ยวกับการใช้งาน PHP QRcode Library ไปแล้ว
ซึ่งเป็น library ที่ใช้สำหรับสร้างรูป qrcode ทบทวนได้ที่
    สร้าง qrcode จากฐานข้อมูลอย่างง่ายด้วย phpqrcode http://niik.in/581
    การใช้งาน PHP QRcode Library และประยุกต์ ร่วมกับ Intervention Image http://niik.in/825 
 
ซึ่งเนื้อหาข้างต้น เป็นเนื้อหาเก่า แต่ก็ยังสามารถใช้งานได้ อย่างไรก็ตาม เป็นไปได้เราควร
ใช้โค้ดหรือสคริปใหม่ๆ เพื่อให้รองรับการใช้งานในอนาคต
    ในครั้งนี้เราก็จะมาแนะนำการใช้งาน endroid qrcode เป็นตัวที่สามารถแทนการใช้งาน 
PHP QRcode Library ได้ มีรูปแบบการใช้งานที่หลากหลาย ปรับแต่งง่ายขึ้น ตามขั้นตอน
การใช้งานดังต่อไปนี้
 
 

การติดตั้ง endroid qrcode Library

    ติดตั้งผ่าน composer ด้วยคำสั่ง
 
composer require endroid/qr-code
 
 

การใช้งาน endroid qrcode

    หลังจากทำการติดตั้งเรียบร้อยแล้ว ให้เราสร้างไฟล์ gen_qrcode.php โดยมีรูปแบบการใช้งาน
เบื้องต้นอย่างง่ายดังนี้
 

    ไฟล์ gen_qrcode.php

<?php
// โค้ดไฟล์ dbconnect.php ดูได้ที่ http://niik.in/que_2398_5642
// require_once("../dbconnect.php"); // กำหนด path ให้ถูกต้อง

// include composer autoload
// require_once '../vendor/autoload.php';  // กำหนด path ให้ถูกต้อง
?>
<?php
// เรียกใช้งาน class ที่เกี่ยวข้อง
use Endroid\QrCode\ErrorCorrectionLevel;
use Endroid\QrCode\LabelAlignment;
use Endroid\QrCode\QrCode;
use Endroid\QrCode\Response\QrCodeResponse;

// กำหนดข้อคาม ค่า หรือข้อมูลที่ต้องการแสดงใน qrcode
$qrCode = new QrCode('ข้อความภาษาไทย');
$qrCode->setSize(100); // กำหนดขนาดตามต้องการ หน่วย pixel ถ้าไม่กำหนดค่าเริ่มต้นเท่ากับ 300

// ส่งออกข้อมูลไฟล์เป็นรูปภาพ
header('Content-Type: '.$qrCode->getContentType());
echo $qrCode->writeString();
?>
    ไฟล์ gen_qrcode.php ข้างต้น จะทำการสร้างรูปภาพที่เป็น qrcode แล้วส่งออกหรือแสดงเป็นข้อมูลไฟล๋รูป เวลา
นำไปใช้ เราก็แค่เรียกมายังไฟล์ ผ่าน <img> แท็ก  ในไฟล์ที่ต้องการ ดังนี้
 
<img src="gen_qrcode.php" alt="">
    เราสามารถประยุกต์ให้รองรับการกำหนดขนาดผ่าน url โดยการส่งตัวแปร size เข้ามา แล้วใช้เป็นเงื่อนไขในการ
กำหนดขนาดในตัวโปรแกรม เป็นดังนี้
 
// กำหนดข้อคาม ค่า หรือข้อมูลที่ต้องการแสดงใน qrcode
$qrCode = new QrCode('ข้อความภาษาไทย');
if(isset($_GET['size']) && (int)$_GET['size']>0){
	$qrCode->setSize((int)$_GET['size']); // ใช้ค่า size จากตัวแปรที่ส่งเข้ามา
}else{
	$qrCode->setSize(200); // กำหนดขนาดตามต้องการ ถ้าไม่มีการส่งค่า size เข้ามา หรือไม่เข้าเงื่อนไข
}
    เวลาเรียกใช้ และมีการส่งค่าตัวแปร size เข้ามา ก็จะเป็น 
 
<img src="gen_qrcode.php?size=150" alt="">
 
 

การบันทึกข้อมูล qrcode เป็นไฟล์รูปภาพ

    นอกจากการเรียกใช้งานผ่าน <img> แท็กโดยตรงแล้ว เรายังสามารถที่จะบันทึกข้อมูลรูปภาพ qrcode เป็นไฟล์รุปภาพ
ไว้ใช้งานต่อได้โดยใช้รูปแบบคำสั่ง จากเดิม
 
// ส่งออกข้อมูลไฟล์เป็นรูปภาพ
header('Content-Type: '.$qrCode->getContentType());
echo $qrCode->writeString();
    เปลี่ยนเป้น
 
// บันทึกเป็นไฟล์รูป
// กำหนดชื่อไฟล์ และ path ตามต้องการ อย่าลืมเรื่อง permission การเขียนไฟล์ หากเก็บไฟล์ไว้ใน Folder
$qrCode->writeFile('qrcode.png'); // หรือไว้ในโฟลเดอร์ 'qrcode_picture/qrcode.png'
    หากต้องการเป็นข้อมูลรูปภาพ ไปใช้งานต่อ โดยที่ยังไม่ต้องบันทึก ก็สามารถสร้างเป็นข้อมูลรูปภาพในรูปแบบ dataURI
ซึ่งเป็นลักษณะข้อมูลรูปภาพ ที่ส่งผ่าน url ได้ หรือจะเรียกว่าเป็น string ข้อมูลก็ได้ โดยจะอยู่ในรูปแบบ
 
data:image/png;base64,iVBORw0KGgoAAA......
 
    ข้อมูลนี้เราสามารถนำไปแสดงในแท็ก <img> ได้ หรือจะนำไปใช้ร่วมกับ library จัดการรูปภาพอื่นๆ เพื่อปรับแต่งรูปเพิ่ม
เติมก็ได้เหมือนกัน เช่นในบทความด้านล่าง
    แนวทาง การใช้งาน Intervention Image ปรับแต่งรูปภาพใน PHP ตอนที่ 1 http://niik.in/822 
 
    ใน endroid qrcode เราสร้าง data URI ด้วยคำสั่งนี้
 
// สร้างข้อมูล data URI เพื่อใช้งานต่อ
$dataUri = $qrCode->writeDataUri();
    ตัวอย่างการประยุกต์ใช้งาน เช่น เราสร้างเป็นฟังก์ชั่น ดังนี้
 

    ไฟล์ test_qrcode.php

<?php
// โค้ดไฟล์ dbconnect.php ดูได้ที่ http://niik.in/que_2398_5642
 require_once("../dbconnect.php"); // กำหนด path ให้ถูกต้อง

// include composer autoload
require_once '../vendor/autoload.php'; // กำหนด path ให้ถูกต้อง
?>
<?php
// เรียกใช้งาน class ที่เกี่ยวข้อง
use Endroid\QrCode\ErrorCorrectionLevel;
use Endroid\QrCode\LabelAlignment;
use Endroid\QrCode\QrCode;
use Endroid\QrCode\Response\QrCodeResponse;
?>
<?php
// กำหนดฟังก์ชั่น สร้างและคืนค่า datauri ของ qrcode
function gen_qrcodedatauri($str,$size=200){
	// กำหนดข้อคาม ค่า หรือข้อมูลที่ต้องการแสดงใน qrcode
	$qrCode = new QrCode($str);
	if(isset($size) && (int)$size>0){
		$qrCode->setSize((int)$size); // ใช้ค่า size จากตัวแปรที่ส่งเข้ามา
	}else{
		$qrCode->setSize($size); // กำหนดขนาดตามต้องการ ถ้าไม่มีการส่งค่า size เข้ามา หรือไม่เข้าเงื่อนไข
	}
	$dataUri = $qrCode->writeDataUri();	
	return $dataUri;
}
?>
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
    <title>Document</title>
  </head>
<body>

	<?php
	// เรียกใช้ฟังก์ชั่นสร้างข้อมูล qrcode และคืนค่าเป็น dataurl
	$datauri = gen_qrcodedatauri("ข้อความทดสอบ",150);
	// ในที่นี้สมมตินำค่ามาแสดง
	?>
	<img src="<?=$datauri?>" alt="">
	
</body>
</html>
 
 

การตั้งค่าเพิ่มเติมใน endroid qrcode

    นอกจากรูปแบบการใช้งานพื้นฐานข้างต้นแล้ว เรายังสามารถปรับแต่งค่าต่างๆ เพิ่มเติม ตามความเหมาะสมได้ เช่น
การกำหนด Encoding หรือรูปแบบการเข้ารหัส ซึ่งปกติเราจะใช้เป็น UTF-8 แต่ในบางครั้ง ก็อาจจะจำเป็นต้องใช้เป็น 
ISO-8859-1 ซึ่งเป็นค่าเริ่มต้นของเครื่องสแกนบาร์โค้ดรองรับ ยังไงก็ตามขึ้นอยู่กับการนำไปใช้งาน และการทดสอบ
ว่าเราควรใช้เป็นรูปแบบใด ในที่นี้คงรูปแบบ UTF-8 เป็นหลัก 
 

    ค่า Encoding ที่รองรับ

ISO-8859-1, ISO-8859-2, ISO-8859-3, ISO-8859-4, ISO-8859-5, ISO-8859-6, 
ISO-8859-7, ISO-8859-8, ISO-8859-9, ISO-8859-10, ISO-8859-11, ISO-8859-12, 
ISO-8859-13, ISO-8859-14, ISO-8859-15, ISO-8859-16, Shift_JIS, windows-1250, 
windows-1251, windows-1252, windows-1256, UTF-16BE, UTF-8, US-ASCII, GBK EUC-KR
 

    การกำหนด Encoding 

    ใช้รูปแบบคำสั่ง
 
$qrCode->setEncoding('UTF-8');
 

    การกำหนดประเภทของไฟล์

    ใช้รูปแบบคำสั่ง
    
$qrCode->setWriterByName('png'); // เช่น png หรือ svg
 
    ถ้าเรากำหนดเป็น svg จะได้ภาพในรุูปแบบ vector เมื่อขยายภาพจะไม่แตก เหมาะสำหรับสร้างแล้วแสดงรูป qrcode ในทันที 
เพราะจะได้ภาพที่คมชัด โดยรูปแบบ svg ที่ส่งกลับมาจะเป็นชนิดไฟล์ข้อมูลแบบ svg+xml ซึ่งแสดงใน <img> แท็กได้ปกติ
เหมือนไฟล์รูปอื่นๆ 
    การตั้งค่าส่วนนี้ ถ้าไม่มีการกำหนดค่า ค่าเริ่มต้นจะต้องเป็น png ไฟล์ ข้อดีคือทำงานได้เร็ว และสามารถนำไปใช้ต่อ เช่นการ
ไปปรับแต่งเพิ่มเติมจาก library อื่นๆ ต่อได้

 

   การกำหนดค่า Error Correction 

    ใช้รูปแบบคำสั่ง
 
$qrCode->setErrorCorrectionLevel(ErrorCorrectionLevel::HIGH()); // LOW | MEDIUM | QUARTILE | HIGH
 
ค่า 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

    ใช้รูปแบบคำสั่ง
 
$qrCode->setForegroundColor(['r' => 0, 'g' => 0, 'b' => 0, 'a' => 0]); // สี qrcode
$qrCode->setBackgroundColor(['r' => 255, 'g' => 255, 'b' => 255, 'a' => 0]); // สีพื้นหลัง
    การกำหนดสี สามารถทำได้ทั้งสีของตัว qrcode และสีพื้นหลัง โดยกำหนดในรูปแบบ array ของค่าสีแบบ RGBA
ซึ่งดูแล้วอาจจะไม่คุ้นสำหรับคนที่ใช้แบบ string ในรูปแบบ hex หรือ hexa ดังนั้นเราสามารถสร้างฟังก์ชั่นแปลงค่าจาก
hexa เป็น ค่า array RGBA สำหรับใช้งานได้ดังนี้
 
$qrCode->setForegroundColor(hex2rgb('#00B050'));
$qrCode->setBackgroundColor(hex2rgb('#7df0664a'));

function hex2rgb( $colour ) {
        if ( $colour[0] == '#' ) {
                $colour = substr( $colour, 1 );
        }
        if ( strlen( $colour ) == 8 ) {
                list( $r, $g, $b, $a ) = array( $colour[0] . $colour[1], $colour[2] . $colour[3], $colour[4] . $colour[5], $colour[6] . $colour[7]  );	
        } elseif ( strlen( $colour ) == 6 ) {
                list( $r, $g, $b, $a ) = array( $colour[0] . $colour[1], $colour[2] . $colour[3], $colour[4] . $colour[5] , "00" );
        } elseif ( strlen( $colour ) == 4 ) {
                list( $r, $g, $b, $a ) = array( $colour[0] . $colour[0], $colour[1] . $colour[1], $colour[2] . $colour[2], $colour[3] . $colour[3] );			
        } elseif ( strlen( $colour ) == 3 ) {
                list( $r, $g, $b, $a ) = array( $colour[0] . $colour[0], $colour[1] . $colour[1], $colour[2] . $colour[2], "00" );
        } else {
                return false;
        }
        $r = hexdec( $r );
        $g = hexdec( $g );
        $b = hexdec( $b );
		$b = hexdec( $a );
        return array( 'r' => $r, 'g' => $g, 'b' => $b, 'a' => $a );
}
 
    
 
 
    ฟังก์ชั่น hex2rgb รองรับการกำหนดค่าสีแบบ 3 ตัว 4 ตัว 6 ตัวและ แบบเต็ม 8 ตัว ทำให้เราสามารถกำหนดค่าสีได้ง่ายและสะดวกขึ้น
 

 

    การกำหนดโลโก้ หรือรูปภาพใน qrcode

    ใช้รูปแบบคำสั่ง
 
$qrCode->setLogoPath('logo.png'); // กำหนด path ไฟล์ของรูปภาพ
$qrCode->setLogoSize(50, 50); // กำหนดขนาดของรูปที่จะใช้ กว้าง x สูง
 

 
 
    เราสามารถกำหนดรูปภาพโลโก้แทรกเข้าไปใน qrcode ได้ เช่น อาจจะสำหรับระบุตัวต้น มีภาพ avatar หรือรูปของผู้ใช้งานแทรก
อยู่ใน qrcode หรืออาจจะมีรูปโลโก้ของบริษัทแทรกอยู่ก็ได้ ซึ่งการกำหนดขนาดของโลโก้ จะต้องสัมพันธ์กับขนาดของ qrcode ด้าย
โดยรูปโลโก้จะแสดงตรงกลางของ qrcode การกำหนดขนาดที่ใหญ่เกินไป ก็จะทำให้ไปบดบังส่วนของ qrcode ข้อมูลได้ ให้ปรับตาม
ความเหมาะสม
    เราสามารถใช้การตรวจสอบข้อมูล qrcode ว่าสามารถอ่านค่า หรือสแกนค่าได้หรือไม่ด้วยคำสั่ง
 
$qrCode->setValidateResult(true); // ค่าเริ่มต้นจะเป็น false
    ตัวอย่างเช่น ใช้ร่วมกับการแทรกรูปโลโก้ สมมติเช่น qrcode เรามีขนาด 200 แต่เรากำหนดโลโก้เป็น 150 ดังนี้
 
$qrCode->setLogoPath('logo.png'); // กำหนด path ไฟล์ของรูปภาพ
$qrCode->setLogoSize(150, 150); // กำหนดขนาดของรูปที่จะใช้ กว้าง x สูง
$qrCode->setValidateResult(false); // หากเราไม่ตรวจสอบ หรือกำหนดเป็น false ตามนี้
    หากเราไม่ตรวจสอบหรือกำหนดเป็น false ตามโค้ดข้างต้น รูป qrcode ก็จะแสดงปกติ แต่ตัวโลโก้ก็จะบังส่วนของ qrcode
ทำให้ไม่สามารถสแกนอ่านค่าได้ แต่ถ้าเราเปลี่ยนเป็น true
 
$qrCode->setLogoPath('logo.png'); // กำหนด path ไฟล์ของรูปภาพ
$qrCode->setLogoSize(150, 150); // กำหนดขนาดของรูปที่จะใช้ กว้าง x สูง
$qrCode->setValidateResult(true); // ถ้าไม่สามารถสแกนอ่านค่าได้ รูปก็จะไม่แสดง
    กรณีกำหนดเป็น true รูป qrcode จะไม่แสดงเพราะมีการตรวจสอบการอ่านค่าของ qrcode และพบว่า ไม่สามารถอ่านค่าได้
เพราะรูปโลโก้ใหญ่เกินไป เราสามารถนำเงื่อนไขการตรวจสอบนี้ไปประยุกต์ใช้งานเพิ่มเติมได้
 
 

    การแทรกข้อความหรือป้ายกำกับ

    ใช้รูปแบบคำสั่ง
 
$qrCode->setLabel('สแกนที่นี่', 16, 'fonts/Anuphan/Anuphan-Medium.otf', LabelAlignment::LEFT());

 
 
    ใช้ได้เฉพาะกรณีเป็นรูป png เท่านั้น หากกำหนดเป็น svg จะไม่สามารถใช้งานการกำหนดค่าส่วนนี้ได้
รูปแบบการกำหนดก็จะมี ข้อความที่ต้องการแสดง ขนาดตัวอักษร path ไฟล์ของฟอนท์ที่จะใช้งาน ตำแหน่งการจัดเรียง
โดยตัว label นี้จะแสดงอยู่ด้านล่างของรูป qrcode เราสามารถกำหนดตำแหน่ง LEFT() CENTER() หรือ RIGHT() ได้ตามต้องการ
เราสามารถใช้ฟอนท์ที่ต้องการได้ ถ้าสนใจฟอนท์ภาษาไทยจาก google ดาวน์โหลดจากนี้ไปใช้ได้ 
    ดาวน์โหลด Google Thai Fonts ไฟล์
 
    การเขียนข้อความกำกับด้านล่างของ qrcode จะรองรับแค่บรรทัดเดียวเท่านั้น โดยตำแหน่งจะชิดขอบบนของ qrcode หรือมีค่า
margin ต่างดังนี้เป็นค่าเริ่มต้น ['t' => 0,'r' => 10,'b' => 10, 'l' => 10] ซึ่งได้แก่ค่า top right bottom และ left ตามลำดับ
    เราสามารถกำหนดค่าเหล่านี้เพิ่มเติมได้ โดยเพิ่มไปเป้น argument ตัวสุดท้าย เช่น สมมมิเราอยากให้ ห่างจากขอบด้านล่างของ
ไฟล์รูปเป็น 20 ก็แทรกไปเป้นดังนี้
 
$qrCode->setLabel('สแกนที่นี่', 16, 'fonts/Anuphan/Anuphan-Medium.otf', LabelAlignment::LEFT(),['b'=>20]);
    อย่างไรก็ตามค่าเริ่มต้นถือว่าเป็นค่าที่เหมาะสมแล้ว ไม่จำเป็นต้องปรับเพิ่มเติมก็ได้
 
 

    การกำหนดค่า margin

    ใช้รูปแบบคำสั่ง
 
$qrCode->setRoundBlockSize(true);
$qrCode->setMargin(10); // หากไม่กำหนดค่าเริ่มต้นส่วนนี้จะเป็น 10
    ขนาด margin หรือระยะห่างระหว่าง qrcode กับขอบซึ่งจะเกิดเป็นช่องว่างสีขาว คล้ายๆ กรอบคลุมตัว qrcode อีกที ค่านี้จะช่วย
ให้สามารถสแกนหรืออ่านค่า qrcode ได้ง่ายขึ้น ซึ่งค่า 10 px ถือว่าเหมาะสมแล้ว หรือหากเราต้องการเพิ่มขนาดก็สามารถกำหนด
ได้ตามโค้ดข้างต้น ตามต้องการ
 
    เท่านี้เราก็สามารถสร้าง qrcode ได้ในรูปแบบที่หลากหลาย และประยุกต์เพิ่มเติมได้ง่าย สามารถนำมาใช้งานแทน PHP qrcode
library ตัวเดิมได้เป็นอย่างดี


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







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









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











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