For WeChat’s built-in browser, it is to implement a contextMenu, make a judgment context.MediaType, and paste the code for the right-click picture menu in the chrome extension. You can view it as the pseudo code implemented by WeChat

chrome.contextMenus.create
        title: "Send to chat"
        contexts: ['image']
        onclick: send2chat
chrome.contextMenus.create
        title: "Save to phone"
        contexts: ['image']
        onclick: save2phone
...

As for why you know it is a QR code, when you long press the picture, you will find that the first three menu options pop up first, and scanning the QR code will pop up after a pause of about 1 second. During this time, WeChat’s built-in browser uses an algorithm to determine whether the image is a QR code. If so, add a “Scan QR code” option to the long press menu. Of course, if you want to know the specific “how to determine a QR code” "Does this picture contain a QR code?" Then we have to talk about the positioning point of the QR code and the error correction mechanism. I won't mention it here. You can google it yourself and I will give you a small ladder.

As for why the absolute positioning does not pop up, it should be a style problem, which causes the image to have no height and its longPress event is not triggered. You can take a look at the details and leave a message if you have any questions

I also encountered this problem more than 40 days ago,
I found that as long as the left and top of this image are greater than 150 pixels from the 0,0 position of the body, there will be no response when long pressing the image,

No matter how I set p or postion, it doesn’t work,

I had no choice but to work on my project at the time. In order to solve the problem, I made the QR code into a large transparent png starting from the upper left corner of the body. This test is OK

But now I have encountered this problem in another project, but this time I can’t solve it this way, hey,

But this time I saw a lot of the same problems online. But it’s not solved yet!

The WeChat client under iOS has a bug when long pressing to recognize QR codes. For details, please see here http://devework.com/weixin-qrcode-bug2.html

<meta name="viewport" content="width=640,target-densitydpi=device-dpi,user-scalable=no" />This is wrong, you can't use this, you need to use<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />, otherwise the identification should be as follows: If you don’t believe it, you can find it by just pressing and holding your phone anywhere on the screen