在这里介绍两种前端生成二维码的方法
使用js库qrcode.js使用方法非常简单。
下载地址:https://download.csdn.net/download/qq_20343517/10437227
demo:
$(".model .code").html("");
var qrcode = new QRCode($(".model .code")[0]);
qrcode.makeCode($(".top .address").html());
参数说明
new QRCode(element, option)
名称 | 默认值 | 说明 |
---|---|---|
element | - | 显示二维码的元素或该元素的 ID |
option | 参数配置 |
option 参数说明
名称 | 默认值 | 说明 |
---|---|---|
width | 256 | 图像宽度 |
height | 256 | 图像高度 |
typeNumber | 4 | |
colorDark | "#000000" | 前景色 |
colorLight | "#ffffff" | 背景色 |
correctLevel | QRCode.CorrectLevel.L | 容错级别,可设置为: QRCode.CorrectLevel.L QRCode.CorrectLevel.M QRCode.CorrectLevel.Q QRCode.CorrectLevel.H |
API 接口
名称 | 说明 |
---|---|
makeCode(text) | 设置二维码内容 |
clear() | 清除二维码。(仅在不支持 Canvas 的浏览器下有效) |
大致看了下源码,应该是采用canvas制作,canvas真是个神奇的东西啊。
还有一个jquery版本的,使用方法应该差不多的,感兴趣的可以移步这里
https://blog.csdn.net/u011628289/article/details/52046410
使用免费的API接口
1.百度网盘(可使用https)
http://pan.baidu.com/share/qrcode?w=150&h=150&url=http://www.xsyrz.cn
2.iClick接口 (无https)
http://bshare.optimix.asia/barCode?site=weixin&url=http://www.xsyrz.cn
3.JiaThis 接口(无https)
http://s.jiathis.com/qrcode.php?url=http://www.xsyrz.cn
4.联图网(无https)
http://qr.liantu.com/api.php?text=http://www.xsyrz.cn
5.K780数据网(支持https和http)
http://api.k780.com:88/?app=qr.get&data=http://www.xsyrz.cn&level=L&size=6
https://sapi.k780.com/?app=qr.get&data=http://www.xsyrz.cn&level=L&size=6
6.QR Code Generator(https接口)
https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=http://www.xsyrz.cn
使用说明:把url=后面的网址改成你要生成二维码的;用它们只需要填写好网址就能自动生成二维码,方便实用,以上几个,任选一种即可。
参考文章:https://www.cnblogs.com/niuboren/p/5887388.html
https://blog.csdn.net/YAN914/article/details/75747329