运用js生成二维码(工作记录)

工作中需要一个简单的二维码生成功能,此处运用JQuery+jquery.qrcode实现;

需要资源:jquery.js + jquery.qrcode.min.js (网上搜索即可获取)

准备工作

页面设计代码:

需要创建一个div存放生成二维码,其中id命名为qrcode的div不可缺少。



	
		
		
	
	
        
		

引入资源


注:必须先引入jquery再引入qrcode

准备工作完成,开始生成。

非中文生成二维码

 function creatQrcode(){
  	 var qr=$("#qrcode").qrcode({
            render: "canvas",//渲染方式,只是canvas、table
            text: "csdn yyds",//二维码的内容
            width: "300",//二维码宽度
            height: "300",//二维码高度
            background: "white",//二维码背景色
            foreground: "black"//二维码前景色
        });
  	
  }

直接调用方法即可在页面对应div生成二维码;

如果二维码中含有中文,直接调用上述方法将会产生乱码,此时需要对中文进行转换。

含中文生成二维码

//中文支持
    function utf16to8(str) {
        var out, i, len, c;
        out = "";
        len = str.length;
        for(i = 0; i < len; i++) {
            c = str.charCodeAt(i);
            if ((c >= 0x0001) && (c <= 0x007F)) {
                out += str.charAt(i);
            } else if (c > 0x07FF) {
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            } else {
                out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            }
        }
        return out;
    }

//生成二维码
    function mkqr(){
        var congtent=Base.getValue("name");
        console.log(congtent);
        var qr=$("#qrcode").qrcode({
            render: "canvas",//渲染方式,只是canvas、table
            text: utf16to8(congtent),//二维码的内容
            width: "300",//二维码宽度
            height: "300",//二维码高度
            background: "white",//二维码背景色
            foreground: "black"//二维码前景色
        });
    }

生成二维码的text参数中调用中文转换即可实现。

你可能感兴趣的:(javascript,前端,jquery)