現在掃描二維碼已經很普遍，微信掃一掃即可，但是如果二維碼是在自己的手機上呢？那就要用到微信里的一個功能了，手指長按二維碼，會彈出自動識別的選項，點確定就可以看到二維碼的內容了。那么怎么通過前端實現這個長按自動識別這個功能呢？
首先我們需要知道利用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>