jQuery implements WeChat long press recognition QR code function

I have been working on a WeChat development project recently, and it is finally almost completed. Today I took some time to record the solution to the problem that the QR code generated by jquery.qrcode.min.js was not recognized when long pressed during the project development process. Method, hope it helps everyone!

1.Introduce JS library

<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.Create an empty div on the page;

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

3.Generate QR code

$("#qrDiv").qrcode({
width: 120, //宽度
height:120, //高度
text: "需要生成的二维码内容" //任意内容
});

Note: The QR code generated at this time has no response in Changan in WeChat, because the qrcode generates canvas tags instead of img tags

4. Convert canvas tag to img tag

//从 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

Note: After completing the above steps, you can long press and identify it in WeChat

The above is given by the editor The jQuery introduced by you implements the function of long-press recognition of QR codes on WeChat. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more articles related to jQuery’s implementation of WeChat’s long press recognition QR code function, please pay attention to the PHP Chinese website!