记录jquery.qrcode.js二维码生成教程

逐梦驿站
1564
文章
26
评论
2021年3月14日09:24:58记录jquery.qrcode.js二维码生成教程已关闭评论 64 1182字

最近一个网站的二维码失效了,原来使用的是其他方式生成的,而且许多借助其他api方式生成的二维码都会有时效性。所以,直接搜索教程,更换使用jquery.qrcode.js生成二维码的方式。索性在此记录一下,方便自己和代码小白的使用。

记录jquery.qrcode.js二维码生成教程

具体使用步骤:

1、将jquery.qrcode.min.js和jquery添加到自己要更添加二维码的页面,比如要放在文章页,那就打开主题的single.php。其他程序找到类似的文件即可。

<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>

放置位置:一般放在文件末尾,调用尾部文件之前。位置如下图:

记录jquery.qrcode.js二维码生成教程

2、还是single.php页面,在网页你要放置二维码的位置,新建一个DOM元素去包含生成qrcode二维码。

<div id="qrcode"></div>

3、在此容器中添加生成qrcode二维码。一般选用cancas方式即可。

//使用canvas生成
jQuery('#qrcode').qrcode({
    render: "canvas",        //也可以替换为table
    text: "https://www.517zhumeng.com"   //网址部分替换为自己程序对应的网页url或者后台获取的url代码即可
});

说明:canvas和table生成二维码区别

canvas方式生成的实际是一张图片,而table方式生成的则是由html的<table>标签通过控制细密的单元格背景色的黑白来组成的二维码,一个点就是一个单元格。canvas方式生成的可直接以图片格式保存,而table的不能。canvas的容易放大失真,table的不易失真。同时,canvas生成的二维码对低版本浏览器不支持。

至此,已经能够生成自己想要的二维码了。如果想要修改二维码大小和一些特性,可以参照以下代码:

//生成100*100(宽度100,高度100)的二维码
jQuery('#qrcode').qrcode({
    render: "canvas", //也可以替换为table
    width: 100,      //二维码宽
    height: 100,     //二维码高
    foreground:"#c00",     //前景色设置
    background:"#FFF",     //背景色设置
    text: "https://www.517zhumeng.com"   //网址部分替换为自己程序对应的网页url或者后台获取的url代码即可
});

最后,用jquery.qrcode.js生成二维码除了以上可设置特性外,还有其他许多特性,具体大家感兴趣的可以查看一些网络教程来自己学习。

推荐阅读:

继续阅读
  • 版权声明: 发表于 2021年3月14日09:24:58
  • 转载注明:https://www.517zhumeng.com/10275.html/