Canvas与Image互相转换示例以及利用该技术实现微信长按自动识别二维码功能
现在扫描二维码已经很普遍，微信扫一扫即可，但是如果二维码是在自己的手机上呢？那就要用到微信里的一个功能了，手指长按二维码，会弹出自动识别的选项，点确定就可以看到二维码的内容了。那么怎么通过前端实现这个长按自动识别这个功能呢？
首先我们需要知道利用jquery的二维码生成插件jquery.qrcode.min.js，制作的二维码是在canvas元素中的。而微信中我们点击的那个二维码则是img元素。这时，我们就会想，只要把canvas中的二维码转换成img形式，不就可以啦。没错，就是这么简单！
下面先来普及一下canvas和image互相转换的知识：
1. 把img转换为canvas对象
function convertImageToCanvas(image){ //创建canvas DOM对象,并设置其宽高和图片一样 var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; //坐标(0,0)表示从此处开始绘制,相当于偏移 canvas.getContext("2d").drawImage(image,0,0); return canvas; }
2. 把canvas转换为img
// 从canvas提取图片image function convertCanvasToImage(canvas){ //新Image对象,可以理解为DOM; var image = new Image(); //canvas.toDataURL返回的是一串Base64编码的URL,当然,浏览器自己肯定支持 //指定格式PNG image.src = canvas.toDataURL("image/png"); return image; }
示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas与Image互相转换示例</title> </head> <body> <img src="./list-icon-5.png" alt="" id="photo" width="17" height="24"> <div id="canvasDiv" style="width: 300px; height: 30px;"></div> <div id="convertedImg"></div> <script src="./jquery-1.11.3.min.js"></script> <script> $(function(){ // 把image转换为canvas对象 var photo = document.getElementById('photo');//这个必须用原生 var cDiv = convertImageToCanvas(photo); $("#canvasDiv").append(cDiv); // image-->canvas function convertImageToCanvas(image){ //创建canvas DOM对象,并设置其宽高和图片一样 var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; //坐标(0,0)表示从此处开始绘制,相当于偏移 canvas.getContext("2d").drawImage(image,0,0); return canvas; } // 把canvas转换为image的 var myCanvas = document.getElementsByTagName("canvas")[0]; var img = convertCanvasToImage(myCanvas); $("#convertedImg").append(img); // canvas-->image function convertCanvasToImage(canvas){ //新Image对象,可以理解为DOM; var image = new Image(); //canvas.toDataURL返回的是一串Base64编码的URL,当然,浏览器自己肯定支持 //指定格式PNG image.src = canvas.toDataURL("image/png"); return image; } }); </script> </body> </html>
效果如下：
那么实现微信长按二维码识别的功能就很简单了，直接上代码吧~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery实现微信长按识别二维码功能</title> <script src="./jquery-1.11.3.min.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script> </head> <body> <!--canvas中的二维码--> <div id="qrDiv" style="display: none;"></div> <!--image形式的二维码--> <div id="imgDiv"></div> <script> $(function(){ //利用插件生成二维码,生成的二维码在canvas中 $('#qrDiv').qrcode({ width: 120, height:120, text: "https://www.baidu.com/" }); //从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); $('#imgDiv').append(img);//imgDiv表示你要插入的容器id }) </script> </body> </html>
