前端生成二维码

在这里介绍两种前端生成二维码的方法

使用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