生成二维码

HTML：

	
	
    
	
	
	



    

        URL:      
         
        生成二维码
    

    

        
canvas创建二维码
        

    

    

        
生成二维码图片
        

    

    

Css：

#qr_text{
    
}
.cavans_qr{
	width: 250px;
	text-align: center;
}
.image_qr{
	width: 250px;
	text-align: center;
}

Js：
 

/*注：空值二维码扫码不到*/

//页面加载完成
$(document).ready(function(){
    // 点击生成二维码--begin
    $('#qr_btn').click(function(){  
        /*如果已生成过二维码，则删除二维码img图片和canvas，重新生成；反之，则直接生成二维码*/
        if($('#imgDiv:has(img)').length!=0){   //#imgDiv:has(img):选取所有包含有元素在其内的id为imgDiv元素；
            $('canvas').remove();   //移除上一个二维码画布
            $('#imgDiv img').remove();  //移除上一个二维码图片 
            createQr();   //执行生成二维码生成函数
        }else{
            createQr();   //执行生成二维码生成函数
        }
    });
    // 点击生成二维码--end

    // 生成二维码--begin
    function createQr(){
        document.createElement('canvas').getContext('2d');   //创建画布
        var valText = $('#qr_text').val();   //获取需要生成二维码数据
 
        // 采用正则表达式判断输入的内容是否是中文--begin
        var reg=/^[\u0391-\uFFE5]+$/; 
        if(valText != "" && !reg.test(valText)){    //test():检测一个字符串是否匹配某个模式
            // 如果不是中文，直接将输入的内容转换成二维码
            $('#qr_container').qrcode({render:"canvas",height:180,width:180,correctLevel:0,text:valText});   //canvas方式；correctLevel:容错级别;colorDark:前景色;colorLight:背景色
            //$("#code").qrcode({render:"table",width: 200,height:200,text:valText});  //table方式 
        }else{
            // 如果是中文，直接将输入的内容字符串转换成UTF-8，然后再转换成二维码
            $('#qr_container').qrcode({render:"canvas",height:180, width:180,correctLevel:0,text:utf16to8(valText)});   //canvas方式
            //$("#code").qrcode({render:"table",width: 200,height:200,text:utf16to8(valText)});  //table方式
        }
        // 采用正则表达式判断输入的内容是否是中文--end
 
        var mycanvas1=document.getElementsByTagName('canvas')[0];   //获取网页中的canvas对象
 
        //将转换后的img标签插入到html中
        var img = convertCanvasToImage(mycanvas1);  //提取图片
        $('#imgDiv').append(img);//imgDiv表示你要插入的容器id
    }
    // 生成二维码--begin
 
    // 字符编码--begin
    function utf16to8(str) {  
        var out, i, len, c;  
        out = "";
        len = str.length;  //获取数据长度 
        for(i = 0; i < len; i++) {  
            c = str.charCodeAt(i);  //charCodeAt(x):返回指定位置(x)的字符的Unicode编码
            if ((c >= 0x0001) && (c <= 0x007F)) {  
                out += str.charAt(i);  //charAt():返回指定位置的字符
            } else if (c > 0x07FF) {  
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  //String.fromCharCode(numX,numX,...,numX):接受一个(或多个)指定的 Unicode 值，然后返回一个字符串
                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;  
    }
    // 字符编码--end
 
    // 从canvas中提取图片image--begin
    function convertCanvasToImage(canvas) {
        //创建新Image对象
        var image = new Image();
        // 指定格式PNG
        image.src = canvas.toDataURL("image/png");   // canvas.toDataURL():返回的是一串Base64编码的URL
        return image;
    }
    // 从canvas中提取图片image--begin

});