jquery-qrcode.js 生成二维码并支持下载到本地

jquery-qrcode.js 生成二维码并支持下载到本地

jquery-qrcode.js 引入

直接上代码。
1、前端代码

                <div class="code-window">
                    <div class="code-main">
                        <div class="codeImg" id="event_qrcode"></div>
                        <div class="codeBtn">
                            <span class="coryCode">保存</span>
                            <span class="cancel">关闭</span>
                        </div>
                    </div>
                </div>

2、生成二维码的js代码,在点击事件中调用此方法，生成的二维码会以画布标签canvas显示在id="event_qrcode"的div中

function createQrcode(ur,src) {
$(’#event_qrcode’).qrcode({
render:“canvas”, //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
text: url, //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
width:180, //二维码的宽度
height:180, //二维码的高度
background:’#fff’, //二维码的后景色
foreground:’#000’, //二维码的前景色
//src:src //二维码中间的logo，这里我不需要，注释掉了
});
}

3、保存图片到本地
$(’.coryCode’).on(“click”,function () {
var canvas = $(’#event_qrcode’).find(“canvas”).get(0); //这里需要get(0),踩了个坑
downLoadImage(canvas);
})

被调用的方法
function downLoadImage(canvas) {
var a = document.createElement(“a”);
a.href = canvas.toDataURL();
a.download = name;//下载的二维码名称，我作了全局变量，可按自己需要修改或者从参数带入
a.click();
}

至此完结！