jQuery實現微信長按識別二維碼功能_jquery

最近一直在搞一個微信開發的項目，終於快要完工了，今天小編抽個時間記錄下在項目開發過程中遇到jquery.qrcode.min.js產生二維碼長按不識別的解決方案，希望對大家有所協助！

1.引入JS庫

<script src="jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.qrcode.min.js" type="text/javascript" charset="utf-8"></script>

2.在頁面建立一個空的div;

<div id="qrDiv"></div>

3.產生二維碼

$("#qrDiv").qrcode({ width: 120, //寬度 height:120, //高度 text: "需要產生的二維碼內容" //任意內容 });

注意：這個時候產生的二維碼在微信中長安沒任何反應，因為qrcode產生的是canvas標籤而不是img標籤

4.將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; } //擷取網頁中的canvas對象 var mycanvas1=document.getElementsByTagName('canvas')[0]; //將轉換後的img標籤插入到html中 var img=convertCanvasToImage(mycanvas1); $('#imagQrDiv').append(img);//imagQrDiv表示你要插入的容器id

注意：完成上述步驟後就可以在微信中長按識別了

以上所述是小編給大家介紹的jQuery實現微信長按識別二維碼功能，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！