前端QRCode.js生成二维码(解决长字符串模块和报错问题)

QRCode

用法

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

  1. 使用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

原文地址:https://www.cnblogs.com/whkl-m/p/10797776.html

时间: 2024-10-09 03:23:29

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

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

技术开发人员如何快速生成二维码,下面介绍使用 jquery.qrcode.js生成二维码方式 jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 此插件是能够独立使用的,体积也比较小,使用gzip压缩后才不到4kb. 第一种生成没有图片的二维码: 准备环境: jquery-1.8.3.min.js,jquery.qrcode.min.js jquery.qrcode.min.js不好找,我就直接把代码贴出

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

vCard是一种容许交换个人信息的数据规范,vCard数据格式的标识符是VCARD,vCard数据格式行是: 类型 [;参数]:值,具体的介绍百度都有,我们可以通过vcard来进行通讯录的保存,名片的交换 基本格式: BEGIN:VCARD N:姓;名;;; FN: 名 姓 TITLE:XX集团前端 ADR;WORK:;;北京市五环区GT路19号;;;; TEL;CELL,VOICE:159351111111 TEL;WORK,VOICE:010-6666666 URL;WORK:www.gt.

QRCode.js 生成二维码

QRCode.js 是一个用于生成二维码图片的插件. github地址 在线实例 实例预览 基础示例 实例预览 API 接口 使用方法 载入 JavaScript 文件 <script src="qrcode.js"></script> 复制 DOM 结构 <div id="qrcode"></div> 复制 调用 // 简单方式  new QRCode(document.getElementById('qrcode'

js生成二维码的jquery组件–qrcode

js生成二维码的jquery组件–qrcode 2015/01/30 / 2508 VIEWS / JAVASCRIPT, JQUERY 有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. qrcode其实是通过计算,然后使用jquery实现图形渲染和画图.支持canvas和table两种方式生成我们所需的二维码. 一.具体用法 1.所需资源 qrcode是jquery组件,需要至少两个js, 就是 jquery 和 jquery.qrcode.您可以到https://github.

js生成二维码以及点击下载二维码

js生成二维码 jquery.qrcode.js可以快速使用页面生成二维码.但改项目有两个小问题:1.不支持中文:2.不支持二维码中间生成图片. 支持中文的jquery-qrcode jquery.qrcode.js默认不支持中文.这跟js的机制有关系,jquery-qrcode这个库是采用 charCodeAt()这个方式进行编码转换的, 而这个方法默认会获取它的 Unicode 编码,一般的解码器都是采用UTF-8, ISO-8859-1等方式,英文是没有问题,如果是中文,一般情况下Unic

java和js生成二维码

1. java生成二维码 1.1 依赖jar包配置(使用maven依赖) 1 <dependency> 2 <groupId>com.google.zxing</groupId> 3 <artifactId>core</artifactId> 4 <version>3.0.0</version> 5 </dependency> 6 <dependency> 7 <groupId>com.

js 生成二维码并打印

该文章为了节约项目开发中内存空间,而通过js动态生成二维码,不生成图片保存在项目中,图片路径不需保存于数据库中该文章主要介绍web生成二维码,当然ios,android同样可通过QRCode生成二维码,之后介绍...... 1.引入js <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src

C#利用QrCode.Net生成二维码(Qr码)

现在网上很多应用都是用二维码来分享网址或者其它的信息.尤其在移动领域,二维码更是有很大的应用场景.因为项目的需要,需要在网站中增加一个生成二维码分析网址的功能,在谷歌大幅度抽筋的情况下无奈使用百度.百度N多,找到一些项目,但是可用性不强.(有一个项目是用VS2005开发的,在2010中调试不开.)终于在codeplex上找到一个“神器”,这个“神器”可以很方便的生成二维码,速度那是相当的快,并且可支持中文,遵从MIT协议. QrCode.Net是一个使用C#编写的用于生成二维码图片的类库,使用它

jquery.qrcode.min.js生成二维码

jquery.qrcode.min.js是一款可以生成二维码的插件,使用前提是先引入jquery,因为jquery.qrcode.min.js依赖jquery. 基本用法 1.引入js <script src="js/jquery-3.1.1.min.js"></script> <script src="js/jquery.qrcode.min.js"></script> 2.构建容器 <div class=&q