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 相关文章推荐
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
详解AngularJS 模块化
Jun 14 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
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 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP数据过滤的方法
2013/10/30 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
php json转换相关知识(小结)
2018/12/21 PHP
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
vue-cli之router基本使用方法详解
2017/10/17 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
python中的yield使用方法
2014/02/11 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
怎样声明接口
2014/09/19 面试题
高中生活自我鉴定
2014/01/18 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
师范毕业生求职信
2014/07/11 职场文书
违章停车检讨书
2014/10/21 职场文书
毕业生评语大全
2015/01/04 职场文书
户外亲子活动总结
2015/05/08 职场文书
高三生物教学反思
2016/02/22 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
Java 在线考试云平台的实现
2021/11/23 Java/Android
Python实现为PDF去除水印的示例代码
2022/04/03 Python
nginx.conf配置文件结构小结
2022/04/08 Servers