页面生成二维码

关于页面生成二维码

二维码生成方式很多种,在比较便捷的角度来看我选择在页面直接生成,不必调用后台方法,接下来把具体的生成方式记录下来。

1.需要引入的js

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.js"></script>
<script type="text/javascript" src="js/utf.js"></script>

第一个就不需要解释了，第二个是用来生成二维码，第三个是转译二维码种包含的中文

2.页面设置生成二维码的区域，这里简单用一个div展示

<div id="qrcode"></div>

3.实现的js代码

$(document).ready(function () {
   
        $("#qrcode").qrcode({
            render: "canvas",        //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
            text: "扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接，都ok！",    //扫描二维码信息
            width: "200",             //二维码的宽度
            height: "200",            //二维码的高度
            background: "#ffffff",    //二维码的后景色
            foreground: "#000000"     //二维码的前景色
            src: 'img/logo.png'       //二维码中间的图片
        });
    });

如此简便
附上两个js代码，随意copy

jquery.qrcode.js

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<a.length&&0==a[c];){
        c++
    }
    for(this.num=new Array(a.length-c+b),d=0;d<a.length-c;d++){
        this.num[d]=a[d+c]
    }
}
function QRRSBlock(a,b){
   
    this.totalCount=a,
    this.dataCount=b
}
function QRBitBuffer(){
   
    this.buffer=new Array(),
    this.length=0
}
var QRMode,QRErrorCorrectLevel,QRMaskPattern,QRUtil,QRMath,i;
for(function(a){
   
    a.fn.qrcode=function(b){
   
        var c,d;
        return"string"==typeof b&&(b={text:b}),
        b=a.extend({},{
            render:"canvas",
            width:256,
            height:256,
            //这里是图片的高度和宽度
            imgWidth:b.width/4.7,
            imgHeight:b.height/4,
            typeNumber:-1,
            correctLevel:QRErrorCorrectLevel.H,
            background:"#ffffff",
            foreground:"#000000"
         },b),c=function(){
   
            var c,d,e,f,g,h,i,j,k,a=new QRCode(b.typeNumber,b.correctLevel);
            for(a.addData(utf16to8(b.text)),a.make(),
                    c=document.createElement("canvas"),
                    c.width=b.width,c.height=b.height,d=c.getContext("2d"),
                    b.src&&(e=new Image(),e.src=b.src,e.onload=function(){
   
                        d.drawImage(e,(b.width-b.imgWidth)/2,(b.height-b.imgHeight)/2,
                                b.imgWidth,b.imgHeight)}),f=b.width/a.getModuleCount(),
                                g=b.height/a.getModuleCount(),h=0;h<a.getModuleCount();h++)
            {
  for(i=0;i<a.getModuleCount();i++){
                d.fillStyle=a.isDark(h,i)?b.foreground:b.background,
                        j=Math.ceil((i+1)*f)-Math.floor(i*f),
                        k=Math.ceil((h+1)*f)-Math.floor(h*f),
                        d.fillRect(Math.round(i*f),Math.round(h*g),j,k)
                        }}return c},
                        d=function(){
   var d,e,f,g,h,i,
                            c=new QRCode(b.typeNumber,b.correctLevel);
                        //这里的utf16to8(b.text)是对Text中的字符串进行转码，让其支持中文
                        for(c.addData(utf16to8(b.text)),c.make(),d=a("<table></table>").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<c.getModuleCount();g++){
  for(h=a("<tr></tr>").css("height",f+"px").appendTo(d),i=0;i<c.getModuleCount();i++){a("<td></td>").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;b<this.data.length;b++){a.put(this.data.charCodeAt(b),8)}}},QRCode.prototype={addData:function(a){
   var b=new QR8bitByte(a);this.dataList.push(b),this.dataCache=null},isDark:function(a,b){
   if(0>a||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<b.length;e++){d+=b[e].dataCount}for(e=0;e<this.dataList.length;e++){f=this.dataList[e],c.put(f.mode,4),c.put(f.getLength(),QRUtil.getLengthInBits(f.mode,a)),f.write(c)}if(c.getLengthInBits()<=8*d){
  break}}this.typeNumber=a}this.makeImpl(!1,this.getBestMaskPattern())},makeImpl:function(a,b){
   var c,d;for(this.moduleCount=4*this.typeNumber+17,this.modules=new Array(this.moduleCount),c=0;c<this.moduleCount;c++){
  for(this.modules[c]=new Array(this.moduleCount),d=0;d<this.moduleCount;d++){
  this.modules[c][d]=null}}this.setupPositionProbePattern(0,0),this.setupPositionProbePattern(this.moduleCount-7,0),this.setupPositionProbePattern(0,this.moduleCount-7),this.setupPositionAdjustPattern(),this.setupTimingPattern(),this.setupTypeInfo(a,b),this.typeNumber>=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),(