星空博客最近做项目的时候 客户要求做生成带logo的二维码 并给做个按钮 点击可以下载
本来打算用JSP写 后来网上查了查发现很麻烦 最后找到了这个办法 跟大家分享一下
总结：简单方便 ！好用省心！
废话不多说上截图
下面是代码 需要用的两个JS文件分别是：jquery.min.js 和 修改过的 jquery.qrcode.min.js 原版的好像不支持中文和加logo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Qrcode Test</title>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.qrcode.min.js"></script>
<script type="text/javascript">
//创建二维码
window.onload=function createQRCode(){
jQuery('#qrcode').qrcode({
render: 'canvas',
text: "https://www.baidu.com/",
width : "200", //二维码的宽度
height : "200", //二维码的高度
imgWidth : 220/3.5, //图片宽
imgHeight : 220/3.5, //图片高
src: 'img/logo.png' //图片中央的二维码
});
}
//下载二维码
function downloadQrcode(){
var canvas = $('#qrcode').find("canvas").get(0);
try {//解决IE转base64时缓存不足，canvas转blob下载
var blob = canvas.msToBlob();
navigator.msSaveBlob(blob, 'qrcode.png');
} catch (e) {//如果为其他浏览器，使用base64转码下载
var url = canvas.toDataURL('image/png');
$("#download").attr('href', url).get(0).click();
}
return false;
};
</script>
</head>
<body>
<div id="qrcode"></div>
<a id="download" download="qrcode.png"></a>
<input type="button" value="下载" onclick="downloadQrcode()"/>
</body>
</html>
文件下载 | 文件名称：Qrcode.zip | 文件大小：61.6K |
| 下载声明：本站资源均来自网络，如有侵权请联系站长删除 | ||
| 下载地址：https://www.lanzous.com/i27mnmb | ||
