เนื้อหาต่อไปนี้ จะแนะนำ PHP QRcode ซึ่งป็น PHP Library ที่ใช้ในการสร้าง QRcode โดยเป็นตัวที่มีการปรับปรุง
มาจากตัวเดิม ที่เคยแนะนำไปแล้วในบทความ
สร้าง qrcode จากฐานข้อมูลอย่างง่ายด้วย phpqrcode http://niik.in/581
https://www.ninenik.com/content.php?arti_id=581 via @ninenik
เราจะติดตั้ง package มาใช้งานผ่าน composer และเนื่องจากว่าเราจะนำมาประยุกต์กับ การใช้งาน Intervention Image
จึงขอยกตัวอย่างมารวมไว้ใน PHP Project ทดสอบเดียวกันกับบทความด้านล่างนี้
แนวทาง การใช้งาน Intervention Image ปรับแต่งรูปภาพใน PHP ตอนที่ 1 http://niik.in/822
https://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 // ข้อควม https://www.ninenik.com // บันทึกเป็นไฟล์ ชื่อ myqrcode.png ไว้ในโฟลเดอร์ images / picqrcode / myqrcode.png // กำหนด Error Correction ของ QRcode เท่ากับ L (มีค่า L,M,Q และ H) // กำหนด ขนาด pixel เท่ากับ 4 // กำหนดความหนาของกรอบ เท่ากับ 2 \PHPQRCode\QRcode::png("https://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 = "https://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