基于JS实现二维码名片生成的示例代码
简介
本文将介绍如何使用JavaScript编写代码来生成二维码名片。这样的应用程序可以方便地将个人或商业信息分享给其他人。一些示例将帮助您更好地理解如何使用JavaScript来生成二维码名片。
准备工作
在开始编写JavaScript代码之前，您需要在网页中引入QRCode.js库。通过在HTML文件中引入QRCode.js库，您可以轻松编写代码来生成二维码名片。
<!DOCTYPE html>
<html>
<head>
<title>二维码名片生成器</title>
</head>
<body>
<h1>二维码名片生成器</h1>
<input type="text" id="qrtext" placeholder="请输入您的名片信息">
<button onclick="generateQR()">生成二维码</button>
<div id="qrcode"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="app.js"></script>
</body>
</html>
在上面的代码中，我们引入了QRCode.js库。以下是我们代码中的核心JavaScript代码。
function generateQR() {
const qrtext = document.getElementById('qrtext').value.trim();
if (!qrtext) {
alert('请输入有效信息');
return;
}
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: qrtext,
width: 200,
height: 200,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
}
看一下最上面的代码，我们为页面添加了一个输入框和一个生成二维码的按钮。然后，我们在页面中添加了一个div元素，它是用于将生成的二维码显示出来的。
在JavaScript函数generateQR()中，我们首先获取了用户输入的信息，并对其进行了一些值检查。接着，我们创建了一个QRCode对象，并传递了必要的参数。最后，我们将二维码显示到页面上。
示例说明
让我们看下面两个示例：
示例1： 生成文本二维码名片
以下是一个示例，它演示了如何为纯文本信息创建二维码名片。
<!DOCTYPE html>
<html>
<head>
<title>文本二维码名片生成器</title>
</head>
<body>
<h1>文本二维码名片生成器</h1>
<input type="text" id="qrtext" placeholder="请输入您的名片信息">
<button onclick="generateQR()">生成二维码</button>
<div id="qrcode"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
function generateQR() {
const qrtext = document.getElementById('qrtext').value.trim();
if (!qrtext) {
alert('请输入有效信息');
return;
}
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: qrtext,
width: 200,
height: 200,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
}
</script>
</body>
</html>
在这个示例中，我们有一个页面，用户可以在该页面中输入他们的名片信息。当他们单击“生成二维码”按钮时，JavaScript将创建一个QRCode对象，并将其作为二维码显示。
示例2： 生成带有Logo的二维码名片
以下示例演示了如何添加带有公司文本和Logo的二维码名片。
<!DOCTYPE html>
<html>
<head>
<title>带有Logo的二维码名片生成器</title>
</head>
<body>
<h1>带有Logo的二维码名片生成器</h1>
<input type="text" id="qrtext" placeholder="请输入您的名片信息">
<input type="file" id="logoImage" accept="image/*" onchange="loadFile(event)">
<button onclick="generateQR()">生成二维码</button>
<div id="qrcode"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
let imgData;
function generateQR() {
const qrtext = document.getElementById('qrtext').value.trim();
if (!qrtext) {
alert('请输入有效信息');
return;
}
var canvas = document.createElement("canvas");
QRCode.toCanvas(canvas, qrtext, {
width: 200,
height: 200,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
}, function(error) {
if (error) console.error(error);
let ctx = canvas.getContext('2d');
if (imgData) {
const img = new Image();
img.src = imgData;
img.onload = function () {
const imgWidth = 40,
imgHeight = 40;
let x = (canvas.width - imgWidth) / 2,
y = (canvas.height - imgHeight) / 2;
ctx.drawImage(this, x, y, imgWidth, imgHeight);
document.getElementById("qrcode").innerHTML = "<img src='"+canvas.toDataURL()+"'>";
};
} else {
document.getElementById("qrcode").innerHTML = "<img src='"+canvas.toDataURL()+"'>";
}
});
}
function loadFile(event) {
const reader = new FileReader();
reader.onload = function() {
imgData = reader.result;
}
reader.readAsDataURL(event.target.files[0]);
}
</script>
</body>
</html>
在这个示例中，我们提供了一个上传文件的区域，允许用户上传公司Logo。我们在JavaScript代码中添加了一个新的函数loadFile()，用于检索选定的图像文件的数据URL。当用户单击“生成QR码”按钮时，JavaScript使用QRCode.js库创建Canvas，并在该Canvas中创建QR码。如果用户已经上传了Logo，则将Logo添加到Canvas中。最后，我们将Canvas转换为图像，并将其显示在HTML div元素中，以便将其展示给用户。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于JS实现二维码名片生成的示例代码 - Python技术站
微信扫一扫 
支付宝扫一扫 