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

水深无声 2023-06-22 05:30 6阅读 0赞

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

### 问题 ###

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

### 解决方法 ###

*  猜测： 数字显示不清晰应该是插件生成条形码时计算像素导致的
 *  解决方法：
    
    1.  先生成一个较大的清晰的图片
    2.  设置父元素尺寸，让图片完全铺在父元素内
    
        
        <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”  
    ![优化前数字模糊不清][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1ZWd1YW5nTWFOb25n_size_16_color_FFFFFF_t_70]  
    ![优化后数字清晰可见][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1ZWd1YW5nTWFOb25n_size_16_color_FFFFFF_t_70 1]

### 打印效果 ###

![优化前后打印对比][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1ZWd1YW5nTWFOb25n_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1ZWd1YW5nTWFOb25n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191214154742407.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1ZWd1YW5nTWFOb25n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1ZWd1YW5nTWFOb25n_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191214154826418.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1ZWd1YW5nTWFOb25n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1ZWd1YW5nTWFOb25n_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191214155130630.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1ZWd1YW5nTWFOb25n,size_16,color_FFFFFF,t_70