使用原生js生成二维码图片

来源:赵克立博客分类: 前端开发标签：js特效 js函数发布时间:2016-11-26 11:08:44最后更新:2016-12-07 16:51:46浏览:4552

本文为博主原创文章，转载请声明原文链接...谢谢。o_0。

原文链接:

http://www.zhaokeli.com /article/8033.html

更新时间：

2016-12-07 16:51:46

温馨提示：

学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章

首先下载qrcode库

davidshimjs-qrcodejs.rar

里面有完整的示例

可以生成base64图片代码,也可以生成svg图片

第一种

先写一个div标签

<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>

然后把生成的二维码绑定到这个标签里

var qrcode = new QRCode(document.getElementById("qrcode"), {
        text:'http://www.zhaokeli.com',//默认的二维码内容
	width : 100,
	height : 100,
        colorDark : "#ff0000",//二维码颜色
        colorLight : "#ffff00",//二维码背景色
        correctLevel : QRCode.CorrectLevel.H,//容错等级
});
qrcode.makeCode('www.zhaokeli.com');

第二种

生成svg图片,可以缩放且不会失真,如下图：

先写一个svg标签如下：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="qrcode" />
</svg>

绑定标题对象,

var qrcode = new QRCode(document.getElementById("qrcode"), {
    width: 100,
    height: 100,
    useSVG: true
});
qrcode.makeCode('www.zhaokeli.com');

生成后还可以清空也可以再重新给二维码换成新的内容

qrcode.clear();//清空二维码
qrcode.makeCode("it is new content!");//生成新的二维码内容

DEMO地址： http://davidshimjs.github.io/qrcodejs