微信开发,解决jquery.qrcode.min.js生成二维码长按不识别问题
转载的地址:https://my.oschina.net/ht896632/blog/737017
jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery 插件((可以从https://github.com/jeromeetienne/jquery-qrcode 获取)),它使用非常简单,生成的 QRcode 无需下载图片,并且不依赖第三方服务,插件压缩之后大小小于 4K。
1.引入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>
2.在页面创建一个空的div;
<div id="qrDiv"></div>
3.生成二维码
$("#qrDiv").qrcode({ width: 120, //宽度 height:120, //高度 text: "需要生成的二维码内容" //任意内容 });
注意:这个时候生成的二维码在微信中长安没任何反应,因为qrcode生成的是canvas标签而不是img标签
4.将canvas标签转换为img标签
//从 canvas 提取图片 image
function convertCanvasToImage(canvas) {//新Image对象,可以理解为DOMvar image = new Image();// canvas.toDataURL 返回的是一串Base64编码的URL,当然,浏览器自己肯定支持// 指定格式 PNGimage.src = canvas.toDataURL("image/png");return image;
}//获取网页中的canvas对象var mycanvas1=document.getElementsByTagName('canvas')[0];//将转换后的img标签插入到html中var img=convertCanvasToImage(mycanvas1);$('#imagQrDiv').append(img);//imagQrDiv表示你要插入的容器id
注意:完成上述步骤后就可以在微信中长按识别了
二、参数说明
- text : "https://github.com/jeromeetienne/jquery-qrcode" //设置二维码内容
- render : "canvas",//设置渲染方式 (有两种方式 table和canvas,默认是canvas)
- width : 256, //设置宽度
- height : 256, //设置高度
- typeNumber : -1, //计算模式
- correctLevel : 0,//纠错等级
- background : "#ffffff",//背景颜色
- foreground : "#000000" //前景颜色
5.常见问题
(1).在chorme浏览器中二维码生成成功后无法扫描解决方法:
- //改成使用table的渲染方式,亲测支持各种各版本的浏览器
- jQuery('#qrcode').qrcode({width: 200,height: 200,correctLevel:0,render: "table",text: "http://blog.csdn.net/mr_smile2014"});
(2).在 微信 或手机浏览器中生成的二维码无法扫描解决方法;
- //改成使用默认的渲染方式,支持微信和QQ内置浏览器及其它手机浏览器
- jQuery('#qrcode').qrcode({width: 200,height: 200,correctLevel:0,text: "http://blog.csdn.net/mr_smile2014"});
6.jquery.qrcode生成二维码内容不支持中文
jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的,这个方法默认会获取它的 Unicode 编码,一般的解码器都是采用UTF-8, ISO-8859-1等方式。
英文是没有问题,如果是中文,一般情况下Unicode是UTF-16实现,长度2位,而UTF-8编码是3位,这样二维码的编解码就不匹配了。
解决方式当然是,在二维码编码前把字符串转换成UTF-8,具体代码如下:
- jQuery('#qrcode').qrcode({width: 200,height: 200,correctLevel:0,text: utf16to8("jquery-qrcode居然不支持中文,太可恨了!")});
- function utf16to8(str) {
- var out, i, len, c;
- out = "";
- len = str.length;
- for(i = 0; i < len; i++) {
- c = str.charCodeAt(i);
- if ((c >= 0x0001) && (c <= 0x007F)) {
- out += str.charAt(i);
- } else if (c > 0x07FF) {
- out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
- out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
- out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
- } else {
- out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
- out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
- }
- }
- return out;
微信开发,解决jquery.qrcode.min.js生成二维码长按不识别问题相关推荐
- qrcode.min.js生成二维码以及reqrcode.js二维码解码
生成二维码 1.引入js qrcode.min.js ,下载地址:https://download.csdn.net/download/weixin_43830264/87472390 2.根据需求设 ...
- HTML网页使用CDN的jquery.qrcode.min.js生成页面二维码(直接可以复制使用)
HTML页面代码 <!DOCTYPE html> <html> <head><title></title><meta http-equ ...
- qrcode.js生成二维码,无法识别
参数很多很长的时候,生成的二维码很乱很大,导致超过了原来的image宽高,二维码边缘部分没有完整显示. 1.一开始把image的宽高放大,二维码原来被截取的部分显示了一些但是还是不够.没有出现完整的二 ...
- Qrcode生成二维码 之jquery.qrcode.min.js
PHP交流群:294088839, Python交流群:652376983, GO交流群:874512552. jquery-1.8.3_min.js和jquery.qrcode.min.js jq ...
- jquery.qrcode.js生成二维码插件转成图片格式
1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式, github源码地址: https://github.com/jeromeetien ...
- JS 生成二维码实现(qrcode.js)
qrcode.js源码地址: https://github.com/jeromeetienne/jquery-qrcode 使用 页面引入QRCode.js和JQuery.js <script ...
- qrcode.js使用js生成二维码(并下载)的实践
知识点 base64数据形式 Base64是一种用64个字符来表示任意二进制数据的方法. – 廖雪峰官方网站 Base64编码有哪些情景需求? – 知乎 案例场景 后台生成邀请链接,前端拿到链接之后处 ...
- 微信生成二维码长按识别
1.引入JS库 <script src="jquery-1.8.3.js" type="text/javascript" charset="ut ...
- 运用js生成二维码(工作记录)
工作中需要一个简单的二维码生成功能,此处运用JQuery+jquery.qrcode实现: 需要资源:jquery.js + jquery.qrcode.min.js (网上搜索即可获取) 准备工作 ...
最新文章
- php 调用变量方法名,php中引用(变量和函数名前加符号)用法
- boost::geometry模块实现自定义点示例
- 《零基础》MySQL 排序(十八)
- 一个HTTP请求,把网站打裂开了!
- Android 设置 横屏 竖屏 (转)
- python编程入门电子书-Python编程基础 PDF 原书高质量版
- 排名前50的开源Web爬虫用于数据挖掘
- IOS开发学习笔记033-UIScrollView
- web 服务器的作用
- 什么叫软件前端测试,前端页面测试需要测试哪些内容?前端自动化测试的实现小技巧...
- 企业之pacemaker基本概念及其原理
- LaTeX 下载和安装
- 时钟同步显示屏(NTP时间显示屏)子母钟系统介绍
- Mysql出现Table 'performance_schema.session_status' doesn't exist
- JavaScript数组forEach方法
- 微信小程序登录 返回 -41003
- Java编程规范-文件组织与排版
- 哔哩哔哩2018.9.21笔试题——扭蛋机(堆的思想解决)
- KeilC51基础 添加与删除中文时出现问号
- 时间同步装置(时钟系统)工作模式介绍
热门文章
- wpf 实现实时毛玻璃(live blur)效果
- Shopee新手小白适合全职做虾皮电商平台吗?95%的新手都不适合
- Maven profile整合Spring profile
- Photoshop快捷键有时候会失效
- 关于TypeScript 问号点 a?.b 的用法解释
- 魔域怎么在计算机桌面显示不全,电脑屏幕显示不全怎么办?桌面显示不全的调整方法答案...
- 计算机选择题基础知识试题,计算机基础知识试题及答案选择题
- 【工具篇】SerializableDictionary字典序列化Unity面板显示
- python selenium手动输入验证码_案例:selenium实现登录百度(如有验证码,需要手动输入)...
- 行测-判断推理-图形推理-样式规律-加减异同