[JavaScript知识库]使用JavaScript创建SVG矢量图Code128编码

起因

本来设计使用20开头的EAN13 作为店内码的, 实际查询发现. 一些20开头的也是商品条码. 这就有点尴尬了, 为了不和商品条码冲突, 只好改变编码规则, 因此需要实现输出SVG格式的Code128条码.

设计

Code128是支持ABC混合编码的, 在生成条码过程中可以切换码表. 考虑字符密度,优先使用 Code128-C 作为数字编码, 如果有字母,则切换到Code128-B.

这里附上 Code-128码表

编码构成

开始位 + 后面所有的数据按顺序拼接 + 校验位 + 结束位

编码索引的103-106为起始位于结束位，只会在开头或结尾出现

我们首先使用一个简单的例子来解释如何使用三种编码方式进行条形码的编码：

需要编码成条形码的数据：1346

对于Code128A编码：

对于Code128B编码：

对于Code128C编码：

Code128C编码时，只能编码数字内容，并且在编码前会将偶数个的数字两个两个分为一组，进行编码：

混合编码

中间要切换编码只需加入切换编码查表线值表即可，索引需要计入校验，计算方法一致。

实现代码

const codeC = [
    1740,1644,1638,1176,1164,1100,1224,1220,1124,1608,1604,1572,1436,1244,1230,1484,1260,1254,1650,1628,
    1614,1764,1652,1902,1868,1836,1830,1892,1844,1842,1752,1734,1590,1304,1112,1094,1416,1128,1122,1672,
    1576,1570,1464,1422,1134,1496,1478,1142,1910,1678,1582,1768,1762,1774,1880,1862,1814,1896,1890,1818,
    1914,1602,1930,1328,1292,1200,1158,1068,1062,1424,1412,1232,1218,1076,1074,1554,1616,1978,1556,1146,
    1340,1212,1182,1508,1268,1266,1956,1940,1938,1758,1782,1974,1400,1310,1118,1512,1506,1960,1954,1502,
    1518,1886,1966,1668,1680,1692,6379
],codeB=[
    null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,
    null,null,null,null,null,null,null,null,null,null,null,null,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,
    18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,76,42,43,44,45,46,47,48,49,50,51,52,
    53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,null,77,78,79,80,81,82,83,84,85,86,87,
    88,89,90,91,92,93,94,95,102,97,96,100
];

function Code128B(code, conf){
    let chars = code.split(/(\d{2}|[^\d]{1})/).filter(v=>v!=''), sum = 105, n=[], bits = [], pos = 1;
    var enc;
    const modeB=0,modeC=1;
    chars.forEach((ch, i)=>{
        let len = ch.length, v;
        if(i == 0){
            if(len == 1){
                sum = 104;
                enc = modeB; 
                v = codeB[ch.charCodeAt(0)];
                n.push(codeC[104]);
            }else{
                sum = 105;
                enc = modeC;
                v = parseInt(ch);
                n.push(codeC[105]);
                //console.log('start C', ch, v);
            }
            n.push(codeC[v]);
        }else{
            if(enc == modeC){
                if(len == 1){
                    enc = modeB;
                    sum += 100 * pos++;
                    n.push(codeC[100]);
                    v = codeB[ch.charCodeAt(0)];
                }else{
                    v = parseInt(ch);
                }
            }else{
                if(len == 1){
                    v = codeB[ch.charCodeAt(0)];
                }else{
                    enc = modeC;
                    sum += 99 * pos++;
                    n.push(codeC[99]); //codeB => codeC
                    v = parseInt(ch);
                }
            }
            n.push(codeC[v]);
        }
        sum += v * pos++;
    });

    n.push(codeC[sum % 103], 6379);
    n.forEach(v=>{
        var b = []
        do{
            b.push(v & 1 ? 1:0);
            v >>=1;
        }while(v > 0)
        bits.push(...b.reverse());
    })
    //console.log(bits);
    var x=-1, w = 0, nCount = bits.length+6, y = conf.name ? (2+conf.fsize) : 0,s = [],
    bar = [`<svg viewBox="0 0 ${nCount} ${conf.h}" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">`];

    bits.forEach((v,i)=>{
        if(0 == v || i == bits.length-1){
            if(w > 0){
                var h = (x < 14 || x > bits.length - 12)? conf.h - y : conf.h - y - 6.5;
                s.push('M', x, ' ', y,'h', w, 'v', h, 'h', -w, 'Z')
                x = -1;w = 0;
            }
        }else{
            if(-1 == x ){x = i+3;}
            w++;
        }
    })

    bar.push('<path d="', s.join(''),'"/>')
    const unit = (nCount - (6 + 13 + 14)) / code.length;
    for(var i = 0; i < code.length;i ++){
        bar.push('<text x="', 16 + i * unit ,'" y="', conf.h - 0.4,'" text-anchor="left" font-size="7" font-family="Verdana">', code[i] , '</text>')
    }
    if(conf.name){
        bar.push('<text x="',nCount/2,'" y="',conf.fsize - 0.5,'" font-size="',conf.fsize,'" width="',nCount,'" text-anchor="middle" font-family="Verdana">',conf.name,'</text>')
    }
    bar.push('</svg>')
    return {
        svg: bar.join(''),
        lines: nCount
    }
}

var svg = Code128B('Z65432189120', {h:45, name:'很好', fsize:9});

上面的代码执行效果如下:

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖