js生产二维码

1、js生成二维码代码：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Qrcode Test</title> <script type="text/javascript" src="js/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="js/jquery.qrcode.logo.min.js"></script> <script type="text/javascript"> //创建二维码 function createQRCode(id, url, width, height, src){ $('#'+id).empty(); jQuery('#'+id).qrcode({ render: 'canvas', text: url, width : width, //二维码的宽度 height : height, //二维码的高度 imgWidth : width/4, //图片宽 imgHeight : height/4, //图片高 src: src //图片中央的二维码 }); } function init() { createQRCode("qrcode", "测试", 220, 220, "img/logo.png"); } </script> </head> <body onLoad="init()"> <h1>Qrcode</h1> <div id="qrcode"></div> <p class="col-lg-6 col-md-6" style="text-align: left;" > <a id="download" download="qrcode.jpg"></a> <a id="saveQrCode" style="cursor: pointer;">下载二维码</a> </p> </body> </html>

注意事项：

　　2、点击下载事件：

$('#saveQrCode').click(function(){ var canvas = $('#qrcode').find("canvas").get(0); try {//解决IE转base64时缓存不足，canvas转blob下载 var blob = canvas.msToBlob(); navigator.msSaveBlob(blob, 'qrcode.jpg'); } catch (e) {//如果为其他浏览器，使用base64转码下载 var url = canvas.toDataURL('image/jpeg'); $("#download").attr('href', url).get(0).click(); } return false; });

posted @ 2017-12-14 16:30  pyj063  阅读(226)  评论(0)  编辑  收藏  举报