js生成二维码以及点击下载二维码

js生成二维码

jquery.qrcode.js可以快速使用页面生成二维码。但改项目有两个小问题：1.不支持中文；2.不支持二维码中间生成图片。

支持中文的jquery-qrcode

jquery.qrcode.js默认不支持中文。这跟js的机制有关系，jquery-qrcode这个库是采用 charCodeAt()这个方式进行编码转换的，

而这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式，英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。

jquery-qrcode GitHub源码地址 : https://github.com/jeromeetienne/jquery-qrcode

解决方式当然是，在二维码编码前把字符串转换成UTF-8，具体代码如下：

function qrcodeToUtf8(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;
}

支持带logo的二维码生成

增加qrcode的设置属性：

{
    width : "220",               //二维码的宽度  
    height : "220",              //二维码的高度  
    imgWidth : 220/4,            //图片宽
    imgHeight : 220/4,           //图片高
    src: 'logo.png'              //图片中央的二维码
}

生成二维码的时候会将src地址中的图片放进标签中，覆盖到生成二位码的canvas中。

将中文转义和logo添加功能整合进jquery.qrcode.js后代码如下（压缩版） :

function qrcodeToUtf8(str){var out,i,len,c;out="";len=str.length;for(i=0;i=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 QR8bitByte(a){this.mode=QRMode.MODE_8BIT_BYTE,this.data=a}function QRCode(a,b){this.typeNumber=a,this.errorCorrectLevel=b,this.modules=null,this.moduleCount=0,this.dataCache=null,this.dataList=new Array()}function QRPolynomial(a,b){var c,d;if(void 0==a.length){throw new Error(a.length+"/"+b)}for(c=0;c").css("width",b.width+"px").css("height",b.height+"px").css("border","0px").css("border-collapse","collapse").css("background-color",b.background),e=b.width/c.getModuleCount(),f=b.height/c.getModuleCount(),g=0;g").css("height",f+"px").appendTo(d),i=0;i").css("width",e+"px").css("background-color",c.isDark(g,i)?b.foreground:b.background).appendTo(h)}}return d},this.each(function(){var e="canvas"==b.render?c():d();a(e).appendTo(this)})}}(jQuery),QR8bitByte.prototype={getLength:function(){return this.data.length},write:function(a){for(var b=0;ba||this.moduleCount<=a||0>b||this.moduleCount<=b){throw new Error(a+","+b)}return this.modules[a][b]},getModuleCount:function(){return this.moduleCount},make:function(){var a,b,c,d,e,f;if(this.typeNumber<1){for(a=1,a=1;40>a;a++){for(b=QRRSBlock.getRSBlocks(a,this.errorCorrectLevel),c=new QRBitBuffer(),d=0,e=0;e=7&&this.setupTypeNumber(a),null==this.dataCache&&(this.dataCache=QRCode.createData(this.typeNumber,this.errorCorrectLevel,this.dataList)),this.mapData(this.dataCache,b)},setupPositionProbePattern:function(a,b){var c,d;for(c=-1;7>=c;c++){if(!(-1>=a+c||this.moduleCount<=a+c)){for(d=-1;7>=d;d++){-1>=b+d||this.moduleCount<=b+d||(this.modules[a+c][b+d]=c>=0&&6>=c&&(0==d||6==d)||d>=0&&6>=d&&(0==c||6==c)||c>=2&&4>=c&&d>=2&&4>=d?!0:!1)}}}},getBestMaskPattern:function(){var c,d,a=0,b=0;for(c=0;8>c;c++){this.makeImpl(!0,c),d=QRUtil.getLostPoint(this),(0==c||a>d)&&(a=d,b=c)}return b},createMovieClip:function(a,b,c){var f,g,h,i,j,d=a.createEmptyMovieClip(b,c),e=1;for(this.make(),f=0;f=f;f++){for(g=-2;2>=g;g++){this.modules[d+f][e+g]=-2==f||2==f||-2==g||2==g||0==f&&0==g?!0:!1}}}}}},setupTypeNumber:function(a){var c,d,b=QRUtil.getBCHTypeNumber(this.typeNumber);for(c=0;18>c;c++){d=!a&&1==(1&b>>c),this.modules[Math.floor(c/3)][c%3+this.moduleCount-8-3]=d}for(c=0;18>c;c++){d=!a&&1==(1&b>>c),this.modules[c%3+this.moduleCount-8-3][Math.floor(c/3)]=d}},setupTypeInfo:function(a,b){var e,f,c=this.errorCorrectLevel<<3|b,d=QRUtil.getBCHTypeInfo(c);for(e=0;15>e;e++){f=!a&&1==(1&d>>e),6>e?this.modules[e][8]=f:8>e?this.modules[e+1][8]=f:this.modules[this.moduleCount-15+e][8]=f}for(e=0;15>e;e++){f=!a&&1==(1&d>>e),8>e?this.modules[8][this.moduleCount-e-1]=f:9>e?this.modules[8][15-e-1+1]=f:this.modules[8][15-e-1]=f}this.modules[this.moduleCount-8][8]=!a},mapData:function(a,b){var g,h,i,j,c=-1,d=this.moduleCount-1,e=7,f=0;for(g=this.moduleCount-1;g>0;g-=2){for(6==g&&g--;;){for(h=0;2>h;h++){null==this.modules[d][g-h]&&(i=!1,f>>e)),j=QRUtil.getMask(b,d,g-h),j&&(i=!i),this.modules[d][g-h]=i,e--,-1==e&&(f++,e=7))}if(d+=c,0>d||this.moduleCount<=d){d-=c,c=-c;break}}}}},QRCode.PAD0=236,QRCode.PAD1=17,QRCode.createData=function(a,b,c){var f,g,h,d=QRRSBlock.getRSBlocks(a,b),e=new QRBitBuffer();for(f=0;f8*h){throw new Error("code length overflow. ("+e.getLengthInBits()+">"+8*h+")")}for(e.getLengthInBits()+4<=8*h&&e.put(0,4);0!=e.getLengthInBits()%8;){e.putBit(!1)}for(;;){if(e.getLengthInBits()>=8*h){break}if(e.put(QRCode.PAD0,8),e.getLengthInBits()>=8*h){break}e.put(QRCode.PAD1,8)}return QRCode.createBytes(e,d)},QRCode.createBytes=function(a,b){var h,i,j,k,l,m,n,o,p,q,r,c=0,d=0,e=0,f=new Array(b.length),g=new Array(b.length);for(h=0;h=0?n.get(o):0}}for(p=0,k=0;kk;k++){for(h=0;hk;k++){for(h=0;h=0;){b^=QRUtil.G15<=0;){b^=QRUtil.G18<>>=1}return b},getPatternPosition:function(a){return QRUtil.PATTERN_POSITION_TABLE[a-1]},getMask:function(a,b,c){switch(a){case QRMaskPattern.PATTERN000:return 0==(b+c)%2;case QRMaskPattern.PATTERN001:return 0==b%2;case QRMaskPattern.PATTERN010:return 0==c%3;case QRMaskPattern.PATTERN011:return 0==(b+c)%3;case QRMaskPattern.PATTERN100:return 0==(Math.floor(b/2)+Math.floor(c/3))%2;case QRMaskPattern.PATTERN101:return 0==b*c%2+b*c%3;case QRMaskPattern.PATTERN110:return 0==(b*c%2+b*c%3)%2;case QRMaskPattern.PATTERN111:return 0==(b*c%3+(b+c)%2)%2;default:throw new Error("bad maskPattern:"+a)}},getErrorCorrectPolynomial:function(a){var c,b=new QRPolynomial([1],0);for(c=0;a>c;c++){b=b.multiply(new QRPolynomial([1,QRMath.gexp(c)],0))}return b},getLengthInBits:function(a,b){if(b>=1&&10>b){switch(a){case QRMode.MODE_NUMBER:return 10;case QRMode.MODE_ALPHA_NUM:return 9;case QRMode.MODE_8BIT_BYTE:return 8;case QRMode.MODE_KANJI:return 8;default:throw new Error("mode:"+a)}}else{if(27>b){switch(a){case QRMode.MODE_NUMBER:return 12;case QRMode.MODE_ALPHA_NUM:return 11;case QRMode.MODE_8BIT_BYTE:return 16;case QRMode.MODE_KANJI:return 10;default:throw new Error("mode:"+a)}}else{if(!(41>b)){throw new Error("type:"+b)}switch(a){case QRMode.MODE_NUMBER:return 14;case QRMode.MODE_ALPHA_NUM:return 13;case QRMode.MODE_8BIT_BYTE:return 16;case QRMode.MODE_KANJI:return 12;default:throw new Error("mode:"+a)}}}},getLostPoint:function(a){var d,e,f,g,h,i,j,k,l,b=a.getModuleCount(),c=0;for(d=0;b>d;d++){for(e=0;b>e;e++){for(f=0,g=a.isDark(d,e),h=-1;1>=h;h++){if(!(0>d+h||d+h>=b)){for(i=-1;1>=i;i++){0>e+i||e+i>=b||(0!=h||0!=i)&&g==a.isDark(d+h,e+i)&&f++}}}f>5&&(c+=3+f-5)}}for(d=0;b-1>d;d++){for(e=0;b-1>e;e++){j=0,a.isDark(d,e)&&j++,a.isDark(d+1,e)&&j++,a.isDark(d,e+1)&&j++,a.isDark(d+1,e+1)&&j++,(0==j||4==j)&&(c+=3)}}for(d=0;b>d;d++){for(e=0;b-6>e;e++){a.isDark(d,e)&&!a.isDark(d,e+1)&&a.isDark(d,e+2)&&a.isDark(d,e+3)&&a.isDark(d,e+4)&&!a.isDark(d,e+5)&&a.isDark(d,e+6)&&(c+=40)}}for(e=0;b>e;e++){for(d=0;b-6>d;d++){a.isDark(d,e)&&!a.isDark(d+1,e)&&a.isDark(d+2,e)&&a.isDark(d+3,e)&&a.isDark(d+4,e)&&!a.isDark(d+5,e)&&a.isDark(d+6,e)&&(c+=40)}}for(k=0,e=0;b>e;e++){for(d=0;b>d;d++){a.isDark(d,e)&&k++}}return l=Math.abs(100*k/b/b-50)/5,c+=10*l}},QRMath={glog:function(a){if(1>a){throw new Error("glog("+a+")")}return QRMath.LOG_TABLE[a]},gexp:function(a){for(;0>a;){a+=255}for(;a>=256;){a-=255}return QRMath.EXP_TABLE[a]},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)},i=0;8>i;i++){QRMath.EXP_TABLE[i]=1<i;i++){QRMath.EXP_TABLE[i]=QRMath.EXP_TABLE[i-4]^QRMath.EXP_TABLE[i-5]^QRMath.EXP_TABLE[i-6]^QRMath.EXP_TABLE[i-8]}for(i=0;255>i;i++){QRMath.LOG_TABLE[QRMath.EXP_TABLE[i]]=i}QRPolynomial.prototype={get:function(a){return this.num[a]},getLength:function(){return this.num.length},multiply:function(a){var c,d,b=new Array(this.getLength()+a.getLength()-1);for(c=0;cf;f++){for(g=c[3*f+0],h=c[3*f+1],i=c[3*f+2],j=0;g>j;j++){e.push(new QRRSBlock(h,i))}}return e},QRRSBlock.getRsBlockTable=function(a,b){switch(b){case QRErrorCorrectLevel.L:return QRRSBlock.RS_BLOCK_TABLE[4*(a-1)+0];case QRErrorCorrectLevel.M:return QRRSBlock.RS_BLOCK_TABLE[4*(a-1)+1];case QRErrorCorrectLevel.Q:return QRRSBlock.RS_BLOCK_TABLE[4*(a-1)+2];case QRErrorCorrectLevel.H:return QRRSBlock.RS_BLOCK_TABLE[4*(a-1)+3];default:return void 0}},QRBitBuffer.prototype={get:function(a){var b=Math.floor(a/8);return 1==(1&this.buffer[b]>>>7-a%8)},put:function(a,b){for(var c=0;b>c;c++){this.putBit(1==(1&a>>>b-c-1))}},getLengthInBits:function(){return this.length},putBit:function(a){var b=Math.floor(this.length/8);this.buffer.length<=b&&this.buffer.push(0),a&&(this.buffer[b]|=128>>>this.length%8),this.length++}};

若要使用可以将以上代码复制到jquery.qrcode.logo.min.js，再在html代码中导入该文件，使用jquery.qrcode.logo.min.js之前务必要导入jquery的源文件。

HTML:

    
    
    
    
    


    
Qrcode
    

    

        
        下载二维码
    

点击下载二位码

我想做得项目需求要求页面点击直接调用浏览器的下载工具，下载二维码图片。

由于要调用浏览器下载，要将上文中qrcode生成的canvas生成下载用的jpg图片，找了很多方法发现很难实现一个方法兼容所有，于是整合了两种方式下载，

方法1：使用html5的画布canvas转换为base64编码流输出，到一个a标签的href中，点击触发download属性下载（该方法无法在IE上使用，由于ie的href支持的字符数较短，好像只有两百多个字符，难以支持一个jpg文件的base64编码结果）；

方法2：正对ie使用blob对象转换canvas对象，然后调用浏览器navigator对象的方法进行下载（该方法在非IE浏览器上无法使用，由于没有msToBlod是IE自创的方法，所有其他浏览器使用会报错，使用try catch进行处理整合两种方法）。

以上方法仅测试Chrome，FIreFox，IE10，如有其他问题可以有针对性的进行处理。

$('#saveQrCode').click(function(){
    var canvas = $('#qrcode').find("canvas").get(0);
    try {//解决IE转base64时缓存不足，canvas转blob下载
        var blob = canvas.msToBlob();
        navigator.msSaveBlob(blob, 'qrcode.jpg');
    } catch (e) {//如果为其他浏览器，使用base64转码下载
        var url = canvas.toDataURL('image/jpeg');
        $("#download").attr('href', url).get(0).click();
    }
    return false;
});

如果有其他解决方法，欢迎相互交流。

参考：

1. https://my.oschina.net/xuwang1993/blog/647291
2. http://blog.csdn.net/gao36951/article/details/48975353

转载于:https://www.cnblogs.com/zhaodazzle/p/6236236.html