后端开发教程 - Java、Spring Boot 实战 - msg200.com
如何使用 JavaScript 制作二维码生成器？
虽然你可以在 Chrome 等浏览器中为 URL 生成二维码，但学习如何制作自己的简易二维码生成器总是很有趣的。那就开始吧。
HTML
以下是 HTML 代码的快速浏览，它非常简单。
<section class="heading">
<div class="title">QRcodes</div>
<div class="sub-title">Generate QRCode for anything!</div>
</section>
<section class="user-input">
<label for="input_text">Type something...</label>
<input type="text" name="input_text" id="input_text" autocomplete="off">
<button class="button" type="submit">Generate QR Code</button>
</section>
<div class="qr-code" style="display: none;"></div>
<script src="./js/app.js"></script>
最后一个元素是当我们通过 javascript 从库中获取二维码时，二维码就会显示出来（稍后会详细介绍）。
让我们继续讨论一些 javascript。
JavaScript
首先，我们将创建一个用户点击Generate QR code按钮的事件。
let btn = document.querySelector(".button");
btn.addEventListener("click", () => {
//code
})
现在，我们将创建一个名为 的函数，generate()该函数将在用户点击按钮时立即调用Generate QR code。该函数将用户输入的文本作为参数。
function generate(user_input) {
//code
}
在这个函数中，我们将使用 JavaScript 库qrcode.js来生成二维码。您可以通过 CDN 使用此库，只需在的标签<script>中包含以下标签即可。<head>html
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
在函数内部generate()，我们将使用给定的库创建一个新对象。它将接受两个参数：第一个参数是显示二维码的元素；第二个参数是生成二维码的内容以及一些自定义二维码的选项。
function generate(user_input) {
var qrcode = new QRCode(document.querySelector(".qr-code"), {
text: `${user_input.value}`,
width: 180, //default 128
height: 180,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
}
接下来，我们将创建一个下载按钮并将其附加在二维码下方。
let download = document.createElement("button");
document.querySelector(".qr-code").appendChild(download);
在这个下载按钮内，我们将添加一个链接，允许用户下载指定文件名的二维码，并将其附加到下载按钮中。您可以在此处了解有关下载属性的更多信息。
let download_link = document.createElement("a");
download_link.setAttribute("download", "qr_code_linq.png");
download_link.innerText = "Download";
download.appendChild(download_link);
接下来我们来了解一下标签href的属性。<a>
该qrcode对象将返回一个canvas元素以及一个image元素。
对于智能手机，canvas元素将可见；但对于台式机，image元素将可见，并将src属性设置为dataURL。我们将使用dataURL来下载二维码。
对于桌面端来说，这非常明显。我们只需要获取src图像元素的属性值，并在指定时间（0.3 秒）后使用函数将其分配给href下载链接（标签）的属性，因为二维码的生成需要一些时间。<a>setTimeout()
let qr_code_img = document.querySelector(".qr-code img");
setTimeout(() => {
download_link.setAttribute("href", `${qr_code_img.getAttribute("src")}`);
}, 300);
但是我们如何dataURL从canvas元素中获取呢？通过使用元素toDataURL()上的方法canvas。
let qr_code_canvas = document.querySelector("canvas");
setTimeout(() => {
download_link.setAttribute("href", `${qr_code_canvas.toDataURL()}`);
}, 300);
经过一些逻辑推理，我们得到了以下结果：
if(qr_code_img.getAttribute("src") == null){
setTimeout(() => {
download_link.setAttribute("href", `${qr_code_canvas.toDataURL()}`);
}, 300);
} else {
setTimeout(() => {
download_link.setAttribute("href", `${qr_code_img.getAttribute("src")}`);
}, 300);
}
此外，.qr-code元素将一直隐藏，直到用户点击Generate QR code按钮。这样，我们的generate()函数就准备好被调用了。
function generate(user_input){
document.querySelector(".qr-code").style = "";
var qrcode = new QRCode(document.querySelector(".qr-code"), {
text: `${user_input.value}`,
width: 180, //128
height: 180,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
console.log(qrcode);
let download = document.createElement("button");
document.querySelector(".qr-code").appendChild(download);
let download_link = document.createElement("a");
download_link.setAttribute("download", "qr_code_linq.png");
download_link.innerText = "Download";
download.appendChild(download_link);
if(document.querySelector(".qr-code img").getAttribute("src") == null){
setTimeout(() => {
download_link.setAttribute("href", `${document.querySelector("canvas").toDataURL()}`);
}, 300);
} else {
setTimeout(() => {
download_link.setAttribute("href", `${document.querySelector(".qr-code img").getAttribute("src")}`);
}, 300);
}
}
现在，在我们的点击事件函数中，我们将检查是否已经显示二维码。如果已经显示，我们将首先清除该二维码并生成一个新的。如果不存在，我们就直接生成一个新的。
此外，只有当用户输入一些文本或输入值不为空时，才会发生所有这些事情。
btn.addEventListener("click", () => {
let user_input = document.querySelector("#input_text");
if(user_input.value != "") {
if(document.querySelector(".qr-code").childElementCount == 0){
generate(user_input);
} else{
document.querySelector(".qr-code").innerHTML = "";
generate(user_input);
}
} else {
document.querySelector(".qr-code").style = "display: none";
console.log("not valid input");
}
})
你可以随意设置元素的样式。以下是我选择的样式：
:root{
font-size: 62.5%;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-size-adjust: none;
-webkit-text-size-adjust: none;
}
button:hover{
cursor: pointer;
}
body{
display: flex;
flex-direction: column;
align-items: center;
background-color: #EAE6E5;
}
.heading{
margin: 3rem 0 5rem 0;
}
.title, .sub-title{
font-size: 4rem;
text-align: center;
font-family: 'Poppins', sans-serif;
color: #12130F;
}
.sub-title{
font-size: 1.5rem;
color: #8F8073;
}
.user-input{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.user-input label{
text-align: center;
font-size: 1.5rem;
font-family: 'Poppins', sans-serif;
}
.user-input input{
width: 80%;
max-width: 35rem;
font-family: 'Poppins', sans-serif;
outline: none;
border: none;
border-radius: 0.5rem;
background-color: #9b8774ad;
text-align: center;
padding: 0.7rem 1rem;
margin: 1rem 1rem 2rem 1rem;
}
.button{
outline: none;
border: none;
border-radius: 0.5rem;
padding: 0.7rem 1rem;
margin-bottom: 3rem;
background-color: #5b92799d;
color: #12130F;
font-family: 'Poppins', sans-serif;
}
.qr-code{
border-top: 0.5rem solid #8F8073;
border-right: 0.5rem solid #8F8073;
border-bottom: 1rem solid #8F8073;
border-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
border-left: 0.5rem solid #8F8073;
background-color: #8F8073;
}
.qr-code button{
display: flex;
justify-content: center;
background-color: #8F8073;
font-family: 'Poppins', sans-serif;
color: #EAE6E5;
border: none;
outline: none;
width: 100%;
height: 100%;
margin-top: 1rem;
}
.qr-code button a{
width: 100%;
height: 100%;
text-decoration: none;
color: #EAE6E5;
}
以下是整个项目的演示：
这是该项目的github 存储库。
