Nếu bạn biết JavaScript cơ bản, bạn có thể dễ dàng tạo Javascript tạo mã QR đơn giản. Sau đây tôi sẽ hướng dẫn bạn một cách đơn giản để tạo mã QR sử dụng thư viện QRcode js
Mã QR là gì?
Mã QR là một loại mã vạch ma trận hiện đang được sử dụng trong hầu hết các sản phẩm và thanh toán kỹ thuật số. Trên thực tế, đó là một nhãn quang học có thể đọc được bằng máy có chứa một số thông tin đặc biệt về sản phẩm.
Trình tạo mã QR JavaScript là gì?
Có rất nhiều ví dụ về QRcode js trên internet. Nhưng ở đây tôi đã chia sẻ hướng dẫn đầy đủ và cố gắng giải thích cho bạn từng bước cách tạo trình tạo mã QR bằng JavaScript .
Trình tạo mã QR bằng JavaScript này đã được tạo theo một cách rất đơn giản. Tại đây, bạn có thể tạo mã vạch ma trận của bất kỳ văn bản hoặc liên kết nào.
Nhiều người nghĩ rằng rất khó để tạo ra loại trình tạo mã QR javascript thuần túy này. Trên thực tế, nó không phải là quá khó. Bạn có thể dễ dàng tạo nếu bạn biết cơ bản bản HTML, CSS và javascript.
Cách tạo trình tạo mã QR trong JavaScript
Để có thể có mã QR thì đầu tiên ta cần nhập dữ liệu, do đó ta dùng HTML và CSS để tạo một form nhập liệu cùng hiển thị mã QR sau khi tạo được. Sau đó dùng javascript và thư viện QRcode js để tạo mã QR.
Sau đây là các bước chi tiết để tạo trình tạo mã QR
Bước 1: Mã HTML
Sử dụng mã HTML sau để tạo khung nhập liệu và hiển thị mã QR
Ví dụ
<div class="form">
<h1>QR Code Generator</h1>
<form>
<!-- nhập dữ liệu -->
<input type="url" id="website" name="website" placeholder="https://vzn.vn" required />
<!-- Hiển thị mã QR -->
<div id="qrcode-container">
<div id="qrcode" class="qrcode"></div>
</div>
<!-- nút bấm thực hiện tạo mã QR -->
<button type="button" onclick="generateQRCode()">Generate QR Code</button>
</form>
</div>Bước 2: Mã CSS
Ví dụ
body{
background: rgb(200, 220, 224);
}
.form {
font-family: Helvetica, sans-serif;
max-width: 400px;
margin: 100px auto;
text-align: center;
padding: 16px;
background: #ffffff;
}
.form h1 {
background: #03773f;
padding: 20px 0;
font-weight: 300;
text-align: center;
color: #fff;
margin: -16px -16px 16px -16px;
font-size: 25px;
}
.form input[type="text"],
.form input[type="url"] {
box-sizing: border-box;
width: 100%;
background: #fff;
margin-bottom: 4%;
border: 1px solid #ccc;
padding: 4%;
font-size: 17px;
color: rgb(9, 61, 125);
}
.form input[type="text"]:focus,
.form input[type="url"]:focus {
box-shadow: 0 0 5px #5868bf;
padding: 4%;
border: 1px solid #5868bf;
}
.form button {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 180px;
margin: 0 auto;
padding: 3%;
background: #0853b6;
border: none;
border-radius: 3px;
font-size: 17px;
border-top-style: none;
border-right-style: none;
border-left-style: none;
color: #fff;
cursor: pointer;
}
.form button:hover {
background: rgba(88,104,191, 0.5);
}
#qrcode-container{
display:none;
}
.qrcode{
padding: 16px;
margin-bottom: 30px;
}
.qrcode img{
margin: 0 auto;
box-shadow: 0 0 10px rgba(67, 67, 68, 0.25);
padding: 4px;
}Bước 3: Mã JS để tạo mã QR
Chèn tệp tin js sau vào trước thẻ </header>
Ví dụ
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>Thêm mã JS sau trước thẻ </body>
Ví dụ
<script type="text/javascript">
function generateQRCode() {
let website = document.getElementById("website").value;
if (website) {
let qrcodeContainer = document.getElementById("qrcode");
qrcodeContainer.innerHTML = "";
new QRCode(qrcodeContainer, website);
document.getElementById("qrcode-container").style.display = "block";
} else {
alert("Please enter a valid URL");
}
}
</script>Code mẫu đầy đủ của trình tạo mã QR bằng Javascript
Đây là mã đầy đủ của hướng dẫn trên
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trình tạo mã </title>
<style>
body{
background: rgb(200, 220, 224);
}
.form {
font-family: Helvetica, sans-serif;
max-width: 400px;
margin: 100px auto;
text-align: center;
padding: 16px;
background: #ffffff;
}
.form h1 {
background: #03773f;
padding: 20px 0;
font-weight: 300;
text-align: center;
color: #fff;
margin: -16px -16px 16px -16px;
font-size: 25px;
}
.form input[type="text"],
.form input[type="url"] {
box-sizing: border-box;
width: 100%;
background: #fff;
margin-bottom: 4%;
border: 1px solid #ccc;
padding: 4%;
font-size: 17px;
color: rgb(9, 61, 125);
}
.form input[type="text"]:focus,
.form input[type="url"]:focus {
box-shadow: 0 0 5px #5868bf;
padding: 4%;
border: 1px solid #5868bf;
}
.form button {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 180px;
margin: 0 auto;
padding: 3%;
background: #0853b6;
border: none;
border-radius: 3px;
font-size: 17px;
border-top-style: none;
border-right-style: none;
border-left-style: none;
color: #fff;
cursor: pointer;
}
.form button:hover {
background: rgba(88,104,191, 0.5);
}
#qrcode-container{
display:none;
}
.qrcode{
padding: 16px;
margin-bottom: 30px;
}
.qrcode img{
margin: 0 auto;
box-shadow: 0 0 10px rgba(67, 67, 68, 0.25);
padding: 4px;
}
</style>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
</head>
<body>
<div class="form">
<h1>QR Code Generator</h1>
<form>
<!-- nhập dữ liệu -->
<input type="url" id="website" name="website" placeholder="https://vzn.vn" required />
<!-- Hiển thị mã QR -->
<div id="qrcode-container">
<div id="qrcode" class="qrcode"></div>
</div>
<!-- nút bấm thực hiện tạo mã QR -->
<button type="button" onclick="generateQRCode()">Generate QR Code</button>
</form>
</div>
<script type="text/javascript">
function generateQRCode() {
let website = document.getElementById("website").value;
if (website) {
let qrcodeContainer = document.getElementById("qrcode");
qrcodeContainer.innerHTML = "";
new QRCode(qrcodeContainer, website);
document.getElementById("qrcode-container").style.display = "block";
} else {
alert("Please enter a valid URL");
}
}
</script>
</body>
</html>Hy vọng bài viết đã giúp bạn tìm được cách tạo mã QR nhanh và đơn giản với Javascript