网页中二维码识别规则,以及二维码识别常见问题

更新日期: 2018-11-30阅读: 4.3k标签: 二维码

网页中二维码识别规则

当客户端发现用户在网页的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" />

都不设置 不可以识别


链接: https://www.fly63.com/article/detial/1461

qrcode.js_一款使用JavaScript生成/解析识别二维码的js库

qrcode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。 这篇文章主要讲解qrcode.js生成二维码,qrcode.js解析识别二维码等

Vue实现生成二维码并且能下载到本地_vue-qr的使用

vue-qr先说一下特点:带可以设置logo图片、背景图片、背景颜色、尺寸、边距等。简单的生成了二维码,这个生成的是img的二维码,要想生成canvas的二维码,得安装awesome-qr.js

Node.js在指定的图片模板上生成二维码图片并附带底部文字说明

Node.js在指定的图片模板上生成二维码图片并附带底部文字说明,但是如果我们希望生成的不仅仅是二维码,而是在一张给定的背景图上生成二维码,并在底部配上相应的文字说明,那么就需要借助于其它一些包来实现。

React 生成二维码/条形码的插件

qrcode 是一个js插件,具体可以github,这边不多介绍。 qrcode.react这个是修改为React的一个插件。 具体是生成二维码的原理是什么,这边也不多做介绍。

利用qrcode.js生成二维码

什么是 QRCode.js?QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

canvas生成带二维码的海报踩坑

绘制渲染的时候图像不显示:是因为图片异步加载,所以canvas的操作需要放在onload事件中,否则图片会不显示,因为图片不止一张,建议放在promise中,用async,await调用

【小草活码】提供微信群二维码突破100人限制和7天不过期的方法

微信群营销已经成为淘客、微商等较为流行的营销方式,我们都知道微信群未满100人之前群二维码是有效可扫码的,让粉丝通过扫码进群。但是人数一旦超过100人后,发出的二维码就失效了,无法再次扫码进群。必须通过邀请加入的方式

vue-qr生成下载二维码

安装vue-qr:npm install vue-qr --save;生成二维码实列;属性介绍:text要生成二维码的内容,size设置二维码大小,宽高相等,margin二维码与边框的距离,可以设置白边

three.js 制作属于自己的动态二维码

这是一个Uint8ClampedArray的类型化数组,这个数组出现最多的也是在imgData上。它会将负数归入0,大于255的数归入255,所以取模就不用了。我们再来看这个数组的长度是384400是怎么来的呢?

在UniApp的H5项目中,生成二维码和扫描二维码的操作处理

在我们基于UniApp的H5项目中,需要生成一些二维码进行展示,另外也需要让用户可以扫码进行一定的快捷操作,本篇随笔介绍一下二维码的生成处理和基于H5的扫码进行操作。二维码的生成,使用了JS文件weapp-qrcode.js进行处理

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!