jquery-qrcode二维码+乱码解决

2017年12月27日20:24:11 2 1,866 views

最近做着项目需要用到二维码,前端就用了jquery-qrcode,后端传个json值过来,二维码里面显示json值得内容。中间还有很多,废话就不说,记录一下一些问题。

jquery-qrcode使用方法:

1、jquery.qrcode.js是依赖jquery的,所以要先引入jquery再引入jquery.qrcode.js

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

2、 在页面上添加一个div标签,用于创建渲染区域

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

3、通过代码就可以生成一个默认256×256大小的二维码

<script type="text/javascript">
    jQuery('#qrcode').qrcode("http://www.wdooc.com/");
</script>

4、详细配置

jQuery("#qrcode").qrcode({
    render: "canvas", // 渲染方式有table方式和canvas方式
    width: 256,   //宽度
    height: 256, //高度
    text: "http://www.wdooc.com/", //二维码任意内容
    typeNumber: -1,   //计算模式一般默认为-1
    correctLevel: 2, //二维码纠错级别
    background: "#ffffff",  //背景颜色
    foreground: "#000000"  //二维码颜色
});

jquery-qrcode中文解决方案

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;  
}  

最后分享我项目前端的部分代码

$("#checkButton").click(function(){
    SendCodeId();
    //设置二维码信息
    var textJSON = {
        codeId:QRcode.codeId,
        course:QRcode.course,
        courseTime:QRcode.courseTime,
        classRoom:QRcode.classRoom,
        teacheerName:QRcode.teacheerName
    };
    var text = JSON.stringify(textJSON);
    //展示二维码
    Bar();
    $('#qrcode').qrcode({width:400,height:400,text:utf16to8(text)});
});

 

 

 

  • A+
所属分类:WEB

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  1   博主  1

    • avatar 美词创意设计 1

      很实用的东西!