qrcode生成二维码微信长按无法识别问题的解决


Posted in Javascript onApril 04, 2019

最近用QRCode.js 生成二维码之后,发现在小米和华为手机的微信上面页面长按识别不了,苹果和其他手机浏览器是正常的。qrcode在页面生成会生成一个canvas标签和一个img标签,在电脑浏览器上调试的时候发现生成二维码之后canvas标签是会自动隐藏的,然后展示img标签,然后通过vConsole 发现在小米或者华为手机上生成的二维码是通过canvas展示的,img标签被隐藏,而且img.src没有任何内容。怀疑是浏览器兼容问题。

jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery 插件((可以从https://github.com/jeromeetienne/jquery-qrcode 获取)),它使用非常简单,生成的 QRcode 无需下载图片,并且不依赖第三方服务,插件压缩之后大小小于 4K。

QRCode.js 基本用法

引入JS库

<script src="jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
 <script src="jquery.qrcode.min.js" type="text/javascript" charset="utf-8"></script>

html部分

<div id="qrcode"></div>

js部分

// 设置要生成二维码的链接
new QRCode(document.getElementById("qrcode"), codeUrl);

或者

var qrcode = new QRCode("qrcode", {
 text: codeUrl,
 width: 128,
 height: 128,
 colorDark : "#000000",
 colorLight : "#ffffff",
 correctLevel : QRCode.CorrectLevel.H //容错级别
});

容错级别,可设置为:
QRCode.CorrectLevel.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.H

清除重新生成

qrcode.clear(); // clear the code.
qrcode.makeCode("http://naver.com"); // make another code.

浏览器支持

IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.

长按识别方式

解决思路是从canvas中提取图片base64自己生成图片

html部分

<div id="codeDiv" style="display: none;"></div>
<div id="qrcode"></div>

js部分

var qrcode = new QRCode("codeDiv", {
  text: codeUrl,
  render: "canvas", //渲染方式指定canvas方式
  width: 128,
  height: 128,
  typeNumber:-1,//计算模式
  colorDark : "#000000", 
  colorLight : "#ffffff", 
  correctLevel : QRCode.CorrectLevel.H 
 });
 var canvas=document.getElementsByTagName('canvas')[0];
 var img = convertCanvasToImage(canvas);
 $('#qrcode').append(img);// 添加DOM
 //从 canvas 提取图片 image 
 function convertCanvasToImage(canvas) { 
  //新建Image对象
  var image = new Image(); 
  // canvas.toDataURL 返回的是一串Base64编码的URL
  image.src = canvas.toDataURL("image/png"); 
  return image; 
 }

参考

QRCode.js 二维码生成并能够长按识别
GitHub

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript在一段文字中的光标处插入其他文字
Aug 26 Javascript
javascript类继承机制的原理分析
Sep 12 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
javascript实现微信分享
Dec 23 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
JS实现容器模块左右拖动效果
Jan 14 Javascript
vue组件系列之TagsInput详解
May 14 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 #jQuery
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 #Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 #Javascript
Vue传参一箩筐(页面、组件)
Apr 04 #Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 #Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 #Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 #Javascript
You might like
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
php实现httpclient类示例
2014/04/08 PHP
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
详解javascript函数的参数
2015/11/10 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
python标准算法实现数组全排列的方法
2015/03/17 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
python web基础之加载静态文件实例
2018/03/20 Python
python实现图片文件批量重命名
2020/03/23 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
导购员的岗位职责
2014/02/08 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
建筑学专业自荐书
2014/07/09 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
Python实现文字pdf转换图片pdf效果
2022/04/03 Python