QRCode+html2canvas 实现本地下载带边框的二维码

最新推荐文章于 2023-06-09 15:05:36 发布

原创最新推荐文章于 2023-06-09 15:05:36 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

js零碎专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何通过QRCode.js和html2canvas在前端实现带边框的二维码，并允许用户在本地下载。作者是一名java后端开发者，通过此方法解决了无边框二维码识别度低的问题，提高了用户体验。

声明：java后端，十八环开外的前端水平（复制粘贴的那种水平）。

需求：无边框的二维码识别度不高，用户不好扫描。要求本地能下载带边框的二维码。

这是实现之前，也是基于QRCode简单实现！

这是实现后的效果：灰色边框，二维码合成关键性文字。

好了。开始正题：

1.引入两个js文件：

QRCode.js文件下载

html2canvas.js文件下载

2.页面隐藏一个区域

<#--这里是边框尺寸，边框宽度，边框颜色，自定义！-->
    <div hidden id="canva" style="width: 295px;height: 305px;border:20px solid #cfcfcf;">
        <div id="qrCodeImg"></div><#--这里准备放二维码照片-->
        <div style="text-align: center;color: saddlebrown" id="qrCodeName"></div><#--这里是描述性关键文字，设置样式-->
        <br/><#--往上抬一行-->
    </div>

3.js代码实现下载

var QRcodeName = "新零售POS考题";        
var qrcode = new QRCode("qrCodeImg", {
            text: $.base64.encode(id + ""),//二维码要传递的信息。这里传id用了base64加密
            width: 256,//二维码宽度
            height: 256,//二维码高度
            colorDark: "#000000",//前景色
            colorLight: "#ffffff",//背景色
            correctLevel: QRCode.CorrectLevel.H//二维码 容错级别
        });
        downloadIamge( QRcodeName);//传二维码照片名 调用下载功能


     //下载带边框的二维码核心 （html2canvas 元素转换照片）
    function downloadIamge(name) {
    $("#canva").show();//页面隐藏区域显示出来
    $("#qrCodeName").text('【'+name+'】二维码');//添加二维码描述信息
    //html2canvas核心 将id为canva的元素按页面布局制作成二维码
    html2canvas(document.getElementById('canva')).then(function (canvas) {
        var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-                stream"); // 获取生成的图片的url 　
        var saveLink = document.createElement('a');//临时创建二维码
        saveLink.href = imgUri;//二维码下载路径
        saveLink.download = name +'试卷二维码.png'//二维码名。传进来的
        saveLink.click();//模拟点击 执行下载
        $("#canva").hide();//页面隐藏起来
    });
}