如何用QRCodeJS2生成二维码并将其与文字说明一起下载为单张PNG图片？

百变鹏仔 3天前 #PHP

文章标签如何用

二维码与文字图片同时下载

问题描述：
在使用 qrcodejs2 生成二维码时，如何将二维码与对应的文字说明一同下载为 png 图片？

解决方案：

使用 html2canvas 插件将 html 元素转换成图片。具体步骤如下：

生成二维码和文字元素：
使用 html2canvas 转换图片：
保存图片：

代码示例：

<!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>

注意：

文章推荐

如何用QRCodeJS2生成二维码并将其与文字说明一起下载为单张PNG图片？

PHP 函数中如何使用递归来求最小公倍数？

PHP 函数中使用引用的高级技巧和用法

PHP 函数中引用传递与函数调用栈的关系

PHP 函数中引用传递的深浅拷贝问题

PHP 函数中如何使用递归来实现深度优先搜索？