您的位置:首页 > Web前端 > jquery > 正文

jquery实现微信中长按识别二维码

更多 时间:2017-3-5 类别:Web前端 浏览量:761

jquery实现微信中长按识别二维码

jquery实现微信中长按识别二维码

jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码。

一、下载jquery.qrcode.js文件

下载地址:http://jeromeetienne.github.io/jquery-qrcode/

 

二、使用jquery.qrcode页面中生成二维码

 

  • HTML 代码   复制
  • 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="jquery.qrcode.min.js"></script> 
    
    <li id="code"></li> 
    
    <script type="text/javascript" src="jquery.js"></
    $("#code").qrcode({ 
        render:"table", //设置渲染方式,qrcode支持canvas和table两种方式进行渲染,默认使用canvas方式 
        width:200, //设置宽度 
        height:200, //设置高度 
        background:"#ffffff",//背景颜色  
        foreground:"#000000",//前景颜色  
        typeNumber: -1,    //计算模式
        correctLevel: QRErrorCorrectLevel.H,//纠错等级
        text:"http://www.studyofnet.com" //任意内容 
    });
    </script> 
    
    		
  •  

    三、实现微信中长按识别二维码

    1、这个时候生成的二维码在微信中长安没任何反应,因为qrcode生成的是canvas标签而不是img标签

    2、将canvas标签转换为img标签

     

  • JScript 代码   复制
  • 
    //从 canvas 提取图片 image
    function convertCanvasToImage(canvas) {
        //新Image对象,可以理解为DOM
        var image = new Image();
        // canvas.toDataURL 返回的是一串Base64编码的URL,当然,浏览器自己肯定支持
        // 指定格式 PNG
        image.src = canvas.toDataURL("image/png");
        return image;
    }
    
    //获取网页中的canvas对象
    
    var mycanvas1=document.getElementsByTagName('canvas')[0];
    
    //将转换后的img标签插入到html中
    
    var img=convertCanvasToImage(mycanvas1);
    
    $('#imagQrli').append(img);//imagQrli表示你要插入的容器id
    
    		
  •  

    标签:jquery 二维码