Wechat web page long press the QR code picture can pop up menu is how to achieve?

how to realize the menu of collecting, saving and identifying the QR code in the picture by pressing the QR code picture in Wechat"s web page?
Why does one of the same pictures pop up without adding absolute positioning and the other without adding anything?

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<meta name="viewport" content="width=640,target-densitydpi=device-dpi,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
</head>
<body>
<div><img src="img/qr.jpg" alt="" /></div>
<div style="position:absolute; top:660px; left:225px; z-index:1000;"><img src="img/qr.jpg" alt="" /></div>
</body>
</html>

Front-end Wechat-develops html5

Mar.14,2021

for Wechat's built-in browser, it is to implement a contextMenu , judge context.MediaType , and post a code for right-click picture menu in the chrome extension. You can look at it as 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 that he is a QR code, when you press the picture for a long time, you find that the first three menu options pop up first, and the scan QR code pops up after about 1 second. During this period of time, Wechat's built-in browser uses an algorithm to determine whether the picture is a QR code. If so, add an option of "scan QR code" to the long press menu, of course. If you want to know the specific "how to determine whether a picture contains a QR code?" , then we have to talk about the positioning point of the QR code and the error correction mechanism. Omitting the table here, you can google, to give you a ladder .

about why the absolute location does not pop up, it should be a problem with the style, which causes the picture to have no height and does not trigger his longPress event. You can take a look at it and leave a message

if you have any questions.

< meta name= "viewport" content= "width=640,target-densitydpi=device-dpi,user-scalable=no" / > this is a mistake. You can't use this. Use < meta name= "viewport" content= "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" / >, otherwise you can identify it according to the one below. If you don't believe it, you can simply press the phone around the screen and find it

I find that sometimes my long button only pops up save and cancel menus, but sometimes there are very complete menus that pop up, such as sending to friends, saving, collecting, identifying QR codes, and canceling. I don't know what happened, but I also set the width and height of the picture.

more than 40 days ago, I also encountered the same problem,
It is found that there is no response as long as the left,top of this picture is more than 150 pixels after pressing the picture.

No matter how much I set up DIV, no matter how I set up postion,

but my project at that time, in order to solve the problem, I made that QR code into a large transparent png and started with the upper left corner of body, so I tested OK

but now another project has encountered this problem, but this time it cannot be solved in this way, hey,

but this time I saw a lot of the same problems on the Internet. But it hasn't been solved!

Wechat client under

iOS has bug, when long press to identify the QR code. For more information, please see http://devework.com/weixin-qrcode-bug2.html

here.

Previous: [solved] Why is 65.4 times 100in js equal to 6540.000000000001

Next: Using let, in for Loop Why is the I value not added once after the end of the last loop