优化jquery-EAN13生成的条形码下方的数字模糊不清
问题
jquery-EAN13插件在生成条码时,当条形码的尺寸太小的时候,条码下方的数字显示会比较模糊,
调大条形码的此次,生成的条形码就很清晰,但是有时候我们只需要一个很小的条形码该怎么办呢?
解决方法
-
猜测: 数字显示不清晰应该是插件生成条形码时计算像素导致的
-
解决方法:
- 先生成一个较大的清晰的图片
- 设置父元素尺寸,让图片完全铺在父元素内
<!-- 父元素的尺寸小于生成的图片,这里使用mm单位是为了确保打印效果符合工厂要求 --> <div class="barcode-img" style="height: 20mm;width: 50mm"> <canvas id="ean" width="300px" height="120px"></canvas> </div>
成果
- 调整前的尺寸:width=“150px” height=“60px”
- 调整后的尺寸:width=“300px” height=“120px”