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

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

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

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

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

好了。开始正题：

• 1.引入两个js文件：

QRCode.js文件下载

html2canvas.js文件下载

• 2.页面隐藏一个区域

<#--这里是边框尺寸，边框宽度，边框颜色，自定义！-->
    

 

• 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();//页面隐藏起来
    });
}