# QRCode.js
QRCode.js is javascript library for making QRCode. QRCode.js supports Cross-browser with HTML5 Canvas and table tag in DOM.
QRCode.js has no dependencies.
## Basic Usages
```
```
or with some options
```
```
and you can use some methods
```
qrcode.clear(); // clear the code.
qrcode.makeCode("http://naver.com"); // make another code.
```
## modify
最近有一个需求，需要将连接转换为二维码。
直接找了github最多star的库 [https://github.com/davidshimjs/qrcodejs](https://github.com/davidshimjs/qrcodejs)。
在使用中遇到了一些小问题，并且这个库很久不维护了，加上遇到的问题网上并没有很好的解决方案，所以fork一下修改源码，方便个人后续使用。
### problem
在使用问题中发现有下面的几个问题。
1. 不支持模块化
2. 虽然支持npm安装，但是没办法在项目中使用
3. 在某些安卓机（小米）下二维码没有生成
4. 二维码绘制结束或者报错没有提供api来进行通知
### code
粗略地将源码看了一下，简单说明一下运行流程。
1. 将实例化QRcode参数options.text使用qrcode算法转换为矩阵（就是一个二维数组）。
2. 判断当前文件是否是svg文件，是则调用svg api绘制矩阵。不是则根据参数及浏览器支持情况选择绘制方案。
3. 根据options.useSVG选择是否使用svg渲染，如果不是则看浏览器是否支持canvas，不支持则用table绘制。
4. 如果使用canvas绘制矩阵，调用canvas.toDataUrl获得一个base64格式的图片，之后创建img标签插入实例化QRcode时传入参数的dom中。
### resolve
1. 将源码用umd包装
```
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define('QRCode', factory);
} else if (typeof module === 'object' && typeof exports === 'object') {
module.exports = factory();
} else {
root.QRCode = factory();
}
}(this, function () {
// ...code
return QRcode;
}));
```
2. 这个不用说了，修改完代码自己推送一下npm喽～
3. 当遇到二维码不生成这个问题的时候，当然是先百度谷歌一下喽，网上针对这个问题方案有 MutationObserve，setTimeout，甚至还有轮询检测等，基本都是基于观察dom中img的生成和img的src属性是否存在来解决。
比起问题是怎么解决的，我更想知道问题是怎么来的。
查看源码后发现是由于源码中_getAndroid获取版本信息的正则写的有问题，而导致QRCode.prototype.makeImage中本该执行的绘制方法没有执行。
```
QRCode.prototype.makeImage = function () {
// this._android 在有些安卓机型下为false
if (typeof this._oDrawing.makeImage == "function" && (!this._android || this._android >= 3)) {
this._oDrawing.makeImage();
}
};
```
```
function _getAndroid() {
var android = false;
var sAgent = navigator.userAgent;
if (/android/i.test(sAgent)) { // android
android = true;
var aMat = sAgent.toString().match(/android ([0-9]\.[0-9])/i);
if (aMat && aMat[1]) {
android = parseFloat(aMat[1]);
}
}
return android;
}
```
我们可以看到 这个安卓版本正则的获取是有问题的：
1. ua版本必须有两位以上（国内很多安卓机型ua中 ua版本返回的是一位，看来国外友人并不了解国内的手机厂商啊～）
2. 只能匹配10以下版本，并且版本第二位只能匹配一位（听说安卓10已经发布了 233333）
所以需要将正则改写为如下形式
```
/android (\d+(\.\d+)?)/i
```
4. 绘制完成通知：可以在实例化QRcode时传入回调函数，然后根据各种渲染方案调用即可。
### supplement
1. 在测试时发现下面this._android会报错。
```
if (this._android && this._android <= 2.1) {
var factor = 1 / window.devicePixelRatio;
var drawImage = CanvasRenderingContext2D.prototype.drawImage;
CanvasRenderingContext2D.prototype.drawImage = function (image, sx, sy, sw, sh, dx, dy, dw, dh) {
if (("nodeName" in image) && /img/i.test(image.nodeName)) {
for (var i = arguments.length - 1; i >= 1; i--) {
arguments[i] = arguments[i] * factor;
}
} else if (typeof dw == "undefined") {
arguments[1] *= factor;
arguments[2] *= factor;
arguments[3] *= factor;
arguments[4] *= factor;
}
drawImage.apply(this, arguments);
};
}
```
在cmd中this指向undefined，而将QRcode挂载到window上或者使用amd时this指向则是window。
```
// 修改
var _android = _getAndroid();
if (_android && _android <= 2.1) {
// ...code
}
```
2. 降级
虽然源码中做了多种方案，但是因为一些产品和视觉上的限制，可能绘制的二维码并不可用（依赖客户端识别二维码的实现），二维码本意是方便传播，我们自己的需求中查看了数据预估了一下，对一些低版本直接进行了url的展示让用户自己复制。
3. 测试
源码中有很多关于系统版本的判断，可以使用chrome的调试工具去修改ua测试。
### use
webpack
```
npm install @roronoalee/qrcodejs
```
```
import QRCode from '@roronoalee/qrcodejs'
```
amd
```
require(['QRCode'], function (QRcode) {
// ... your code
});
```
cdn
```
```
## Browser Compatibility
IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.
## License
MIT License
## Contact
twitter @davidshimjs
[](https://bitdeli.com/free "Bitdeli Badge")