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

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

<!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>
阅读 70.8k
评论
    5 个回答

    对于微信内置浏览器而言,就是实现一个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事件,具体你可以看一下,有问题再留言

      <meta name="viewport" content="width=640,target-densitydpi=device-dpi,user-scalable=no" />这个写错了,不能用这种,要用<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />,不然识别的时候还是按照我下面那个识别的,不信你可以把手机在屏幕四处随便长按就能发现了

        • 2
        • 新人请关照

        40多天前,我也遇到这个问题,
        发现 只要这个图片的left,top 较body 的0,0位置 大于150像素后 长按图片就没反应,

        无论我怎么套DIV ,怎么设置postion 都不行,

        无奈我当时的项目,为了解决问题我把那个 二维码 做成一张 大的透明png 以body 左上角开始,这样测试OK

        但是现在另外一个项目,有遇到这个问题,但是这次无法这样来解决了,哎 ,

        不过这次网上看到很多同样的问题。不过也都没有解决!

          • 542
            • 1
            • 新人请关照

            我发现有时候我的长按,只弹出保存和取消两个菜单,但是有时候有能弹出很全的菜单,如:发送给朋友、保存、收藏、识别二维码、取消。不知道怎么回事,图片我也设置了宽高呀。

            该答案已被忽略,原因:

              撰写回答

              登录后参与交流、获取后续更新提醒