QR_code.js

//--------------------------------使用jq插件生成二维码------------------------------------//
//引入jquery.js和jquery-qrcode-0.14.0.min.js
//（jq有很多二维码生成插件，但是好多不能在二维码上添加图片，以上插件找了好久，能够满足所有二维码需求）
//可以去研究一下：详细查看：https://larsjung.de/jquery-qrcode/
//我所总结的只是程序种最常用的一种形式（如果需要扩展请访问以上网站!!!!）

//html中添加标签:


 


//js调用代码:

$("#code").qrcode({ 
    ecLevel: "H",//误差校正
    size: 200,//二维码大小
    mode:4,//添加图片样式（图片在正中间）
    mSize:0.2,//图片大小
    image: $('#img-buffer')[0], //图片标签  
    text: '张梦杰',//任意内容  （需要生成二维码的内容）      
}); 
//----------------------------------------------------------------------------------------
//注意：一般配合弹框使用更好！（canvas的二维码只起到了扫描功能）
//将canvas生成图片格式：
//（为什么要将生成的二维码转换成为图片格式，因为用canvas生成的二维码不能
//保存为图片以及分享和自动识别二维码，转化成图片格式就可以了。）

var img = $('canvas').get(0).toDataURL("image/png")//将二维码转换成图片格式
$("body img").attr("src",img)//将转换成的图片放到img标签中显示
----------------------------------------------------------------------------------------

//注：实际项目中的部分代码（仅供参考）
//项目逻辑：
//1.将带有推广人信息的链接生成二维码，二维码上面要有公司log，
//2.推广人可以双击查看图片，长按下载图片

//html代码：（使用的是html+weui框架）
    
 
        
   
    
    点击可查看详情 
    
  
        
   
    
     
     
     
    
  
        
   
   
这是您的推广二维码
 
   （双击查看原图 , 长按保存图片） 
  
    
 
    
 
    
//js代码：
 $(function(){
        var link = '我是张梦杰',img = $('#img-buffer');
        //生成二维码
        $('.cod strong').html('')
        $("#code").qrcode({ 
            //误差校正
            ecLevel: "H",
            size: 200, 
            mode:4,
            mSize:0.2,
            image: $('#img-buffer')[0],   
            text: link,//任意内容        
        }); 
        //将生成的二维码转化成图片
        var img = $('canvas').get(0).toDataURL("image/png")
        $("#cod_img").attr("src",img)
        //点击查看原图
        var $gallery = $("#gallery"), $galleryImg = $("#galleryImg");
        //自写双击事件
        var i = 0;
        $('#cod_img').on('click', function () {
            i++;
            setTimeout(function () {
                i = 0;
            }, 500);
            if (i > 1) {
                $gallery.fadeIn(100);
                $galleryImg.attr('style','background-image:url('+img+');background-size: 90%;')
                i = 0;
            }
        })
        $gallery.on("click", function(){
            $gallery.fadeOut(100);
        });
    })
//以上代码基本上涵盖了二维码的生成以及转化使用等过程，
//详细自写双击事件请访问：http://git.oschina.net/hjm100/codes/1l0johf9dxwkq5py3izrs27