zoukankan      html  css  js  c++  java
  • 网页中二维码识别规则

    识别规则

    这里采用的逻辑是截屏识别当客户端发现用户在网页的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" />
    • 都不设置 不可以识别

    参考地址

    网页中二维码识别规则

  • 相关阅读:
    Linux下打包发布Qt应用程序
    嵌入式中的BSP---BSP到底是什么?
    (转)Spring 工具类 ConfigurationClassParser 分析得到配置类 -- springboot一样处理过程
    React Hooks之useState、useEffect使用
    数组排序多种方法汇总
    封装判断浏览器是否是IE浏览器
    封装addEventListener,removeEventListener指定元素添加事件及兼容问题js
    js判断是否超过几行
    react日期格式化组件
    Windows smynesc免费经典儿时小游戏分享给大家
  • 原文地址:https://www.cnblogs.com/moqiutao/p/8465504.html
Copyright © 2011-2022 走看看