前端 - 微信网页中长按二维码图片能弹出菜单是怎么实现的?
PHP中文网
PHP中文网 2017-04-17 11:43:23
0
4
657

微信网页中长按二维码图片能弹出收藏、保存、识别图中二维码的菜单是怎么实现的?
为什么同样的图片一个加了绝对定位就没菜单弹出,另一个什么都不加就能弹出?

<!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>
<p><img src="img/qr.jpg" alt="二维码图片" /></p>
<p style="position:absolute; top:660px; left:225px; z-index:1000;"><img src="img/qr.jpg" alt="二维码图片" /></p>
</body>
</html>
PHP中文网
PHP中文网

认证0级讲师

全部回覆(4)
黄舟

對於微信內建瀏覽器而言,就是實現一個contextMenu,判斷一下context.MediaType,貼一個chrome擴充功能裡右鍵圖片選單的程式碼,你可以當做微信實現的偽代碼來看

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

至於為什麼知道他是二維碼,當你長按圖片的時候,你回發現前三個菜單選項是先彈出來的,掃描二維碼是最後停頓了大約1s之後再彈出來的,這段時間就是微信內建瀏覽器透過演算法判斷這個圖片是否是二維碼,若是,則在長按選單中追加一個「掃描二維碼」的選項,當然,如果你想知道具體的「如何判斷一張圖片是否包含二維碼? ”,那就得從二維碼的定位點,糾錯機制去講了,這裡略過不表,你可以自行google,送你一把小梯子。

關於為什麼絕對定位時沒有彈出來,應該是樣式的問題,導致這個圖片沒有高度,沒有觸發他的longPress事件,具體你可以看一下,有問題再留言

伊谢尔伦

40多天前,我也遇到這個問題,
發現 只要這張圖片的left,top 較body 的0,0位置 大於150像素後 長按圖就沒反應,

無論我怎麼套p ,怎麼設定postion 都不行,

無奈我當時的項目,為了解決問題我把那個 二維碼 做成一張 大的透明png 以body 左上角開始,這樣測試OK

但現在另外一個項目,有遇到這個問題,但是這次無法這樣來解決了,哎 ,

不過這次網路上看到很多同樣的問題。不過也都沒有解決!

大家讲道理

iOS 下的微信客戶端在長按辨識二維碼的時候有bug,可以見這裡 http://devework.com/weixin-qrcode-bug2.html

巴扎黑

這個寫錯了,不能用這種,要用,不然識別的時候還是按照我下面那個識別的,不信你可以把手機在螢幕四處隨便長按就能發現了

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板