aralejs/qrcode

二维码生成模块

qrcode

---

二维码组件，用于绘制二维码。

已添加UTF-8编码，中文生成的二维码扫描不会出现乱码。

二维码编码原理

---

配置说明

render string

配置用哪个节点元素画二维码，选项有table、svg和canvas

默认的选择顺序为 canvas -> svg -> table

text string

要编码的字符串

默认：""

size number

二维码的宽和高，单位是px，只允许生成正方形二维码

需要注意的是，当使用table绘制二维码时，会适当减小，使得能够整除二维码矩阵的维度。

默认：256

correctLevel number

纠错级别，可取0、1、2、3，数字越大说明所需纠错级别越大

默认：3

background color

背景色

默认：#FFFFFF

foreground color

前景色

默认：#000000

pdground color

三个角的颜色

默认：foreground

image string

码正中间图片的url，只支持配置正方形图片

默认：''

imageSize number

image的宽和高，单位px

默认：30

other

支持script标签引用，暴露全局变量为 AraleQRCode

<script src='dist/arale-qrcode/3.0.2/lib/index.js'></script>
<script> 
	new AraleQRCode({...});
</script>

qrcode's Issues

移动端使用rem，如何修改size属性

移动端二维码都是使用rem作单位，如何修改二维码size尺寸。

说好的支持中文呢？

再次优化了SVG的绘制，有两种方案，一种注重效率，一种注重质量，选择哪个呢？

第一种注重效率，目测平均效率提升50%，因为少绘制了一半元素：

// draw qrcode by svg
qrcode.prototype.createSVG = function (qrCodeAlg) {
    var x, y,
        moduleCount = qrCodeAlg.getModuleCount(),
        scale = this.options.height / this.options.width,
        dx = moduleCount * 16,
        dy = moduleCount * 16 * scale,
        svg = '<svg xmlns="http://www.w3.org/2000/svg" '
             + 'width="' + this.options.width + 'px" height="' + this.options.height + 'px" '
             + 'style="padding:0;margin:0;border:none;background:' + this.options.background + ';" '
             + 'viewbox="0 0 ' + dx + ' ' + dy + '">',
        rectHead = '<path style="padding:0;margin:0;border:none;stroke-width:1;'
             + 'stroke:' + this.options.foreground + ';fill:' + this.options.foreground + ';" ',
        rectFoot = '></path>';

    // draw in the svg
    for (var row = 0; row < moduleCount; row++) {
        for (var col = 0; col < moduleCount; col++) {
            if (qrCodeAlg.modules[row][col]) {
                x = col * 16;
                y = row * 16 * scale;
                dx = (col + 1) * 16;
                dy = (row + 1) * 16 * scale;

                svg += rectHead + 'd="M ' + x + ',' + y
                    + ' L ' + dx + ',' + y
                    + ' L ' + dx + ',' + dy
                    + ' L ' + x + ',' + dy
                    + ' Z"';

                svg += rectFoot;
            }
        }
    }

    svg += '</svg>';

    // return just built svg
    return $(svg)[0];
}

第二种注重质量，绘制效果可以和canvas媲美，但是效率和现在不会有提升：

// draw qrcode by svg
qrcode.prototype.createSVG = function (qrCodeAlg) {
    var x, y, dx, dy,
        moduleCount = qrCodeAlg.getModuleCount(),
        width = options.width / moduleCount.toPrecision(4), // compute width based on options.width
        height = options.height / moduleCount.toPrecision(4); // compute height based on options.height
        svg = '<svg xmlns="http://www.w3.org/2000/svg" '
             + 'width="' + this.options.width + 'px" height="' + this.options.height + 'px" '
             + 'style="padding:0;margin:0;border:none;">',
        foreHead = '<path style="padding:0;margin:0;border:none;stroke:none;fill:' + this.options.foreground + ';"',
        backHead = '<path style="padding:0;margin:0;border:none;stroke:none;fill:' + this.options.background + ';"',
        rectFoot = '></path>';

    // draw in the svg
    for (var row = 0; row < moduleCount; row++) {
        for (var col = 0; col < moduleCount; col++) {
            x = Math.round(col * width);
            y = Math.round(row * height);
            dx = x + Math.ceil((col + 1) * width) - Math.floor(col * width);
            dy = y + Math.ceil((row + 1) * height) - Math.floor(row * height);

            svg += (qrCodeAlg.modules[row][ col] ? foreHead : backHead)
                + ' d="M ' + x + ',' + y
                + ' L ' + dx + ',' + y
                + ' L ' + dx + ',' + dy
                + ' L ' + x + ',' + dy
                + ' Z"';

            svg += rectFoot;
        }
    }

    svg += '</svg>';

    // return just built svg
    return $(svg)[0];
}

@littlebeat @lizzie 两者选一吧~

通过script标签引入，找不到AraleQRCode

如题，根据文件结构引入<script type=:text/javascript src="../dist/arale-qrcode/3.0.5/index.js"></script>,

<script type="text/javascript">

    var qrnode = new AraleQRCode({
      render: 'canvas',
      correctLevel: 0,
      text: 'http://www.alipay.com/',
      size: 300,
      background: '#eeeeee',
      foreground: '#667766',
      pdground: '#00aaee',
      image : 'http://img0.bdstatic.com/img/image/shouye/touxiang1109.jpg',
      imageSize : 100
    });
    document.getElementById('qrcodeCanvas').appendChild(qrnode);
  </script>

提示找不到 AraleQRCode

有配置二维码密集程度的配置吗？我看支付宝的二维码很密密麻麻的

有配置二维码密集程度的配置吗？我看支付宝的二维码很密密麻麻的

请问这个是要基于NodeJS的吗？

在IE7、8下面使用table生成，但是设置的宽度和高度无效

spm build 之后那个 dist/arale-qrcode/3.0.4 下的index.js 没有出现 this.AraleQrcode=。。。。

支持设置logo背景

可以支持一下设置logo背景颜色吗

还依赖seajs，是吗？

我只找到src/下的文件，但是不知道2个文件代表什么。

然后发现还依赖seajs，我的项目并没有seajs，而且不打算用，挺困惑的。

加入logo生成的二维码无法扫描

可以控制白边的生成么

就是二维码周边的白色边框。。。

用canvas生成带logo二维码，toDataURL保存图片时，中间的logo图片丢了，只剩下二维码图片了

带有image的二维码有可能无效

http://docs.spmjs.io/arale-qrcode/latest/examples/ 你的示例中的第二个和第三个都很难扫出来，我自己做的时候，中间插入图片的话（size=200,imageSize =50），

var qrnode = new AraleQRCode({
      render: 'canvas',
      correctLevel: 0,
      text: data.coupon.code,
      size: 200,
      image : 'http://img0.imgtn.bdimg.com/it/u=2803538676,3839002648&fm=21&gp=0.jpg',
       imageSize : 50
});

这样生成的二维码 如法扫描，但是imageSize改成30的话，就可以了

请问代码里依赖qrcodealg，qrcodealg在哪找？

qrcodealg在哪找？

沒有看到LICENSE文件，請問是基於哪種許可證開源？

如題

.

如果text参数是个number类型，会导致生成的二维码不对。

var data = 123456
var qrnode = new qrcode({
        text: "" + data,
        size: size || 200
});

text 如果不是字符串，生成的无法识别。

canvas和table画出的二维码不能扫描

本地直接跑代码无效，直接在spm上面的例子里面扫描生成的二维码也是无效的：

http://docs.spmjs.io/arale-qrcode/latest/examples/

生成的二维码是否可以使image,因为这些image我要下载下来用

如题，想知道是否可以将生成的二维码转换为image，然后可以下载下来，看了很多都是直接生成svg或者canvas，虽说也可以下载保存为image，但是我的下载是通过程序下载(比如爬虫)

对浏览器的支持如何？尤其低端浏览器，比如IE6，7，8。手机浏览器呢？