⽹页中⼆维码识别规则
当客户端发现⽤户在⽹页的img标签内进⾏长按操作时，会⽴刻截屏并且启动⼆维码识别算法。所以这⾥⽤于⼆维码识别的图⽚是截屏，⽽不是之前有⼈提到的img标签中的图⽚。
为什么要⽤截屏，这也是⼀个开发时候的思考。客户端截屏时候，可以不⽤考虑⽹络传输等因素，最快的得到识别结果，否则就需要⾛⼀次图⽚下载的逻辑，⽤户长按后等待的时间会加长，体验上也失去了快感。当然，这也带来了识别不出的问题（所以正在考虑先截屏，截屏识别失败再下载的新逻辑）。电脑
基于截屏识别，⽹页中⼆维码⽆法被识别的原因有这⼏个：
1、⼆维码显⽰信息不全，在长按时候只有部分可见
2、⼆维码周围信息过于复杂，在整个截屏中⼆维码算法⽆法正确识别。
3、⽹页没有加载完成，的识别js没有启动。
如果是普通⽤户遇到这样的问题，⼤不了就不玩了。但是对于运营者，每个长按的⽤户都是潜⼒⽤户，在距离接上头⼀步之遥的地⽅停住了，肯定内⼼万马漂过，有以下建议可以试试。
1、⼆维码周围不要过于复杂，留⽩为佳。
2、⼆维码不要太⼤，否则容易跳出屏幕。通常160*160就可以。
测试这个问题的⽅式，在遇到⽹页中⼆维码⽆法识别的时候，截屏，然后通过扫⼀扫导⼊这个截屏，看看是否也⼀样出问题。
当然，这个识别⽹页⼆维码，玩法多样，相当于开启了⼀个新的外跳⽅式，怎么玩，就不在这⾥展开了。
⼆维码识别常见问题
1，在iOS 6.2.2识别的⼆维码的区域向上偏移了64px
这64px是内置浏览器标题栏+系统标题栏
⼆维码⼤到⼀定程度就没有“识别上移”的诡异现象了，⼤概是⼆维码⼤⼩在400px 以上的时候就没有。
解决：
1.通过img增加padding 增⼤可接触⾯积；这个需要微调
2.为⼆维码图⽚本⾝增加透明底部背景，实际上就是把主要的⼆维码放在上⾯，下⾯给⼀块的透明的背景。这样他识别图⽚64px
的时候正好是完整的图⽚。
2，两（多）张⼆维码⽆法在同⼀屏幕视窗中共存
如果屏幕上有两个⼆维码只能识别其中⼀个。实际上是把你的整个屏幕先截屏。再识别截屏后的图⽚。所以你的屏幕上的内容都会变成⼀个图⽚，即使不是⼀屏显⽰也不⾏。
解决：
1、不把这些需要识别的⼆维码图⽚放在⼀个屏幕⾥。
2、⼆维码设置为可以点击⼤图浏览，然后在⼤图浏览时，长按识别⼆维码
注：⽂章内容来源与⽹络参考，有不正确的地⽅会在以后的认识中逐步修正。
3，多次执⾏长按⼆维码的功能会导致内存泄漏，⼿机会变卡
4，⽹上看到的其它说法，可以在调试的时候都按照这种⽅式来尝试⼀下
不要⽤fixed定位
初始缩放值为1，最⼤缩放值⼤于或等于1，不⽀持缩放。不可以识别
<meta content="width=device-width, initial-scale=1, maximum-scale=1.2, user-scalable=0" name="viewport" />
初始缩放设置为⼩于1或者⼤于1，最⼤缩放值⼤于或者等于初始缩放，不⽀持缩放。不可以识别<meta content="width=device-width, initial-scale=1.1, maximum-scale=1.2, user-scalable=0" name="viewport" />
初始缩放值为1，最⼤缩放值⼤于或等于1，不⽀持缩放。不可以识别
<meta content="width=device-width, initial-scale=1, maximum-scale=1.2, user-scalable=0" name="viewport" />
都不设置不可以识别
发布评论