微信长按识别二维码 -- 页面多个二维码如何识别？

常规的在公众号html页面中要实现长按识别二维码，直接使用img显示图片就可以了，如下：

<img name="qrCodeImg" src="/images/itlao5.jpg" style="width: 80%;" />

然而，当同一个页面有多个二维码时，会出现怎样的情况呢？

今天碰到的需求中就在同一个页面有三个二维码，按照上面的方法，写了三个img，长按不同二维码img打开不同的公众号或小程序。然而，实际的效果与想象中的有点差别：在部分手机上，不管长按哪个img，都是识别了第一个img，试了三台手机，除了华为P20正常，VIVO和华为X5都出现该问题，后来测试P20在部分情况下也有该问题。
不知道怎么回事，网上一顿搜索，说是二维码识别功能是先截屏然后在识别截取的图片，然后结合我P20正常的情况，应该是截取了点击位置附近一定像素的屏幕，然后进行识别。如果该截屏区域内有多个二维码，会识别到第一个，这就造成了同一屏内多个二维码识别出错的问题。

然后想解决思路，方案有三种：

1. 二维码间隔拉大，保证同一屏内只显示一个完整的二维码；
2. 先弄个二维码列表（不用img，用background放图片），然后点击二维码打开详情页(或者弹出层) ，长按详情页或弹出层img识别
3. 既然是截屏识别第一个完整二维码，那在截屏时将点击的img图片显示到顶部&