qrcode.js

github

浏览器支持canvas

当浏览器支持canvas的时候，使用canvas生成二维码，canvas生成后，使用：

elCanvas.toDataURL(“image/png”)

将canvas转换成png格式的图片，最后二维码显示png图片，图片大小为初始传人的size。

浏览器不支持canvas

现比较常用的二维码生成的js库，在兼容较低版本的浏览器，在不支持canvas时的情况，一般使用table来实现。

下面重点介绍一下，使用table绘制二维码时，二维码相关的size问题：

1.getModuleCount方法获得二维码每行或者每列点的数量count，每个黑(白)点就是一个单元格。 2.Math.floor(option.width / count)和Math.floor(option.height / count)计算每个单元格的宽高。

考虑一下，向下取整的方式计算宽高。假设计算后的单元格宽高为2.8 * 2.8，向下取整后为2 * 2.如果这个时候二维码是30 * 30的点阵，那么最后宽高比原来就小了0.8 * 30 = 24个像素。

当然作者在后面对这样的size变小做了弥补。

3.MarginLeftTable = (option.width - table.offsetWidth) / 2 和 MarginTopTable = (option.height - table.offsetHeight) / 2 计算出margin，作为补充。

这样，相当于最终生成的二维码依然可以填满初始设置的容器，但是会产生白边。

业务

在实际应用的开发中，因为这样的计算规则，导致在支持canvas的浏览器和不支持canvas上的浏览器，二维码大小会有不同的表现。产品、测试看到的现象是在低版本浏览器中二维码的size会更小，开发需要去解决。

如何解决

了解table的特性

设置：

td{
    border: 0;
    padding: 0;
    border-collapse: collapse;
}

排除单元格的属性对计算带来的影响。

1.table不设置宽高属性，且无父元素限制

Table.width = 每列的单元格宽度最大值的总和;
Table.height = 每行的单元格高度最大值的总和;

2.table设置宽高属性，或者有父元素限制

if(
    Table.offsetWidth >= 每列的单元格宽度最大值的总和;
    Table.offsetHeight >= 每行的单元格高度最大值的总和;
)
    每列单元格宽 = Table.offsetWidth * (当前列的单元格宽度最大值/每列的单元格宽度最大值的总和);
    每列单元格高 = Table.offsetHeight * (当前行的单元格高度最大值/每行的单元格高度最大值的总和);

if(Table.offsetWidth < 每列的单元格宽度最大值的总和)

    以Table.offsetWidth为准，
    每列单元格宽 = Table.offsetWidth * (当前列的单元格宽度最大值/每列的单元格宽度最大值的总和);

if(Table.offsetHeight < 每行的单元格高度最大值的总和)

    以每行的单元格高度最大值的总和为准
    Table.offsetHeight = 每行的单元格高度最大值的总和;

因为生成二维码时，计算后td.width = td.height，每个单元格大小相同，且Table.offsetSize小于设置的Size所以设置

<table style=“width:100%;height:100%;margin:0”>
</table>

然后给二维码容器元素设置宽高，即可等比缩放二维码