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. jenkin重新注册用户

    http://www.cnblogs.com/xiao-fy/

  2. python配置文件读取

    在代码实现的过程中,我们经常选择将一些固定的参数值写入到一个单独的配置文件中.在python中读取配置文件官方提供了configParser方法. 主要有如下方法(找官文):   (这家伙很懒,直接复 ...

  3. 关于jquery中on绑定click事件在苹果手机失效的问题(巨坑啊)

    用一个div当做了一个按钮来使用. <div class="button"> <div class=" next_button button_left ...

  4. Python2 获取docx/doc文件内容

    整体思路: 下载文件并修改后缀为zip文件,解压zip文件,所要获取的内容在固定的文件夹下:work/temp/word/document.xml 所用包,全部是python自带,不需要额外下载安装. ...

  5. js & right click menu

    js & right click menu https://stackoverflow.com/questions/4909167/how-to-add-a-custom-right-clic ...

  6. Beats Solo3 Wireless 无法链接 MacBook pro

    Beats Solo3 Wireless 无法链接 MacBook pro 问题解决了,原来只要长按耳机的开关按钮就能被识别到了,貌似需要5秒钟不松手. https://bbs.feng.com/re ...

  7. 【bzoj5178】[Jsoi2011]棒棒糖 主席树

    题目描述 Coffee的世界里也是有棒棒糖卖的,Coffee买了N(1≤N≤50000)只连着的.这N只棒棒糖包裹在小塑料袋中,排成一列,相邻的两只棒棒糖的塑料袋是接起来的.为了方便,我们把棒棒糖从左 ...

  8. 表单验证2-JS正则

    1. JS正则:   以/开头,以/结尾. test作用:到里面去找,只要里面有,就返回true:否则就返回false. 例如:rep=/\d+/; 检验里面是否有数字. 2.rep=/^  $/;  ...

  9. [JSOI2007]字符加密 后缀数组

    题面:洛谷 题解: 我们考虑,如果可以将环上每个长度为len的串都提取出来,再做个排序,那这题我们就做出来了! 但是提取$n^2$,怎么办? 考虑破环成链,再扩充为原来的2倍. 然后直接做后缀排序,把 ...

  10. Round 403 div. 2

    B 可以二分相遇的坐标:也可以二分时间,判断是否存在两个人的区间没有交. An easy way to intersect a number of segments [l1, r1], ..., [l ...