QRCode

用法

1.使用npm安装到你的项目中 npm install qrcode2 --save

2. 使用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 长字符串显示模糊问题

  1. 问题原因:

    显示模糊的问题,是canvas的问题。由于字符串比较长,尤其是需要传一个连接地址,后面还加一些参数的时候,就会加大二维码的像素复杂度,而本身canvas在绘制的时候,就一直有像素模糊的问题,尤其是在手机上的时候

  2. 解决方法:

    先将生成的二维码进行倍数扩大,然后在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

前端QRCode.js生成二维码(解决长字符串模块和报错问题)的更多相关文章

  1. qrcode.js生成二维码因字符串过长而报错

    前端使用qrcode.js生成二维码的时候.有时候是会出现 qrcode length overflow (1632>1056) 目前使用的有效的解决办法是重新下载新版的qrcode.js 下载 ...

  2. QRCode.js生成二维码

    QRCode的GitHub地址: https://github.com/KeeeX/qrcodejs 该版本解决了主版本(https://github.com/davidshimjs/qrcodejs ...

  3. 使用jquery.qrcode.js生成二维码

    通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...

  4. 【QRcode二维码】:使用JS前端插件QRcode.js生成二维码

    1.先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcode 获取), qrcode.js 是实现二 ...

  5. jquery.qrcode.js生成二维码(前端生成二维码)

    官网地址:http://jeromeetienne.github.io/jquery-qrcode/ 第一步引入插件: <script type='text/javascript' src='h ...

  6. 利用vcard和qrcode.js生成二维码导入联系人

    vCard是一种容许交换个人信息的数据规范,vCard数据格式的标识符是VCARD,vCard数据格式行是: 类型 [;参数]:值,具体的介绍百度都有,我们可以通过vcard来进行通讯录的保存,名片的 ...

  7. QRCode.js 生成二维码

    QRCode.js 是一个用于生成二维码图片的插件. github地址 在线实例 实例预览 基础示例 实例预览 API 接口 使用方法 载入 JavaScript 文件 <script src= ...

  8. 转: jquery.qrcode.js生成二维码插件&转成图片格式

    原文地址: https://blog.csdn.net/u011127019/article/details/51226104 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持can ...

  9. qrcode——js生成二维码

    1.引入 qrcode.min.js(点击下载demo) 2.html: <div id="qrcode"></div> js: var qrcode = ...

随机推荐

  1. 关于解决java读取excel文件遇空行抛空指针的问题 !

    关于解决java读取excel文件遇空行抛空指针的问题 ! package exceRead; import java.io.File; import java.io.FileInputStream; ...

  2. Java知识点整理(一)

    ArrayList和LinkedList的区别 1.ArrayList和LinkedList可想从名字分析,它们一个是Array(动态数组)的数据结构,一个是Link(链表)的数据结构,此外,它们两个 ...

  3. SSH管理(重启 停止 运行 安装)centos7

    下面整理经常用到管理SSH服务的命令,方便复制哈. SSH服务状态 systemctl status sshd.service SSH运行命令 service sshd start SSH重启命令 s ...

  4. 第209天:jQuery运动框架封装(二)

    运动框架 一.函数------单物体运动框架封装 1.基于时间的运动原理 动画时间进程 动画距离进程 图解: 物体从0移动到400 当物体移动到200的时候 走了50% 同样的,物体总共运行需要4秒 ...

  5. HDU5266-pog loves szh III

    题目 给出一棵\(n\)个点的树,从1到\(n\)编号,\(m\)次询问\({LCA} _{v\in[L,R]}\). \(n,m\le 3\times 10^5​\) 分析 我的做法是直接对LCA进 ...

  6. 后缀树的线性在线构建-Ukkonen算法

    Ukkonen算法是一个非常直观的算法,其思想精妙之处在于不断加字符的过程中,用字符串上的一段区间来表示一条边,并且自动扩展,在需要的时候把边分裂.使用这个算法的好处在于它非常好写,代码很短,并且它是 ...

  7. 利用JavaFX访问MySQL数据库

    1. 创建数据库表 create table Course( courseId char(5), subjectId char(4) not null, courseNumber integer, t ...

  8. 【ZJOI2005】沼泽鳄鱼 题解报告

    题目描述 潘塔纳尔沼泽地号称世界上最大的一块湿地,它地位于巴西中部马托格罗索州的南部地区.每当雨季来临,这里碧波荡漾.生机盎然,引来不少游客. 为了让游玩更有情趣,人们在池塘的中央建设了几座石墩和石桥 ...

  9. Stanford机器学习---第十四讲.机器学习应用举例之Photo OCR

    http://blog.csdn.net/l281865263/article/details/50278745 本栏目(Machine learning)包括单参数的线性回归.多参数的线性回归.Oc ...

  10. OpenCV中响应鼠标消息 (转)

    #include <cv.h> #include <highgui.h> #include <stdio.h> #pragma comment(lib," ...