jquery.qrceode.jsを用いて二次元コードを生成する.

12993 ワード

技術開発者はどのようにして二次元コードを素早く生成するかを紹介します.jquery.qrcode.jsを使って二次元コードを生成する方式を紹介します.
jquery.qrceode.jsは、クライアントでマトリックス二次元コードQRCodeを生成することができるjqueryプラグインであり、ページ上で二次元バーコードを生成するのに便利である.このプラグインは独立して使うことができます.体積も小さいので、gzipを使って圧縮したら4 kbになりません.
最初の生成は、画像なしの二次元コードである.
準備環境:
jquery-1.8.3.min.js、jquery.qrceode.min.js
jquery.qrceode.min.jsは探しにくくて、直接コードを貼ってみんなに便利です.
(function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.data=a}function o(a,c){this.typeNumber=a;this.errorCorrectLevel=c;this.modules=null;this.moduleCount=0;this.dataCache=null;this.dataList=[]}function q(a,c){if(void 0==a.length)throw Error(a.length+"/"+c);for(var d=0;da||this.moduleCount<=a||0>c||this.moduleCount<=c)throw Error(a+","+c);return this.modules[a][c]},getModuleCount:function(){return this.moduleCount},make:function(){if(1>this.typeNumber){for(var a=1,a=1;40>a;a++){for(var c=p.getRSBlocks(a,this.errorCorrectLevel),d=new t,b=0,e=0;e=d;d++)if(!(-1>=a+d||this.moduleCount<=a+d))for(var b=-1;7>=b;b++)-1>=c+b||this.moduleCount<=c+b||(this.modules[a+d][c+b]=
0<=d&&6>=d&&(0==b||6==b)||0<=b&&6>=b&&(0==d||6==d)||2<=d&&4>=d&&2<=b&&4>=b?!0:!1)},getBestMaskPattern:function(){for(var a=0,c=0,d=0;8>d;d++){this.makeImpl(!0,d);var b=j.getLostPoint(this);if(0==d||a>b)a=b,c=d}return c},createMovieClip:function(a,c,d){a=a.createEmptyMovieClip(c,d);this.make();for(c=0;c=f;f++)for(var i=-2;2>=i;i++)this.modules[b+f][e+i]=-2==f||2==f||-2==i||2==i||0==f&&0==i?!0:!1}},setupTypeNumber:function(a){for(var c=
j.getBCHTypeNumber(this.typeNumber),d=0;18>d;d++){var b=!a&&1==(c>>d&1);this.modules[Math.floor(d/3)][d%3+this.moduleCount-8-3]=b}for(d=0;18>d;d++)b=!a&&1==(c>>d&1),this.modules[d%3+this.moduleCount-8-3][Math.floor(d/3)]=b},setupTypeInfo:function(a,c){for(var d=j.getBCHTypeInfo(this.errorCorrectLevel<<3|c),b=0;15>b;b++){var e=!a&&1==(d>>b&1);6>b?this.modules[b][8]=e:8>b?this.modules[b+1][8]=e:this.modules[this.moduleCount-15+b][8]=e}for(b=0;15>b;b++)e=!a&&1==(d>>b&1),8>b?this.modules[8][this.moduleCount-
b-1]=e:9>b?this.modules[8][15-b-1+1]=e:this.modules[8][15-b-1]=e;this.modules[this.moduleCount-8][8]=!a},mapData:function(a,c){for(var d=-1,b=this.moduleCount-1,e=7,f=0,i=this.moduleCount-1;0g;g++)if(null==this.modules[b][i-g]){var n=!1;f>>e&1));j.getMask(c,b,i-g)&&(n=!n);this.modules[b][i-g]=n;e--; -1==e&&(f++,e=7)}b+=d;if(0>b||this.moduleCount<=b){b-=d;d=-d;break}}}};o.PAD0=236;o.PAD1=17;o.createData=function(a,c,d){for(var c=p.getRSBlocks(a,
c),b=new t,e=0;e8*a)throw Error("code length overflow. ("+b.getLengthInBits()+">"+8*a+")");for(b.getLengthInBits()+4<=8*a&&b.put(0,4);0!=b.getLengthInBits()%8;)b.putBit(!1);for(;!(b.getLengthInBits()>=8*a);){b.put(o.PAD0,8);if(b.getLengthInBits()>=8*a)break;b.put(o.PAD1,8)}return o.createBytes(b,c)};o.createBytes=function(a,c){for(var d=
0,b=0,e=0,f=Array(c.length),i=Array(c.length),g=0;g>>=1;return c},getPatternPosition:function(a){return j.PATTERN_POSITION_TABLE[a-1]},getMask:function(a,c,d){switch(a){case 0:return 0==(c+d)%2;case 1:return 0==c%2;case 2:return 0==d%3;case 3:return 0==(c+d)%3;case 4:return 0==(Math.floor(c/2)+Math.floor(d/3))%2;case 5:return 0==c*d%2+c*d%3;case 6:return 0==(c*d%2+c*d%3)%2;case 7:return 0==(c*d%3+(c+d)%2)%2;default:throw Error("bad maskPattern:"+
a);}},getErrorCorrectPolynomial:function(a){for(var c=new q([1],0),d=0;dc)switch(a){case 1:return 10;case 2:return 9;case s:return 8;case 8:return 8;default:throw Errror("mode:"+a);else if(27>c)swittch(a){case 1:returnse+12:carnse+12:carnse""""""""""""""""""""""""""""""(case 1:carnrererererese""""""""""""""""""""""""""""""""""""""""""""""}else if(41>c)switch(a){case 1:return 14;case 2:return 13;case s:return 16;case 8:return 12;default:throw Error(mode:)+
a);}else throw Error(「type:」+c)、}get LostPoint:function(a){for(var c=a.getModuleCount()、d=0、b=0;b=0;b=g;g++f f(!(0>b+g(=b+g))for(var h=-1;=-1;;;h======+h;+h+0)<+0"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""b+g,e+h)&&f+;5 a)throw Error("glog("++a+");return l.LOGuTABLE[],gexp:function(;0>a=)a+255;for(;256==a])[/EX]TABLE:Aray(256)、
LOG_TABLE:Aray(256)}、m=08>mm+)l.EXP_TABLE[m]=1<m;m+)l.EXP_TABLE[m]=l.EXP_TABLE[m-4]^l.EXP_TABLE[m-5]^l.EXP_TABLE[m-6]^l.EXP_TABLE[m-8]for(m=0;255>m;m+)l.LOG_TABLE[l.EXP BLE[m]=m;q.prototype={get:function(a){return this.num[a]、getLength:function(){return this.num.length}multip:function(a){for(var=Aray(this.getLength)、(+a.geth=1)
                              ( var c=l.glog(this.get(0)-l.glogloggglog(a.get(0),d=Aray(this.getLength()b=0;b>7-a%8&function(1)(progggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggt))))((Biration=================turnthis.length、putBit:function(a){var c=Math.flor(this.length/8);this.buffer.length<=c&this.buffer.psh(0);a&&&&&nbsp;_;=128>>this.length%8);this.length+';「string」==typeof h&(h={text:h]);h=r.exted({}、{render:「canvas」、width:256、height:256、typeNumber:-1、
corectLevel:2,background:「 ffffff」,foreground:「 」,h);returnrn this.each(function(){var a;if("canvas"==h.render){a=new o(h.typeNumber,h.orectLevehhhtttttttch);a.addData( h.text);a.make();var c=docunt c=document.crerettttttttttttttttcrereretttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttd),b=h.width/a.get ModuleCount()、e=h.height/a.get ModuleCount()、f=0;f").css("width",h.width+"px").css("height",h.height",ht+ht",""""."px."(css")バーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバーバードカラー、d=h.h. h. h. h. getModuleCount();b=h.heighht/a.getModuleCount();b=a.getModuleCount/a.getModuleCount(apeppdedededededededededededededededededex))))、(((=aapeppppppppppppdedededededededededededededededex=ap=ap=ap=ap=ap=ap=apepppp(「width」、
d+「px」).css(「background-」,a.isDark(e,i)?h.foreground:h.background).apped To(f)=a=c;jQuery(a).apendTo(this))))))))))(jQuery);
htmlコードは以下の通りです Zero Clipboard Test function generateQRCode(rendermethod, picwidth, picheight, url) { $("#qrcode").qrcode({ render: rendermethod, // table (IE ) canvas width: picwidth, // height:picheight, // text: utf16to8(url), // typeNumber:-1,// correctLevel:2,// background:"#ffffff",// foreground:"#000000" // }); } function init() { generateQRCode("table",200, 200, " "); } // 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; }

第二は、画像を生成する二次元コードである.
環境は以下の通りです.jquery-1.8.3.min.js、excanvas.mpiled.js、jquery.qrceode.min.js.
htmlコードは以下の通りです Zero Clipboard Test function generateQRCode(rendermethod, picwidth, picheight, url) { $("#qrcode").qrcode({ render: rendermethod, // table (IE ) canvas width: picwidth, // height:picheight, // text: utf16to8(url), // typeNumber:-1,// correctLevel:2,// background:"#ffffff",// foreground:"#000000" // }); } function init() { generateQRCode("table",200, 200, " "); var margin = ($("#qrcode").height()-$("#codeico").height())/2; $("#codeico").css("margin",margin); } // 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; }