前端QRCode.js生成二维码(解决长字符串模块和报错问题)
QRCode
用法
1.使用npm安装到你的项目中 npm install qrcode2 --save
- 使用commonjs或者es6模块方式导入
var QRCode = require('qrcode2');
// 或者
import QRCode from 'qrcode2';
3 . 实例化QRCode对象
new QRCode(document.getElementById('qrcode'), 'http://www.baidu.com');
//
// 或者配置一些选项
var qrcode = new QRCode(document.getElementById("qrcode"), {text: "http://www.baidu.com",width: 128,height: 128,colorDark : "#000",colorLight : "#fff",correctLevel : QRCode.CorrectLevel.H
});
参数
参数 | 默认值 | 说明 | 备注 |
---|---|---|---|
text | string | 二维码内容字符串 | 如果是url的话,为了微信和QQ可以识别,连接中的中文使用encodeURIComponent进行编码 |
width | 256 | 图像宽度 | 单位像素(百分比不行) |
height | 256 | 图像高度 | 单位像素(百分比不行) |
colorDark | '#000' | 二维码前景色 | 英文\十六进制\rgb\rgba\transparent都可以 |
colorLight | ‘#fff’ | 二维码背景色 | 英文\十六进制\rgb\rgba\transparent都可以 |
correctLevel | QRCode.CorrectLevel.L | 容错级别 | 由低到高 .L M Q H |
方法
clear:清除QR code
makeCode(text: String):重新绘制QR code (仅在不支持 Canvas 的浏览器下有效)
常见bug1 长字符串显示模糊问题
问题原因:
显示模糊的问题,是canvas的问题。由于字符串比较长,尤其是需要传一个连接地址,后面还加一些参数的时候,就会加大二维码的像素复杂度,而本身canvas在绘制的时候,就一直有像素模糊的问题,尤其是在手机上的时候解决方法:
先将生成的二维码进行倍数扩大,然后在css上面固定其显示宽高,这样就可以扩大显示像素精度。
js放大
var qrcode = new QRCode(document.getElementById("qrcode"), {text: "http://www.baidu.com",width: 128 * 5, // 相应宽高扩大5倍height: 128 * 5,colorDark : "#000",colorLight : "#fff",correctLevel : QRCode.CorrectLevel.H
});
css固定宽高
可以给canvas 和 img 固定为 128* 128的大小
也可以在包裹#qrcode 的容器上固定128* 128的大小 里面内容100%
比如
.qrcode-out {
width: 128px;
height: 128px;
}
canvas,img {
width:100%;
height: 100%;}
常见bug2 因为url太长,导致二维码加载报错
一般报错提醒 Error: code length overflow. (1756>1056)
一般都是容错率设置为最高导致的,此时把容错率调低一级便可以
correctLevel : QRCode.CorrectLevel.Q
转载于:https://www.cnblogs.com/whkl-m/p/10797776.html
前端QRCode.js生成二维码(解决长字符串模块和报错问题)相关推荐
- 前端QRCode.js生成二维码插件
填报二维码生成 http://code.ciaoca.com/javascript/qrcode/demo/ git仓库地址 <el-table :data="scenicForm&q ...
- qrcode.js 生成二维码包含logo和背景图片及IE下载二维码
思路: 1. 通过qrcode.js 生成带logo的二维码 2. 将背景图片.logo与生成的二维码图通过canvas 绘制在一起形成一个新的canvas 3. 将canvas 转成base64的u ...
- qrcode——js生成二维码
1.引入 qrcode.min.js(点击下载demo) 2.html: <div id="qrcode"></div> js: var qrcode = ...
- jquery.qrcode.js生成二维码插件转成图片格式
1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式, github源码地址: https://github.com/jeromeetien ...
- 利用qrcode.js生成二维码,并点击按钮下载二维码图片(亲测可用)
话不多说,先上代码(复制即用): <!DOCTYPE html> <html lang="en"> <head><meta charset ...
- QRCode.js 生成二维码详细API和参数
参考:https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html 运行代码:https://www.runoob.com/try/t ...
- qrcode.js生成二维码,无法识别
参数很多很长的时候,生成的二维码很乱很大,导致超过了原来的image宽高,二维码边缘部分没有完整显示. 1.一开始把image的宽高放大,二维码原来被截取的部分显示了一些但是还是不够.没有出现完整的二 ...
- qrcode.js使用js生成二维码(并下载)的实践
知识点 base64数据形式 Base64是一种用64个字符来表示任意二进制数据的方法. – 廖雪峰官方网站 Base64编码有哪些情景需求? – 知乎 案例场景 后台生成邀请链接,前端拿到链接之后处 ...
- qrcode生成二维码微信长按无法识别问题
最近用QRCode.js 生成二维码之后,发现在小米和华为手机的微信上面页面长按识别不了,苹果和其他手机浏览器是正常的.qrcode在页面生成会生成一个canvas标签和一个img标签,在电脑浏览器上 ...
最新文章
- mysql三表查询数据重复_解决mybatis三表连接查询数据重复的问题
- 任务05—学习 MARKDOWN 语言
- AB-string CodeForces - 1238D(思维)
- 深度学习基础(五)—— rectifier function and softplus
- 【LaTeX】对表格中的内容添加脚注不显示
- Excel QUARTILE函数计算逻辑
- DAEMON 中的 SPTD 和 发生sptd.sys 错误的处理办法~
- python绘制五角星
- 81.(cesium之家)cesium修改灰色背景(默认蓝色)
- C++:实现量化Overnight-indexed swap 隔夜指数掉期测试实例
- 华为荣耀系列移动终端产品分析和演进研究
- android手机备份恢复出厂设置密码,手机恢复出厂设置 如何让安卓手机恢复出厂设置经验分享...
- VUE+Cesium绘制迁徙图结合echarts实现
- 顺序图和活动图的一个区别
- Eclipse Debug不为人知的秘密
- VIEWGOOD(远古)供应校园网视频点播系统
- 宽依赖和窄依赖_Spark宽依赖和窄依赖深度剖析
- ARP和DNS欺骗以及网站钓鱼分析
- VS2012中--查找定义后从未被使用的函数
- 第一次亲密接触读后感(转)
热门文章
- 8年前端开发的知识点沉淀(不知道会多少字,一直写下去吧...)
- 火绒规则 禁止所有软件的安装_十大机械设计软件对比,附所有软件安装资料...
- php为什么要使用静态方法,为什么PHP在对象上下文中使用静态方法?
- python的科学计算库有哪些_《用Python进行科学计算》——SciPy数值计算库
- LUNA16数据集介绍
- 阿里天池供应链需求预测比赛小结
- 【论文阅读】Universal Domain Adaptation
- 吴恩达深度学习5.1练习_Sequence Models_Building a RNN Step by Step
- Web安全漏洞之SSRF
- C语言结构体内存布局问题