js生成二维码

时间 2017/9/28 23:01:34 加载中...

目的:

他人可以扫描二维码来访问某个网址。


插件:

生成二维码的js库有:

QRcode.js、jquery.qrcode.js等


QRcode.js使用方式

QRcode.js的项目地址为:https://github.com/davidshimjs/qrcodejs 下载 链接:http://pan.baidu.com/s/1bo882Fd 密码:r435

使用方式: 首先引用jquery.min.js

方式1:

<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
</script>

方式2:

<div id="qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
	text: "http://jindo.dev.naver.com/collie",
	width: 128,
	height: 128,
	colorDark : "#000000",
	colorLight : "#ffffff",
	correctLevel : QRCode.CorrectLevel.H
});
</script>

重新生成二维码:

qrcode.clear(); 
qrcode.makeCode("http://naver.com");


jquery.qrcode.js的使用方式

  1. 引用jquery.min.js、utf8.js、jquery.qrcode.js。下载 链接:http://pan.baidu.com/s/1mhIz924 密码:6n5k

  2. 在页面中使用如下脚本

    var url = location.href;
    $("#qrcode").qrcode({
        render : "canvas",    //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较好
        text: url,    //扫描二维码后显示的内容,可以直接填一个网址,扫描二维码后自动跳向该链接
        width : "120",               //二维码的宽度
        height: "120",              //二维码的高度
        background : "#ffffff",       //二维码的后景色
        foreground: "#07a0e1",        //二维码的前景色
        src: '/images/useravatar.svg'             //二维码中间的图片
    });
  3. 完成

其它参考资源:

http://backtonaturedemo.github.io/frontend/demo/qrcode/demo.html

qrgen插件

https://github.com/litten/Kael-Qrcode

扫码分享
版权说明
作者:SQBER
文章来源:http://blog.sqber.com/articles/qrcode-generate.html
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。