二维码与文字图片同时下载
问题描述：
在使用 qrcodejs2 生成二维码时，如何将二维码与对应的文字说明一同下载为 png 图片？
解决方案：
使用 html2canvas 插件将 html 元素转换成图片。具体步骤如下：
-
生成二维码和文字元素：
- 将二维码和文字说明分别放在不同的 html 元素中。
-
使用 html2canvas 转换图片：
- 安装 html2canvas 插件。
- 使用 html2canvas 函数将包含二维码和文字说明的 html 元素转换成图片。
-
保存图片：
- 使用 filesaver.js 插件将图片保存为 png 文件。
代码示例：
<!DOCTYPE html>
<html>
<head>
<title>工位信息填报</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/QRcode.css">
<script src="../node_modules/qrcodejs2/qrcode.min.js"></script>
<script src="../js/FileSaver.js-master/dist/FileSaver.min.js"></script>
<script src="../js/html2canvas.min.js"></script>
</head>
<body>
<div class="qrcode-container">
<div id="qrcode"></div>
<div class="qrcode-label">工位号</div>
</div>
<script>
// 生成二维码
var qrcode = new QRCode("qrcode", {
text: "http://example.com/",
width: 256,
height: 256,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
// 绘制文字
var canvas = document.getElementById("qrcode").getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
ctx.font = "14px Arial";
ctx.fillStyle = "#FF0000";
ctx.textAlign = "center";
ctx.fillText("工位号:", 256/2, 256);
// 同时保存
html2canvas(document.querySelector('.qrcode-container')).then(function(canvas) {
var dataURL = canvas.toDataURL('image/png');
saveAs(dataURL, 'test.png');
});
</script>
</body>
</html>注意：
- 调整 html2canvas 的范围以确保包含所有要保存的元素。
- 根据需要调整文字的大小和位置，以确保其与二维码对齐。
