如图哎。前端实现,无性能压力。
具体实现明儿更新,困炸了。
+=======================
更新:
复制以下代码至你想要添加二维码的页面
<div class="col-md-3 qr_code" id="qr_code"></div>
<script type="text/javascript">
var container1 = document.getElementById('qr_code');
var dataUriPngImage = document.createElement("img"),
u = window.location.href,
s = QRCode.generatePNG(u, {
ecclevel: "M",//容错率
format: "html",
fillcolor: "#FFFFFF",//底色
textcolor: "#373737",
margin: 2,//边距
modulesize: 4//生成大小
});
dataUriPngImage.src = s;
container1.appendChild(dataUriPngImage);
</script>
复制以下代码,新建js,并且引入页面。
!function(r,t,e){r[t]=e()}("undefined"!=typeof window?window:this,"QRCode",function(){for(var r=[null,[[10,7,17,13],[1,1,1,1],[]],[[16,10,28,22],[1,1,1,1],[4,16]],[[26,15,22,18],[1,1,2,2],[4,20]],[[18,20,16,26],[2,1,4,2],[4,24]],[[24,26,22,18],[2,1,4,4],[4,28]],[[16,18,28,24],[4,2,4,4],[4,32]],[[18,20,26,18],[4,2,5,6],[4,20,36]],[[22,24,26,22],[4,2,6,6],[4,22,40]],[[22,30,24,20],[5,2,8,8],[4,24,44]],[[26,18,28,24],[5,4,8,8],[4,26,48]],[[30,20,24,28],[5,4,11,8],[4,28,52]],[[22,24,28,26],[8,4,11,10],[4,30,56]],[[22,26,22,24],[9,4,16,12],[4,32,60]],[[24,30,24,20],[9,4,16,16],[4,24,44,64]],[[24,22,24,30],[10,6,18,12],[4,24,46,68]],[[28,24,30,24],[10,6,16,17],[4,24,48,72]],[[28,28,28,28],[11,6,19,16],[4,28,52,76]],[[26,30,28,28],[13,6,21,18],[4,28,54,80]],[[26,28,26,26],[14,7,25,21],[4,28,56,84]],[[26,28,28,30],[16,8,25,20],[4,32,60,88]],[[26,28,30,28],[17,8,25,23],[4,26,48,70,92]],[[28,28,24,30],[17,9,34,23],[4,24,48,72,96]],[[28,30,30,30],[18,9,30,25],[4,28,52,76,100]],[[28,30,30,30],[20,10,32,27],[4,26,52,78,104]],[[28,26,30,30],[21,12,35,29],[4,30,56,82,108]],[[28,28,30,28],[23,12,37,34],[4,28,56,84,112]],[[28,30,30,30],[25,12,40,34],[4,32,60,88,116]],[[28,30,30,30],[26,13,42,35],[4,24,48,72,96,120]],[[28,30,30,30],[28,14,45,38],[4,28,52,76,100,124]],[[28,30,30,30],[29,15,48,40],[4,24,50,76,102,128]],[[28,30,30,30],[31,16,51,43],[4,28,54,80,106,132]],[[28,30,30,30],[33,17,54,45],[4,32,58,84,110,136]],[[28,30,30,30],[35,18,57,48],[4,28,56,84,112,140]],[[28,30,30,30],[37,19,60,51],[4,32,60,88,116,144]],[[28,30,30,30],[38,19,63,53],[4,28,52,76,100,124,148]],[[28,30,30,30],[40,20,66,56],[4,22,48,74,100,126,152]],[[28,30,30,30],[43,21,70,59],[4,26,52,78,104,130,156]],[[28,30,30,30],[45,22,74,62],[4,30,56,82,108,134,160]],[[28,30,30,30],[47,24,77,65],[4,24,52,80,108,136,164]],[[28,30,30,30],[49,25,81,68],[4,28,56,84,112,140,168]]],t=0,e=1,n=2,a=4,o=8,u=/^\d*$/,l=/^[A-Za-z0-9 $%*+\-./:] * $ /,i=/^[A-Z0-9 $%*+\-./:] * $ /,f=1,c=0,s=3,h=2,v=[],p=[-1],g=0,d=1;255>g;++g)v.push(d),p[d]=g,d=2*d^(128>d?0:285);for(var m=[[]],g=0;30>g;++g){for(var w=m[g],b=[],x=0;g>=x;++x){var F=g>x?v[w[x]]:0,A=v[(g+(w[x-1]||0))%255];b.push(p[F^A])}m.push(b)}for(var C={},g=0;45>g;++g)C["0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:".charAt(g)]=g;var N=[function(r,t){return(r+t)%2==0},function(r){return r%2==0},function(r,t){return t%3==0},function(r,t){return(r+t)%3==0},function(r,t){return((r/2|0)+(t/3|0))%2==0},function(r,t){return r*t%2+r*t%3==0},function(r,t){return(r*t%2+r*t%3)%2==0},function(r,t){return((r+t)%2+r*t%3)%2==0}],S=function(r){return r>6},y=function(r){return 4*r+17},M=function(t){var e=r[t],n=16*t*t+128*t+64;return S(t)&&(n-=36),e[2].length&&(n-=25*e[2].length*e[2].length-10*e[2].length-55),n},E=function(t,e){var n=-8&M(t),a=r[t];return n-=8*a[0][e]*a[1][e]},k=function(r,t){switch(t){case e:return 10>r?10:27>r?12:14;case n:return 10>r?9:27>r?11:13;case a:return 10>r?8:16;case o:return 10>r?8:27>r?10:12}},L=function(r,t,u){var l=E(r,u)-4-k(r,t);switch(t){case e:return 3*(l/10|0)+(4>l?0:7>l?1:2);case n:return 2*(l/11|0)+(6>l?0:1);case a:return l/8|0;case o:return l/13|0}},R=function(r,t){switch(r){case e:return t.match(u)?t:null;case n:return t.match(l)?t.toUpperCase():null;case a:if("string"==typeof t){for(var o=[],i=0;i<t.length;++i){var f=t.charCodeAt(i);128>f?o.push(f):2048>f?o.push(192|f>>6,128|63&f):65536>f?o.push(224|f>>12,128|f>>6&63,128|63&f):o.push(240|f>>18,128|f>>12&63,128|f>>6&63,128|63&f)}return o}return t}},$=function(r,o,u,l){var i=[],f=0,c=8,s=u.length,h=function(r,t){if(t>=c){for(i.push(f|r>>(t-=c));t>=8;)i.push(r>>(t-=8)&255);f=0,c=8}t>0&&(f|=(r&(1<<t)-1)<<(c-=t))},v=k(r,o);switch(h(o,4),h(s,v),o){case e:for(var p=2;s>p;p+=3)h(parseInt(u.substring(p-2,p+1),10),10);h(parseInt(u.substring(p-2),10),[0,4,7][s%3]);break;case n:for(var p=1;s>p;p+=2)h(45*C[u.charAt(p-1)]+C[u.charAt(p)],11);s%2==1&&h(C[u.charAt(p-1)],6);break;case a:for(var p=0;s>p;++p)h(u[p],8)}for(h(t,4),8>c&&i.push(f);i.length+1<l;)i.push(236,17);return i.length<l&&i.push(236),i},z=function(r,t){for(var e=r.slice(0),n=r.length,a=t.length,o=0;a>o;++o)e.push(0);for(var o=0;n>o;){var u=p[e[o++]];if(u>=0)for(var l=0;a>l;++l)e[o+l]^=v[(u+t[l])%255]}return e.slice(n)},G=function(r,t,e){for(var n=[],a=r.length/t|0,o=0,u=t-r.length%t,l=0;u>l;++l)n.push(o),o+=a;for(var l=u;t>l;++l)n.push(o),o+=a+1;n.push(o);for(var i=[],l=0;t>l;++l)i.push(z(r.slice(n[l],n[l+1]),e));for(var f=[],c=r.length/t|0,l=0;c>l;++l)for(var s=0;t>s;++s)f.push(r[n[s]+l]);for(var s=u;t>s;++s)f.push(r[n[s+1]-1]);for(var l=0;l<e.length;++l)for(var s=0;t>s;++s)f.push(i[s][l]);return f},U=function(r,t,e,n){for(var a=r<<n,o=t-1;o>=0;--o)a>>n+o&1&&(a^=e<<o);return r<<n|a},D=function(t){for(var e=r[t],n=y(t),a=[],o=[],u=0;n>u;++u)a.push([]),o.push([]);var l=function(r,t,e,n,u){for(var l=0;e>l;++l)for(var i=0;n>i;++i)a[r+l][t+i]=u[l]>>i&1,o[r+l][t+i]=1};l(0,0,9,9,[127,65,93,93,93,65,383,0,64]),l(n-8,0,8,9,[256,127,65,93,93,93,65,127]),l(0,n-8,9,8,[254,130,186,186,186,130,254,0,0]);for(var u=9;n-8>u;++u)a[6][u]=a[u][6]=1&~u,o[6][u]=o[u][6]=1;for(var i=e[2],f=i.length,u=0;f>u;++u)for(var c=0==u||u==f-1?1:0,s=0==u?f-1:f,h=c;s>h;++h)l(i[u],i[h],5,5,[31,17,21,17,31]);if(S(t))for(var v=U(t,6,7973,12),p=0,u=0;6>u;++u)for(var h=0;3>h;++h)a[u][n-11+h]=a[n-11+h][u]=v>>p++&1,o[u][n-11+h]=o[n-11+h][u]=1;return{matrix:a,reserved:o}},H=function(r,t,e){for(var n=r.length,a=0,o=-1,u=n-1;u>=0;u-=2){6==u&&--u;for(var l=0>o?n-1:0,i=0;n>i;++i){for(var f=u;f>u-2;--f)t[l][f]||(r[l][f]=e[a>>3]>>(7&~a)&1,++a);l+=o}o=-o}return r},I=function(r,t,e){for(var n=N[e],a=r.length,o=0;a>o;++o)for(var u=0;a>u;++u)t[o][u]||(r[o][u]^=n(o,u));return r},P=function(r,t,e,n){for(var a=r.length,o=21522^U(e<<3|n,5,1335,10),u=0;15>u;++u){var l=[0,1,2,3,4,5,7,8,a-7,a-6,a-5,a-4,a-3,a-2,a-1][u],i=[a-1,a-2,a-3,a-4,a-5,a-6,a-7,a-8,7,5,4,3,2,1,0][u];r[l][8]=r[8][i]=o>>u&1}return r},Q=function(r){for(var t=3,e=3,n=40,a=10,o=function(r){for(var e=0,a=0;a<r.length;++a)r[a]<5||(e+=t+(r[a]-5));for(var a=5;a<r.length;a+=2){var o=r[a];r[a-1]!=o||r[a-2]!=3*o||r[a-3]!=o||r[a-4]!=o||r[a-5]<4*o&&r[a+1]<4*o||(e+=n)}return e},u=r.length,l=0,i=0,f=0;u>f;++f){var c,s=r[f];c=[0];for(var h=0;u>h;){var v;for(v=0;u>h&&s[h];++v)++h;for(c.push(v),v=0;u>h&&!s[h];++v)++h;c.push(v)}l+=o(c),c=[0];for(var h=0;u>h;){var v;for(v=0;u>h&&r[h][f];++v)++h;for(c.push(v),v=0;u>h&&!r[h][f];++v)++h;c.push(v)}l+=o(c);var p=r[f+1]||[];i+=s[0];for(var h=1;u>h;++h){var g=s[h];i+=g,s[h-1]==g&&p[h]===g&&p[h-1]===g&&(l+=e)}}return l+=a*(Math.abs(i/u/u-.5)/.05|0)},T=function(t,e,n,a,o){var u=r[e],l=$(e,n,t,E(e,a)>>3);l=G(l,u[1][a],m[u[0][a]]);var i=D(e),f=i.matrix,c=i.reserved;if(H(f,c,l),0>o){I(f,c,0),P(f,c,a,0);var s=0,h=Q(f);for(I(f,c,0),o=1;8>o;++o){I(f,c,o),P(f,c,a,o);var v=Q(f);h>v&&(h=v,s=o),I(f,c,o)}o=s}return I(f,c,o),P(f,c,a,o),f},Z={generate:function(r,t){var o={numeric:e,alphanumeric:n,octet:a},l={L:f,M:c,Q:s,H:h};t=t||{};var v=t.version||-1,p=l[(t.ecclevel||"L").toUpperCase()],g=t.mode?o[t.mode.toLowerCase()]:-1,d="mask"in t?t.mask:-1;if(0>g)g="string"==typeof r?r.match(u)?e:r.match(i)?n:a:a;else if(g!=e&&g!=n&&g!=a)throw"invalid or unsupported mode";if(r=R(g,r),null===r)throw"invalid data format";if(0>p||p>3)throw"invalid ECC level";if(0>v){for(v=1;40>=v&&r.length>L(v,g,p);++v);if(v>40)throw"too large data"}else if(1>v||v>40)throw"invalid version";if(-1!=d&&(0>d||d>8))throw"invalid mask";return T(r,v,g,p,d)},generateHTML:function(r,t){t=t||{};for(var e=t.fillcolor?t.fillcolor:"#FFFFFF",n=t.textcolor?t.textcolor:"#000000",a=Z.generate(r,t),o=Math.max(t.modulesize||5,.5),u=Math.max(null!==t.margin?t.margin:4,0),l=document.createElement("div"),i=a.length,f=['<table border="0" cellspacing="0" cellpadding="0" style="border:'+o*u+"px solid "+e+";background:"+e+'">'],c=0;i>c;++c){f.push("<tr>");for(var s=0;i>s;++s)f.push('<td style="width:'+o+"px;height:"+o+"px"+(a[c][s]?";background:"+n:"")+'"></td>');f.push("</tr>")}l.className="qrcode";var h=document.createRange();h.selectNodeContents(l);var v=h.createContextualFragment(f.join("")+"</table>");return l.appendChild(v),l},generateSVG:function(r,t){t=t||{};var e=t.fillcolor?t.fillcolor:"#FFFFFF",n=t.textcolor?t.textcolor:"#000000",a=Z.generate(r,t),o=a.length,u=Math.max(t.modulesize||5,.5),l=Math.max(t.margin?t.margin:4,0),i=u*(o+2*l),f=document.createElementNS("","svg");f.setAttribute("viewBox","0 0 "+i+" "+i),f.setAttribute("style","shape-rendering:crispEdges");var c=document.createDocumentFragment(),s=document.createElementNS("","style");s.appendChild(document.createTextNode(".bg{fill:"+e+"}.fg{fill:"+n+"}")),s.setAttribute("scoped","scoped"),c.appendChild(s);var h=function(r,t,e,n,a){var o=document.createElementNS("","rect")||"";return o.setAttributeNS(null,"class",r),o.setAttributeNS(null,"fill",t),o.setAttributeNS(null,"x",e),o.setAttributeNS(null,"y",n),o.setAttributeNS(null,"width",a),o.setAttributeNS(null,"height",a),o};c.appendChild(h("bg","none",0,0,i));for(var v=l*u,p=0;o>p;++p){for(var g=l*u,d=0;o>d;++d)a[p][d]&&c.appendChild(h("fg","none",g,v,u)),g+=u;v+=u}return f.appendChild(c),f},generatePNG:function(r,t){t=t||{};var e,n=t.fillcolor?t.fillcolor:"#FFFFFF",a=t.textcolor?t.textcolor:"#000000",o=Z.generate(r,t),u=Math.max(t.modulesize||5,.5),l=Math.max(null!=t.margin?t.margin:4,0),i=o.length,f=u*(i+2*l),c=document.createElement("canvas");if(c.width=c.height=f,e=c.getContext("2d"),!e)throw"canvas support is needed for PNG output";e.fillStyle=n,e.fillRect(0,0,f,f),e.fillStyle=a;for(var s=0;i>s;++s)for(var h=0;i>h;++h)o[s][h]&&e.fillRect(u*(l+h),u*(l+s),u,u);return c.toDataURL()}};return Z});
至此完成!