c-lodop打印 html后，html中的条码不能识别问题排查

目前有一个需求，就是将外卖订单绘制成 html页面，再通过 c-lodop 打印出来，外卖小票大概是如下的样子。其中外卖小票的底部有一个条码，这个条码是基于 JsBarcode 将订单编号转为的条码。刚开始听不到扫码枪"滴"的声音。经过自己的排查，最终听到了"滴"的声音。

问题描述

目前，在实现这需求的过程中，遇到一个问题，打印出来的小票，扫码枪识别不了底部的条码。

场景 1：通过 c-lodop + 电脑自带的打印，打印出来的pdf. 底部的条码，手机是可以扫描识别的，但是扫码枪识别不了。

场景 2：通过 c-lodop + 真是打印机，打印出来的纸质小票。底部的条码，手机和扫码枪都识别不了。

JsBarcode 绘制条码的代码如下

javascript 复制代码

function _barCodeFoo(tid){
            const $svg = $(`<svg  id="ele_${tid}"/>`)
            $svg.JsBarcode(tid, {
                format: 'CODE128', // CODE128 , CODE128_A
                width: 1, // 条的宽度，建议 1~3
                // height: 120, // 条码高度，建议 >= 50，太低可能影响扫描
                displayValue:  true, // 显示数字
                margin: 0,
            });
            let src = 'data:image/svg+xml;base64,' + btoa(unescape($svg.prop('outerHTML')))
            console.log('条形码 bar ',src)
            return src;
        }

排查1

可能原因 1：JsBarcode 方法中，width 设置可能原因 2：图片的宽度、高度导致的

于是做了一些尝试，但是问题依然存在。扫码枪依然识别不了底部的条码。

排查 2

先看图

图 1

图 2

html页面中，底部条码图片中样式 object-fit: cover; 是生效的。但是实际用 c-lodop 来打印的时候，object-fit: cover;就没有生效。特别是订单编号很短的时候，非常明显。

推测于是，我有了如下的推测。

因为底部的条码是最终是生成的是 base64 的图片，再将这个 base64 的图片通过 img 标签来显示出来。是不是 c-lodop 在打印条码的时候，条码图片会被压缩、失真。于是我问了下豆包。豆包提供的回答如下。

新的尝试

基于上述排查 2 的思路，于是我改变下生成条码图片的方式。问了下豆包，生成条码图片的方式。

将订单编号改为 123456789，用两种方式生成的条码图片如下。base64 生成的条码图片用扫码枪不能识别，基于 canvas生成的条码图片扫码枪是可以识别的。

我使用扫码枪是可以识别方式 2 生成的条码图片的。听到一声"滴"，我开心的笑了。哈哈

总结

生成条码图片的时候，最好使用 canvas 来生成图片。这种方式生成的条码图片，在通过 c-lodop打印的时候不会被压缩、失真。此时扫码枪是可以识别条码的。

最后，附上关键的代码。

php 复制代码

// 之前基于 base64生成条码图片，c-lodop打印的时候会压缩，导致失真，条码枪识别不了。
        // 改为 基于 canvas 生成图片，这种图片不会因压缩导致线条失真
        function _barCodeFoo3(tid) {
            const canvas = document.createElement('canvas');
            JsBarcode(canvas, 123456789, {
                format: 'CODE128',
                width: 2,  // 条码宽度（建议 2~3）
                height: 50, // 条码高度（建议 >=50）
                displayValue: true, // 是否显示数字
                margin: 0
            });
            // 转换为 Base64 PNG
            const pngDataUrl = canvas.toDataURL('image/png');
            return pngDataUrl;
        }