前端 - 微信网页中长按二维码图片能弹出菜单是怎么实现的？

Question

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

黄舟 · Answer

對於微信內建瀏覽器而言，就是實現一個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，送你一把小梯子。