优化jquery-EAN13生成的条形码不清晰

优化jquery-EAN13生成的条形码下方的数字模糊不清

问题

jquery-EAN13插件在生成条码时，当条形码的尺寸太小的时候，条码下方的数字显示会比较模糊，
调大条形码的此次，生成的条形码就很清晰，但是有时候我们只需要一个很小的条形码该怎么办呢？

解决方法

• 猜测： 数字显示不清晰应该是插件生成条形码时计算像素导致的

• 解决方法：

  1. 先生成一个较大的清晰的图片
  2. 设置父元素尺寸，让图片完全铺在父元素内

  <!-- 父元素的尺寸小于生成的图片，这里使用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”
  
  

打印效果