如何使用 jQuery.qrcode.js 生成二维码

最新推荐文章于 2024-03-26 00:14:07 发布

孤狼1990

最新推荐文章于 2024-03-26 00:14:07 发布

阅读量358

点赞数

分类专栏：技术总结笔记文章标签： jquery 二维码浏览器 canvas 开源

本文链接：https://blog.csdn.net/qq_31564009/article/details/50562976

版权

技术总结同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

笔记

1 篇文章 0 订阅

订阅专栏

先简单说一下jquery-qrcode，这个开源的三方库（可以从https://github.com/jeromeetienne/jquery-qrcode 获取），

qrcode.js 是实现二维码数据计算的核心类，

jquery.qrcode.js 是把它用jquery方式封装起来的，用它来实现图形渲染，其实就是画图（支持canvas和table两种方式）

因为涉及到了，中文转码和浏览器版本的区分模式，所以封装起来方便大家应用：

第一步：引入核心类库

第二部：二维码工厂

var qrcodeFactory = (function(){
	
	var chineseRegular = /^[\u4e00-\u9fa5]+$/;
	
	function qrcode(obj,config){
		if(!!config && !!config.text && chineseRegular.test(config.text)){
			config.text = utf16to8(config.text);
		}
		
		obj.qrcode({
			text : config.text, 
			render : getRenderMethod(),
			width : config.width || 256,     //设置宽度  
			height : config.height || 256,     //设置高度  
			typeNumber : config.typeNumber || -1,      //计算模式  
			correctLevel : config.correctLevel || 1,//纠错等级  
			background : config.background || "#ffffff",//背景颜色  
			foreground : config.foreground || "#000000" //前景颜色  
		});
	}
	
	function getRenderMethod(){
		var browser = getBrowserVersion();
		if(!!browser.msie && browser.version <= 9){
			return "table"
		}
		return "canvas";
	}
	
	function getBrowserVersion(){ //判断浏览器类型
		var userAgent = navigator.userAgent.toLowerCase(); 
		// Figure out what browser is being used 
		return {
			version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1], 
			safari: /webkit/.test( userAgent ), 
			opera: /opera/.test( userAgent ), 
			msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ), 
			mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent ) 
		}; 
	}
    
	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;  
	}  
	
	return {
		qrcode:qrcode
	}
})();

第三步：使用

qrcodeFactory.qrcode(jQuery('#output'),{
    text : "http://www.baidu.com",  //设置二维码内容  
    width : 256,     //设置宽度  
    height : 256,     //设置高度  
    typeNumber : -1,      //计算模式  
    correctLevel : 1,//纠错等级  
    background : "#ffffff",//背景颜色  
    foreground : "#000000" //前景颜色  
});