使用qrcode.js生成二维码及在二维码中间加入logo的方法

2023-07-18 00:22| 来源: 网络整理| 查看: 265

一、使用qrcode.js生成二维码 1、下载qrcode.js

链接: qrcode下载

2、使用方法

1）引入js，由于qrcode.js是基于jquery的，所以需要先引入jquery 2）创建页面元素，再通过创建qrcode实例，绘制生成二维码示例代码：

示例 var qrcode = new QRCode(document.getElementById("qrcode"), { width : 100, height : 100 });

调试链接：菜鸟教程

二、在二维码中加入logo

由于qrcode.js不提供在二维码中间加入logo的方式，所以通过在二维码加载的时候，用图片叠在二维码中间实现。示例代码一：

示例 var img = $("#qrCodeIco"); img.css(“position:absolute;width:20px;height:20px”); var qrcode = new QRCode($("#qrcode"), { width : 100, height : 100 }); //控制logo图标的位置 var margin = ($("#qrcode").height() - $("#qrCodeIco").height()) / 2; $("#qrCodeIco").css("margin", margin);

示例代码二：

示例 var qrDiv = document.getElementById('qrcodeDiv'); //创建图片，插入id为qrcode的div元素中 var img = document.createElement('img'); img.id = 'qrCodeIco'; img.src = 'xxx.png'; img.src = 'img/qrlogo-28.png'; img.style.position = 'absolute'; img.style.width = '20px'; img.style.height = '20px'; //将img插入到div qrDiv.appendChild(img); //创建二维码模块 var qr = document.createElement('div'); qr.id = 'qrcode'; var qrcode = new QRCode(qr , { width : 100, height : 100 }); //控制logo图标的位置 var margin = ($("#qrcode").height() - $("#qrCodeIco").height()) / 2; $("#qrCodeIco").css("margin", margin);

示例结果：在这里插入图片描述示例代码一主要基于JQuery的用法，直接用JQuery提供的各种函数来实现，最常用。示例代码二主要基于原生js的写法，一般用于html页面不能直接改动，需要用js来动态改动的情况，该示例需要注意，img需要在二维码渲染前插入到目标DIV中，否则会被挤压到二维码的下面。以上示例中图片的路径根据实际情况，自行修改。

参考资料菜鸟教程

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章