欢迎光临
我们一直在努力

利用JS和jquery生成带logo的二维码

最近做项目的时候 客户要求做生成带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
赞(1) 打赏
未经允许不得转载:星空博客 » 利用JS和jquery生成带logo的二维码
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

星空代刷网

点击进入联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏