<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to Create a QRCode using Google QRCode API</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="text-center">QRCode using Google QRCode API</h1>
<div class="row justify-content-center">
<div class="col-md-4">
<form >
<div class="mb-3">
<select class="form-select" id="sizex">
<option selected value="">QR Code Size</option>
<option value="150x150">150x150</option>
<option value="200x200">200x200</option>
<option value="250x250">250x250</option>
<option value="300x300">300x300</option>
</select>
</div>
<div class="mb-3">
<label for="text_code">Text to Convert to QRCode</label>
<input type="text" class="form-control" id="text_code" name="text_code">
</div>
<button type="button" class="btn btn-primary" onclick="genQRCode()">Generate QRCode</button>
</form>
</div>
<div class="col-md-4">
<div id = "qrcode"></div>
</div>
</div>
</div>
<script>
function genQRCode(){
const charx = document.querySelector("#text_code").value
const sizex = document.querySelector("#sizex").value
const imgx = "<img src='https://chart.googleapis.com/chart?chs="+sizex+"&cht=qr&chl="+charx+"&choe=UTF-8'>"
if(!charx || !sizex){
alert("NULL")
}else{
document.querySelector("#qrcode").innerHTML = imgx
}
}
</script>
</body>
</html>
QR Code จะถูกสร้างขึ้นเป็นรูปภาพ และมีรายละเอียดดังนี้:
<img src='https://chart.googleapis.com/chart?chs={size}&cht=qr&chl={xxxxxxx}&choe=UTF-8'>
cht = qr จำเป็น ระบุรหัส QR chs = ขนาดรูปภาพที่ต้องการ chl = จำเป็น ข้อมูลที่จะเข้ารหัส ข้อมูลสามารถเป็นตัวเลข (0-9) อักขระพยัญชนะผสมตัวเลข ไบนารีไบต์ของข้อมูล หรือคันจิ choe = ตัวเลือก วิธีเข้ารหัสข้อมูลในคิวอาร์โค้ด