识别EAN-13条形码（JavaScript）

最新推荐文章于 2024-08-08 08:11:14 发布
最新推荐文章于 2024-08-08 08:11:14 发布
阅读量2.5k 收藏 10
点赞数 2
分类专栏： 课程实验 开发 条形码 文章标签： EAN-13识别 JavaScript 原生js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37945943/article/details/89328231
版权

上篇文章写了如何用JavaScript生成EAN-13条形码，这次讲下如何不用库，用原生JavaScript识别EAN-13条形码。

老师给的实验方法是：
面向一维条码的图像识别，是模式识别与机器智能的一种最简单的应用。假设之间你生成的一维码图像（不含人识别的数字），假设你的图像扫描设备完全平行于一维码（即图像没有旋转），则图像可简单理解为在一特定矩形区域内的黑白相间的直方图。对于一个特定的像素点，如果是一个字节表示某个像素点的灰度值，则理论上黑的灰度很高，白的灰度很低。识别是取一个中间值，大于此值的为1（黑），小于此值的为零（白）。
识别是，可以在二维的维度进行，也可以把你的二维图像映射到一维，即把矩形区域的直方图全部投影到X轴，简单判别X轴每个像素点的灰度值，就能识别各个黑白模块的宽度，和宽度相对值，即可识别。

原本小组的另一个同学是已经利用Java的条形码库做好识别了，但是按照这个要求，就必须得自己写识别算法了，所以我查了一下如何用JavaScript做图像识别，参照https://blog.csdn.net/sunny_xsc1994/article/details/78355033
根据这篇博客我获取了上传的图片的像素矩阵，获取矩阵以后我发现，这个矩阵好大啊，输出这个像素矩阵还卡了，因为我的图片宽高还有点大，再加上这个矩阵里包含的值有该像素的red、green、blue、alpha四个值，所以这个像素矩阵的大小为宽 X高 X 4，不过得到这个矩阵后，就有了大致思路了
获取的像素矩阵

  1. 取条码的第一行像素点的值
  2. 确定条码的单位模块宽度
  3. 根据单位模块宽度确定剩余条和空的宽度并确定是条或空
  4. 查询条码的数值对应表确定后12位的值以及版本
  5. 根据得到的12位码的前六位判断第一位

知道逻辑以后就开始正式的识别条码了。

取条码的第一行像素点的值
我这里采用了偷懒的方式，已经像素矩阵大小 = 图像宽度 * 图像高度 * 4
所以这个矩阵可以利用for循环遍历，其中i代表了行，j就代表了第j个像素点的red值
为什么说偷懒，因为我这里直接取了red值，并没有将rbga的四个值结合，所以这里也导致了我后面出现了识别率的问题。

这个for循环是得到非空白区的第一行的下标以及这一行的起始码的第一个像素点下标，记为startI，startJ。

for(var i=0;i<array.length/(4*image.width);i++){
    for(var j=0;j<array.length/(4*image.height);j++){
         if(data[4*i*image.width+j*4-4]===255&&data[4*i*image.width+j*4]===0){
             startI=i;
             startJ=j;
             break;
         }
     }
 }

这个for循环是取出第一行条码的最后一位终止码的最后一个像素点的下标，记为endJ。

for(var i=image.width*4-4;i>=0;i--){
   for(var j=0;j<array.length/(4*image.height);j++){
        if(data[4*i*image.width+j*4+4]===255&&data[4*i*image.width+j*4]===0){
            endJ=j;
            break;
        }

    }
}

然后把这一行的条码的所有像素点的red值放入数组作为之后处理的数据数组

for(var i=startJ;i<endJ;i++){
    arrayPX.push(data[startI*4*image.width+i*4]);
}
console.log(arrayPX);

这里输出的arrayPX显示为
在这里插入图片描述
这里的输出其实能看出一些问题，就是我的结尾像素取得似乎出问题，但是起始像素点取得没有问题，所以暂时先这样，如果大家有好的算法可以自己再优化一下。

确定条码的单位模块宽度
因为EAN-13码的编码规则是有起始码并且为101，而一个“1”和一个“0”都是占了一个单位模块宽度，所以我就从第一个像素点开始进行遍历，来获取单位宽度。
basicLen代表单位模块宽度。

var temp=arrayPX[0];
var j;
var basicLen;
for(j=1;j<arrayPX.length;j++){
    if(Math.abs(arrayPX[j]-temp)>150){
        basicLen=j;
        oneLindeCode.push(1);
        break;
    }
}

然后就是利用这个单位宽度，判断后面的条和空的宽度了。

根据单位模块宽度确定剩余条和空的宽度并确定是条或空

这里用tempOneCode储存除起始位的条空的二进制编码。
因为前面偷懒的原因，导致这里就要纠结精确度的问题了，同时因为将截图得到的条形码上传以后用Canvas加载图片出现了失真问题，得到的像素点的red值有了波动，所以我这里做了大约的处理，在判断某个条和空时，如果遍历碰到某个像素点的red值和此次循环的起始像素点的red值差值的绝对值在150以上，说明已经到了下一个空和条，需要进行下一次遍历了，而它的宽度也由于失真出现了波动，如果这个像素的下标减去起始像素点的下标除去单位模块宽度在一定范围内就将它归于一个宽度，参照代码可以知道怎么处理。

var temponeCode=new Array();
for(var i=basicLen;i<arrayPX.length;i++){
    var flag=1;
    var temp = arrayPX[i];
    var j;
    for(j=i+1;j<arrayPX.length;j++){
        if(Math.abs(arrayPX[j]-temp)>150){
            flag=0;
            break;
        }
    }
    var length = j-i;
    var dif = length/basicLen;
    var thisLen;
    if(dif<1.5&&dif>0.5){
        thisLen=1;
    }
    else if(dif<2.5&&dif>1.5){
        thisLen=2;
    }
    else if(dif<3.5&&dif>2.5){
        thisLen=3;
    }
    else {
        thisLen=4;
    }
    var bin;
    if(Math.abs(temp-255)<=100)
        bin=0;
    else
        bin=1;
    for(var k=0;k<thisLen;k++){
        temponeCode.push(bin);
    }
    i=j-1;
}

前面提到了结束像素点取得有点问题，所以我们直接取得到的前95个二进制码（一个EAN-13码共有95个模块）。

oneLindeCode.push(1);
for(var i=0;i<94;i++){
    oneLindeCode.push(temponeCode[i]);
}

查询条码的数值对应表确定后12位的值以及版本

这里就遍历数组就行，我先定义了ABC三个版本不同数值对应的二进制编码的值组成的数组，以及不同起始符对应的前六位数值的版本所组成的数组

var PresentNumber=
    [   "0001101","0100111","1110010",
        "0011001","0110011","1100110",
        "0010011","0011011","1101100",
        "0111101","0100001","1000010",
        "0100011","0011101","1011100",
        "0110001","0111001","1001110",
        "0101111","0000101","1010000",
        "0111011","0010001","1000100",
        "0110111","0001001","1001000",
        "0001011","0010111","1110100"
    ]


var version=[
    ["A","A","A","A","A","A"],
    ["A","A","B","A","B","B"],
    ["A","A","B","B","A","B"],
    ["A","A","B","B","B","A"],
    ["A","B","A","A","B","B"],
    ["A","B","B","A","A","B"],
    ["A","B","B","B","A","A"],
    ["A","B","A","B","A","B"],
    ["A","B","A","B","B","A"],
    ["A","B","B","A","B","A"]
];

因为前六位数值和后六位数值中间隔着中间分隔符，所以我将循环分开了，先判断前六位
还有起始码，所以从点3（编号为0-94）开始遍历。

for(var i=3;i<45;i+=7){
 str="";
 for(var j=0;j<7;j++){
     str+=oneLindeCode[i+j].toString();
 }
 console.log(str);
 var index;
 for(var k=0;k<30;k++){
     if(str===PresentNumber[k]){
         index=k;
         break;
     }
 }
 codeBar.push(parseInt((index+1)/3));
 if(index%3===0){
     tempVersion.push("A");
 }
 else if(index%3===1){
     tempVersion.push("B");
 }
 else
     tempVersion.push("C");
}

然后确定后六位

for(var i=50;i<92;i+=7){
    str="";
    for(var j=0;j<7;j++){
        str+=oneLindeCode[i+j].toString();
    }
    console.log(str);
    var index;
    for(var k=0;k<30;k++){
        if(str===PresentNumber[k]){
            index=k;
            break;
        }
    }
    codeBar.push(parseInt((index)/3));
}

最后输出结果如下
在这里插入图片描述
和上传的图片的码一致了，说明处理成功了，然后就是判断起始符。

根据得到的12位码的前六位判断第一位

js部分

for(var i=0;i<10;i++){
    if(version[i].toString()==tempVersion.toString()){
        startCode=i;
        break;
    }
}

然后就将得到的这十三位的条码在网页上显示了。

源码

var PresentNumber=
    [   "0001101","0100111","1110010",
        "0011001","0110011","1100110",
        "0010011","0011011","1101100",
        "0111101","0100001","1000010",
        "0100011","0011101","1011100",
        "0110001","0111001","1001110",
        "0101111","0000101","1010000",
        "0111011","0010001","1000100",
        "0110111","0001001","1001000",
        "0001011","0010111","1110100"
    ]


var version=[
    ["A","A","A","A","A","A"],
    ["A","A","B","A","B","B"],
    ["A","A","B","B","A","B"],
    ["A","A","B","B","B","A"],
    ["A","B","A","A","B","B"],
    ["A","B","B","A","A","B"],
    ["A","B","B","B","A","A"],
    ["A","B","A","B","A","B"],
    ["A","B","A","B","B","A"],
    ["A","B","B","A","B","A"]
];

var oneLindeCode = new Array();

//识别条形码
function readCodeBar() {

    //创建画布
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');

    //读取图片
    var myCodeBar = document.getElementById("input_image").files[0];
    var reader = new FileReader();
    reader.readAsDataURL(myCodeBar);

    reader.onload = function (ev) {
        var image = new Image();
        image.src = ev.target.result;
        image.onload = function () {

            console.log("宽度"+this.width+"高度"+this.height);
            ctx.drawImage(image,0,0,image.height,image.width);
            var data = ctx.getImageData(0,0,image.width,image.height).data;
            // console.log(data.toString());
            var array = data;
            var startI ,startJ,endJ;
            var arrayPX = new Array();
            for(var i=0;i<array.length/(4*image.width);i++){
                for(var j=0;j<array.length/(4*image.height);j++){
                    if(data[4*i*image.width+j*4-4]===255&&data[4*i*image.width+j*4]===0){
                        startI=i;
                        startJ=j;
                        break;
                    }

                }
            }
            for(var i=image.width*4-4;i>=0;i--){
                for(var j=0;j<array.length/(4*image.height);j++){
                    if(data[4*i*image.width+j*4+4]===255&&data[4*i*image.width+j*4]===0){
                        endJ=j;
                        break;
                    }

                }
            }
            for(var i=startJ;i<endJ;i++){
                arrayPX.push(data[startI*4*image.width+i*4]);
            }
            // console.log(arrayPX.toString());
            // arrayPX.push(data[4*i*image.width+j*4]);
            var temp=arrayPX[0];
            var j;
            var basicLen;
            for(j=1;j<arrayPX.length;j++){
                if(Math.abs(arrayPX[j]-temp)>150){
                    basicLen=j;
                    oneLindeCode.push(1);
                    break;
                }
            }
            var temponeCode=new Array();
            for(var i=basicLen;i<arrayPX.length;i++){
                var flag=1;
                var temp = arrayPX[i];
                var j;
                for(j=i+1;j<arrayPX.length;j++){
                    if(Math.abs(arrayPX[j]-temp)>150){
                        flag=0;
                        break;
                    }
                }
                var length = j-i;
                var dif = length/basicLen;
                var thisLen;
                if(dif<1.5&&dif>0.5){
                    thisLen=1;
                }
                else if(dif<2.5&&dif>1.5){
                    thisLen=2;
                }
                else if(dif<3.5&&dif>2.5){
                    thisLen=3;
                }
                else {
                    thisLen=4;
                }
                var bin;
                if(Math.abs(temp-255)<=100)
                    bin=0;
                else
                    bin=1;
                for(var k=0;k<thisLen;k++){
                    temponeCode.push(bin);
                }
                i=j-1;
            }
            //生成正式的二进制代码
            for(var i=0;i<94;i++){
                oneLindeCode.push(temponeCode[i]);
            }
            console.log(oneLindeCode)
            var codeBar=new Array();
            var str = new String();
            var tempVersion = new Array();
            for(var i=3;i<45;i+=7){
                str="";
                for(var j=0;j<7;j++){
                    str+=oneLindeCode[i+j].toString();
                }
                console.log(str);
                var index;
                for(var k=0;k<30;k++){
                    if(str===PresentNumber[k]){
                        index=k;
                        break;
                    }
                }
                codeBar.push(parseInt((index+1)/3));
                if(index%3===0){
                    tempVersion.push("A");
                }
                else if(index%3===1){
                    tempVersion.push("B");
                }
                else
                    tempVersion.push("C");
            }
            for(var i=50;i<92;i+=7){
                str="";
                for(var j=0;j<7;j++){
                    str+=oneLindeCode[i+j].toString();
                }
                console.log(str);
                var index;
                for(var k=0;k<30;k++){
                    if(str===PresentNumber[k]){
                        index=k;
                        break;
                    }
                }
                codeBar.push(parseInt((index)/3));
            }
            console.log(codeBar);
            console.log(tempVersion);
            var startCode;
            for(var i=0;i<10;i++){
                if(version[i].toString()==tempVersion.toString()){
                    startCode=i;
                    break;
                }
            }
            var tempStr=new String();
            tempStr+=startCode;
            for(var i=0;i<12;i++){
                tempStr+=codeBar[i];
            }
            $("#codeBar_content").val(tempStr)
            // var data = ctxt.getImageData(0,0,this.width,this.height).data;
            // console.log(data,data.toString());
        }
    }
}

html部分

<div id="body_read">
    <input id="input_image" type="file" placeholder="请上传条码图片">
    <button id="read_EAN" "readCodeBar()">识别条形码</button>
</div>

<canvas id="canvas">对不起，你的浏览器不支持Canvas</canvas>
<textarea id="codeBar_content"></textarea>

总结
虽然这个代码可以识别出一些条形码，但是还有挺大的失误的，比如上传的图片上方空白过多就会出错，以及在同一个页面里暂时只能做一次处理，好像是因为图像缓存的问题，大家都可以再优化。

小新新新新新_
关注
专栏目录
EAN-13 编码原理
南七小僧的学海无涯
07-03 2790
原文地址：http://blog.csdn.net/FuWaer/article/details/1770317 EAN-13编码规则 英文原文地址：http://www.barcodeisland.com/ean13.phtml 翻译者：FuWaer 翻译时间：2007年8月31日 演示程序：http://blog.csdn.net/FuWaer/archive/2007/09/...
微信js扫一扫，扫条形码去掉code_128。在vue中封装全局对象的方法，封装微信js-sdk权限验证的方法
Baby_加油_的博客
10-23 1444
微信公众号在调用扫一扫功能时，一维码（条形码）在直接返回结果时会在结果前带上EAN_8, EAN_13, CODE_25, CODE_39, CODE_128, UPC_A, UPC_E wx.scanQRCode({ needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果， scanType: ["qrCode","barCode"], // 可以指定扫...
jQuery.EAN13：一个用于生成EAN13条形码的jQuery和普通JavaScript库
02-03
jQuery.EAN13.js jQuery.EAN13.js是一个轻量级库，可作为普通JavaScript和jQuery插件用于生成EAN-13条码。 用法 ### Include Plugin ###将以下代码插入页面的head ： JavaScript < script type =" text/javascript " src =" jquery-ean13.min.js " > </ script > jQuery的 < script type =" text/javascript " src =" ean13.min.js " > </ script > 确保在jQuery库
QuaggaJS 实用手册
最新发布
gitblog_00094的博客
08-08 659
QuaggaJS 实用手册 quaggaJSAn advanced barcode-scanner written in JavaScript项目地址:https://gitcode.com/gh_mirrors/qu/quaggaJS 1. 项目介绍 QuaggaJS 是一个使用纯JavaScript编写的高级条形码扫描器，支持实时定位和解码多种类型的条形码，如EAN、CODE 128等。该库...
JavaScript实现EAN13条码校验
nyzim的博客
06-05 553
JS校验EAN13条码代码
条形码生成EAN-13码（用JavaScript生成）
qq_37945943的博客
04-08 5190
条形码生成EAN-13码1.EAN-13条码的符号结构 这学期有门课专门讲条形码，然后实验就是生成一个EAN-13码并且识别，今天下午只先完成了生成，后面再补识别的。 1.EAN-13条码的符号结构 EAN-13条码由左侧空白区、起始符、左侧数据符、中间分隔符、右侧数据符、校验符、终止符、右侧空白区及供人识别字符组成。 这里用6901234567892为例 左侧空白区 左侧空白区位于条码符号...
JS实现识别条形码
10-08
利用 quagga.js 实现 识别条形码 打开页面即可使用 简单易懂
构建基于 Node.js 的条形码识别程序
weixin_33958585的博客
05-14 215
在这篇文章中，我们将展示一个非常简单的方法构建一个自定义的 Node 模块，该模块封装了Dynamsoft Barcode Reader SDK ，支持 Windows、Linux 和 OS X，同时我们将演示如何集成这块模块实现一个在线的条形码读取应用。 越来越多的 Web 开发者选择 Node 来构建网站，因为使用 JavaScript 来开发复杂的服务器端 Web 应用越来越便利。为了扩展在...
Javascript-Barcode-Reader:简单快速的条码解码器，支持 javascript 中的 Code128、Code93、Code39、StandardIndustrial 2 of 5、Interleaved 2 of 5、Codabar、EAN-13、EAN-8 条码
08-04
Javascript-条形码阅读器 适用于浏览器和 Node.js 的简单快速条码解码器，能够读取 Code128 (UCC/EAN-128)、Code93、Code39、标准/工业 2 of 5、Interleaved 2 of 5、Codabar 和 EAN-13 条码。 现在试试 可用的...
H5移动端识别二维码和条形码
07-06
再者，BarcodeReader.js是一个更全面的条形码和二维码识别库，除了支持常见的QR Code和条形码格式，如EAN、UPC等，还提供了更高级的功能，如错误校验和自定义解码回调。对于需要处理多种编码标准的项目，Barcode...
前端识别二维码和条形码
09-02
首先，前端识别二维码和条形码的核心是利用JavaScript库。在提供的"jqueryewm"文件中，我们可以推测这可能是一个基于jQuery的插件，用于处理二维码和条形码的扫描。jQuery是一个广泛使用的JavaScript库，它简化了DOM...
前端js识别条形码.zip
01-22
上传静态图片，前端js识别条形码，支持EAN-13码（EAN-13国际商品条码）、Code128码等条码类型。 开包即用！！！！！ 开包即用！！！！！ 开包即用！！！！！ 开包即用！！！！！ 开包即用！！！！！
纯HTML+JS实现条形码识别.zip
05-16
纯HTML+JS实现条形码识别 纯HTML+JS实现条形码识别 纯HTML+JS实现条形码识别 纯HTML+JS实现条形码识别 纯HTML+JS实现条形码识别 纯HTML+JS实现条形码识别 纯HTML+JS实现条形码识别 纯HTML+JS实现条形码识别 纯HTML+JS实现条形码识别 纯HTML+JS实现条形码识别 纯HTML+JS实现条形码识别 纯HTML+JS实现条形码识别 纯HTML+JS实现条形码识别 纯HTML+JS实现条形码识别 纯HTML+JS实现条形码识别 纯HTML+JS实现条形码识别 纯HTML+JS实现条形码识别 纯HTML+JS实现条形码识别 纯HTML+JS实现条形码识
ENA13条码生成
12-26
纯vc写的ENA13条形码生生工程,vc6.0编译通过，原创代码,严禁转载
网页中 BarcodeReader.js 识别商品条形码
罗汉松驻扎的工作基地
06-28 1447
最近要做一个商品挑选码的扫码程序， 我这里做了一个简单的 asp.net mvc 网站例子 ，有兴趣的可以看看。本人菜鸟，写错请见谅。 //参考文档 https://blog.csdn.net/qq_37164847/article/details/103731764 //平时自己常用来生成条形码的工具网站 http://www.t-x-m.com //别人做的条形码和二维码解析网站（可以用来对比自己做的程序） https://www.moyublog.com/demo/93_2536.htm.
Vu3+QuaggaJs实现web页面识别条形码
不积跬步无以至千里，不积小流无以成江海。一个喜欢学习分享的程序员
04-24 1614
QuaggaJS是一个基于JavaScript的开源图像识别库，可用于识别条形码。
js生产13位条形码
weixin_43384380的博客
01-28 576
JS生产13位条形码 Ean-13码规则：第十三位数字是前十二位数字经过计算得到的效验码 例如：690123456789 第三位计算其效验码的过程： @前十二位的奇数位和：6+0+2+4+6+8=26 @前十二位的偶数位和：9+1+3+5+7+9=34 @将奇数和与偶数和的三倍相加26+34*3=128 @取结果的个位数：128的个位数为8 @用10减去这个个位数10-8=2 所以效验码为2（注：如果取结果的个位数为0，那么效验码不是 (10-0=10)，而是0） 实现方法ean3() 计算效验码，输入12
web端(Javascript-Barcode-Reader)实现上传图片或拍照识别条形码的功能
大海无量的博客
12-27 1822
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>识别条形码</title> </head> <body> <input type="file" style...
使用JS调用手机本地摄像头或者相册图片识别二维码/条形码
02-14 2563
接着昨天的需求,不过这次不依赖微信,使用纯js唤醒手机本地摄像头或者选择手机相册图片,识别其中的二维码或者是条形码.昨天,我使用微信扫一扫识别,效果超棒的.不过如果依赖微信的话,又怎么实现呢,这里介绍两个js库,都很牛掰,感谢大神,献上链接. 仓库:https://github.com/serratus/quaggaJS 官网:https://serratus.github.io/...
js库如何识别条形码
05-25
要在JavaScript中识别条形码，您可以使用现有的JavaScript条形码识别库，如QuaggaJS，ZXing或JsBarcode。这些库都可以通过...这里使用QuaggaJS库从图像文件中扫描条形码，仅读取EAN条形码并在控制台中输出结果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值