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

最新推荐文章于 2024-08-04 20:07:09 发布

爱长发的短发小二哥

最新推荐文章于 2024-08-04 20:07:09 发布

阅读量7.6k

点赞数 1

文章标签： web前端移动开发前端

学习标签： jquery 二维码

本文导读：在Web编程中，有时需要生成二维码，可以使用第三方插件jquery.qrcode，但是jquery.qrcode插件生成的是个canvas标签而不是img标签，在微信中长按不能够识别出二维码。下面介绍解决方法

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> 

<div id="code"></div> 

<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);

$('#imagQrDiv').append(img);//imagQrDiv表示你要插入的容器id