สร้าง qrcode ง่ายๆ ด้วย javascript library และ jquery plugin

เขียนเมื่อ 5 ปีก่อน โดย Ninenik Narkdee
qrcodejs qrcode jquery.qrcode

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

ดูแล้ว 19,966 ครั้ง


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

 

QRCode.js

    สำหรับตัวแรกที่จะแนะนำ จะเป็น javascript library ที่เราสามารถนำไปใช้กับเว็บไซต์ หรือโปรเจ็ค
ต่างๆ ของเราได้ โดยไม่ต้องเรียกใช้ร่วมกับ library ตัวอื่น
    เข้าไปดาวน์โหลดมาใช้งานได้ที่ https://davidshimjs.github.io/qrcodejs/
 

การเรียกใช้งาน

    เพียง กำหนดการเรียกไฟล์ qrcode.js javascript มาใช้งาน ดาวน์โหลด
 
<script type="text/javascript" src="qrcode.min.js"></script>
 
จากนั้นเลือกรูปแบบว่า จะแสดงในรูปแบบไหน ซึ่งจะมีอยู่ด้วยกัน 2 แบบ คือเป็น 
    1.รูปภาพ pixels สร้างจาก canvas แล้วนำค่าไปแสดง ใน img แท็ก
    2.รูปภาพ vector ที่แสดงใน svg แท็ก
 
ตัวอย่างโค้ด การใช้งานแบบที่ 1
 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title>Document</title> 
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css" >
    <script type="text/javascript" src="qrcode.js"></script>
</head>
<body>
 
 <br />
<br />
 <div style="width:500px;margin:auto;">
	<div id="qrcode"></div>
 </div>
 
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "https://www.ninenik.com");
</script>
</body>
</html>
 
ส่วนที่เราต้องการแสดง qrcode ในที่นี้คือ
 
<div id="qrcode"></div>
 
การเรียกใช้งาน โดยกำหนดแค่ค่าพื้นฐาน ข้อความที่จะสร้าง และ object element ที่จะ
นำ qrcode ไปแสดง ก็จะใช้รูปแบบ
 
<script type="text/javascript">
new QRCode("object element ที่จะแสดง qrcode", "ข้อความที่ต้องการแปลงเป็น qrcode");
</script>
 
เมื่อคำสั่งถูกเรียกใช้งาน ตามโค้ดตัวอย่างเบื้องต้นด้านบน
    จะมีการสร้าง canvas element เพื่อใช้ในการสร้างรูปกราฟิคข้อมูลของ qrcode ไว้ใน <div>
พร้อมกับสร้าง img element สำหรับนำข้อมูลจาก canvas มาใช้แสดง 
 
นี้คือ html code บางส่วนเมื่อมีการสร้าง qrcode
 
 

 
 
จากรูปผลลัพธ์ตัวอย่าง จะเห็นว่า มีการแทรกทั้ง canvas และ img เข้าไปใน div โดยตัว canvas จะใช้
สำหรับสร้างข้อมูลของรูป qrcode เสร็จแล้วจะทำการซ่อนไว้ เมื่อได้ข้อมูลของ qrcode ก็นำค่าไปใช้
แสดงใน img ผ่าน src attribute จะสังเกตว่า เป็นข้อมูลรูปที่เข้ารหัส base64 ตามโค้ด
src="data:image/png;base64........
 
หากไม่มีการกำหนด option เพิ่มเติม เช่น ความกว้าง ความสูง สีของ bar สีของพื้นหลัง เหล่านี้เป็นต้น
ค่าต่างๆ จะเป็นไปตามด้านล่างนี้
 
this._htOption = {
    width : 256, // กว้าง
    height : 256, // สูง
    typeNumber : 4, // จำนวนกำหนด byte ข้อมูลที่รองรับ 1 - 40
    colorDark : "#000000", // สี qrcode ดำ
    colorLight : "#ffffff", // สีพื้นหลัง ขาว
    correctLevel : QRErrorCorrectLevel.H // ค่า Error Correction ของ QRcode มี L M Q H
};
 
สำหรับ 
correctLevel ดูเพิ่มเติมที่บทความ http://niik.in/825
typeNumber ดูเพิ่มเติม https://kazuhikoarase.github.io/qrcode-generator/js/demo/
 
ตัวอย่างการเรียกใช้ กรณีกำหนด option เพิ่มเติม อย่างเช่น correctLevel ซึ่งหากใช้สำหรับเว็บไซต์
หรือในสือออนไลน์ จะนิยมกำหนดเป็น L หรือ M  สมมติว่า เราจะกำหนด กว้าง สูง อย่างละ 100
สี qrcode เป็นสีส้ม สีพื้นหลังเป็นสีเหลือง curectLevel เป็น ระดับ M จะได้เป็นดังนี้
 
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"),{
		text: "https://www.ninenik.com",
		width: 100,
		height: 100,
		colorDark : "#FF5722",
		colorLight : "#FFEB3B",
		correctLevel : QRCode.CorrectLevel.M		
		});
</script>
 

ผลลัพธ์

 
 
เราสามารถกำหนด option บางค่า ที่ต้องการก็ได้ เช่นใช้สีเดิม เปลี่ยนแค่ขนาด และ currectLevel 
ก็จะได้เป็น
 
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"),{
		text: "https://www.ninenik.com",
		width: 100,
		height: 100,
		correctLevel : QRCode.CorrectLevel.M		
		});
</script>
 
กรณีต้องการนำไปประยุกต์เพิ่มเติม เราสามารถสร้างตัวแปร เพื่อเป็นตัวอ้างอิง qrcode แล้ว สามารถใช้คำสั่ง
clean() และ makeCode() ได้
 
ตัวอย่างเช่น เรามี input text ให้กรอกข้อความ ที่ต้องการสร้างเป็น qrcode มีเปลี่ยนข้อความ หรือเมื่อกด
enter ก็จะทำการ สร้าง qrcode จากค่าที่ส่งมา 
 
 <div style="width:500px;margin:auto;">
 	<input id="mytext" type="text" onBlur="make_qrcode(this.value)"
    onKeypress="(event.keyCode==13)?make_qrcode(this.value):null" value="" 
    style="width:200px;" /><br />
	<div id="qrcode" style="margin-top:10px;"></div>
 </div>
 
<script type="text/javascript" src="qrcode.js"></script>
<script type="text/javascript">
// สร้าง qrcode เริ่มต้น เป็น https://www.ninenik.com
var qrcodeObj = new QRCode(document.getElementById("qrcode"),{
		text: "https://www.ninenik.com",
		width: 100,
		height: 100,
		correctLevel : QRCode.CorrectLevel.M		
});
function make_qrcode(textValue){
	if(textValue!=""){
		qrcodeObj.clear(); // ล้างค่าเดิม
		qrcodeObj.makeCode(textValue); // สร้างจากข้อความใหม่ที่ส่งมา
	}
}
</script>
 
การใช้งานแบบที่ 2
    จะเป็นการสร้างรูป qrcode แบบ vector ที่เมื่อย่อหรือขยายขนาดแล้ว รูปภาพจะมีการคำนวณค่าใหม่
และสร้างรูปที่มีความคมชัดไม่แตก เหมือนภาพแบบ pixels 
 
<div style="width:500px;margin:auto;">
 	<input id="mytext" type="text" onBlur="make_qrcode(this.value)"
    onKeypress="(event.keyCode==13)?make_qrcode(this.value):null" value="" 
    style="width:200px;" /><br />
	<svg style="width:100px; height:100px; margin-top:10px;">
    	<g id="qrcode"/>
    </svg>
 </div>
 
<script type="text/javascript" src="qrcode.js"></script>
<script type="text/javascript">
// สร้าง qrcode เริ่มต้น เป็น https://www.ninenik.com
var qrcodeObj = new QRCode(document.getElementById("qrcode"),{
		text: "https://www.ninenik.com",
		width: 100,
		height: 100,
		correctLevel : QRCode.CorrectLevel.M,
		useSVG: true		// เพิ่มการใช้งานแบบ vector 
});
function make_qrcode(textValue){
	if(textValue!=""){
		qrcodeObj.clear(); // ล้างค่าเดิม
		qrcodeObj.makeCode(textValue); // สร้างจากข้อความใหม่ที่ส่งมา
	}
}
</script>
 
จะเห็นว่าเราแทน div ด้วย svg element และบรรทัดที่ 18 เราเพิ่มการใช้งานแบบ SVG หรือแสดงรูปภาพ
แบบ vector ให้เป็น true  เปรียบความคมชัดของรูปด้านล่าง จะเห็นว่าฝั่งซ้าย เมื่อขยายขนาด รูปจะ
มีลักษณะเบลอ ไม่คมชัดเท่ารูปด้านขวา ที่เป็นรูปแบบ vector
 
 

ดูตัวอย่างที่ DEMO 1 และ DEMO 2

 

 

jquery.qrcode.js

    สำหรับตัวที่สองที่จะแนะนำ จะเป็น jquery plugin ซึ่งจะสะดวกในการเรียกใช้งานร่วมกับ
jquery เข้าไปดาวน์โหลดมาใช้งานได้ที่ *ยังไม่รองรับภาษาไทย 
 

การเรียกใช้งาน

    เพียง กำหนดการเรียกไฟล์ jquery.qrcode.js มาใช้งาน โดยเราต้องใช้งานร่วมกับ jquery เสมอ
 
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
 

ตัวอย่างโค้ดการเรียกใช้งานเบื้องต้น

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title>Document</title> 
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css" >
	<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.qrcode.min.js"></script>
</head>
<body>
 
 <br />
<br />
 <div style="width:500px;margin:auto;">
	<div id="qrcode"></div>
 </div>
 
<script type="text/javascript">
$(function(){
	$("#qrcode").qrcode("https://www.ninenik.com");
});
</script>
</body>
</html>
 
เมื่อคำสั่งถูกเรียกใช้งาน ตามโค้ดตัวอย่างเบื้องต้นด้านบน
    จะมีการสร้าง canvas element เพื่อใช้ในการสร้างรูปกราฟิคข้อมูลของ qrcode ไว้ใน <div>
 
นี้คือ html code บางส่วนเมื่อมีการสร้าง qrcode
 
 


 
 
ในการเรียกใช้งาน หากไม่มีการกำหนด option เพิ่มเติม เช่น ความกว้าง ความสูง สีของ bar สีของพื้นหลัง 
เหล่านี้เป็นต้น ค่าเริ่มต้น ต่างๆ จะเป็นไปตามด้านล่างนี้
 
render		: "canvas",
width		: 256,
height		: 256,
typeNumber	: -1, // ปกติเป็น 1 - 40 ให้เท่ากับ -1 เพื่อใช้การคำนวณแทนกำหนดค่า
correctLevel	: 2, // L : 1,M : 0, Q : 3, H : 2
background      : "#ffffff",
foreground      : "#000000"
 
ในกรณีข้างต้น จะเห็นว่า ค่า render เริ่มต้นจะอยู่ในรูปแบบการใช้งาน canvas สร้างรูปกราฟิคแบบ pixels
ของ qrcode ส่วนอีกรูแบบที่รองรับคือ table ซึ่งเราสามารถกำหนดเป็นดังนี้
 
 <div style="width:500px;margin:auto;">
	<div id="qrcode"></div>
 </div>
 
<script type="text/javascript">
$(function(){
	$("#qrcode").qrcode({
		text:"https://www.ninenik.com",
		render:"table",
		width:100,
		height:100,
		correctLevel:0
	});
});
</script>
 
สังเกตผลลัพธ์ที่สร้าง qrcode จาก table แท็กจะเป็นดังรูป
 
 


 
 
เราสามารถปรับโค้ด เพื่อรองรับการประยุกต์เพิ่มเติม ได้ดังนี้ 
 
 <div style="width:500px;margin:auto;">
 	<input id="mytext" type="text" style="width:200px;" /><br />
	<div id="qrcode" style="margin-top:10px;"></div>
 </div>
 
<script type="text/javascript">
$(function(){
	// กำหนดการตั้งค่ารูปแบบ qrcode ที่ต้องการเรียกใช้
	var qrcodeConfig = {
		width:100,
		height:100,
		correctLevel	:0		
	}
	// สมมติค่าเริ่มเต้น ที่ตอ้งการแสดงเป็น qrcode
	$("#qrcode").qrcode($.extend(qrcodeConfig,{
		text:"https://www.ninenik.com"
	}));
	// เมื่อมีการเปลี่ยนแปลงค่าใน input text และเกิด blur หรือ keypress event
	$("#mytext").on("keypress blur",function(e){
		if(e.type=='keypress' && e.keyCode==13){ // ถ้ามีการกรอกข้อมูลใหม่ และกด Enter
			$("#qrcode").html("") // ล้างค่า qrcode
			.qrcode($.extend(qrcodeConfig,{
				text:$(this).val()
			}));		
		}else if(e.type=='blur'){ // ถ้ามีการกรอกข้อมูล แล้ว โฟกัสออกจาก input text
			$("#qrcode").html("") // ล้างค่า qrcode
			.qrcode($.extend(qrcodeConfig,{
				text:$(this).val()
			}));					
		}	
	});
});
</script>
 

ดูตัวอย่างได้ที่ DEMO 3

 
 
หวังว่าเนื้อหานี้ จะเป็นแนวทาง ในการนำไปประยุกต์ใช้งานต่อไป






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







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









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





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

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


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


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







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