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 相关文章推荐
限制文本字节数js代码
Mar 06 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
详解tween.js的使用教程
Sep 14 Javascript
vue-ajax小封装实例
Sep 18 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 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
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
python写xml文件的操作实例
2014/10/05 Python
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
python验证码图片处理(二值化)
2019/11/01 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
中软Java笔试题
2012/11/11 面试题
三维科技面试题
2013/07/27 面试题
Python里面search()和match()的区别
2016/09/21 面试题
篮球比赛口号
2014/06/10 职场文书
停电放假通知
2015/04/14 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
python游戏开发Pygame框架
2022/04/22 Python