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 相关文章推荐
jQuery 动画基础教程
Dec 25 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
webpack 代码分离优化快速指北
May 18 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 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
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
python内存管理分析
2015/04/08 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
会计顶岗实习心得
2014/01/25 职场文书
群众路线剖析材料
2014/02/02 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
小学校本培训方案
2014/06/06 职场文书
植树节口号
2014/06/21 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
技术入股协议书
2016/03/22 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis