条形码生成EAN-13码
这学期有门课专门讲条形码,然后实验就是生成一个EAN-13码并且识别,今天下午只先完成了生成,后面再补识别的。
1.EAN-13条码的符号结构
EAN-13条码由左侧空白区、起始符、左侧数据符、中间分隔符、右侧数据符、校验符、终止符、右侧空白区及供人识别字符组成。
这里用6901234567892为例
-
左侧空白区
左侧空白区位于条码符号最左侧与空的反射率相同的区域,其最小宽度为11个模块宽。 -
起始符
起始符位于条码符号左侧空白区的右侧,表示信息开始的特殊符号,由3个模块组成。 -
左侧数据符
左侧数据符位于起始符右侧,表示6位数字信息的一组条码字符,由42个模块组成。 -
中间分隔符
中间分隔符位于左侧数据符的右侧,是平分条码字符的特殊符号,由5个模块组成。 -
右侧数据符
右侧数据符位于中间分隔符右侧,表示5位数字信息的一组条码字符,由35个模块组成。 -
校验符
校验符位于右侧数据符的右侧,表示校验符的条码字符,由7个模块。 -
终止符
终止符位于条码符号校验符的右侧,表示信息结束的特殊符号,由3个模块组成。 -
右侧空白区
右侧空白区位于条码符号最右侧的与空的反射率相同的区域,其最小宽度为7个模块宽。为保证右侧空白区的宽度,可在条码符号右下角加“>”符号,“>”符号的位置如图
-
供人识别字符
位于条码符号的下方,与条码相对应的13位数字。供人识别字符优先选用GB/T 12508中规定的OCR-B字符集;字符顶部和条码字符底部的最小距离为0.5个模块宽。
2.EAN-13条码的二进制表示
- EAN/UPC条码字符集的二进制表示
EAN/UPC条码字符集包括A子集、B子集和C子集。每个条码字符由两个“条”和两个“空”构成。每个“条”或“空”由1~4个模块组成,每个条码字符的总模块数为7。用二进制“1”表示“条”的模块,用二进制“0”表示“空”的模块。条码字符集可以表示0-9共10个数字字符。EAN/UPC条码字符集的二进制表示如表
2. 起始符、终止符
起始符、终止符的二进制表示都为“101”
3. 中间分隔符
中间分隔符的二进制表示为“01010”
4. EAN-13条码的数据符及校验符
13代码中左侧的第一位数字为前置码。左侧数据符根据前置码的数值选用A、B子集,如表
3.校验码计算
首先,确定代码位置序号,代码位置序号是指包括校验码在内的,由右至左的顺序号。
计算过程
- 从代码位置序号2开始,所有偶数位的数字代码求和。
- 将步骤1的和乘以3。
- 从代码位置序号3开始,所有奇数位的数字代码求和。
- 将步骤2与步骤3的结果相加。
- 用10减去步骤4所得结果的个位数作为校验码(个位数为0,校验码为0)
这里以690123456789为例计算校验码
13 | 12 | 11 | 10 | 9 | 8 | 7 | 6 | 5 | 4 | 3 | 2 | 1 |
---|---|---|---|---|---|---|---|---|---|---|---|---|
6 | 9 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 校验码 |
偶数位之和:9 + 1 + 3 + 5 + 7 + 9 = 34
奇数位之和:6 + 0 + 2 + 4 + 6 + 8 = 26
偶数位之和 * 3 + 奇数位之和 :34 * 3 + 26 = 128
个位为8
校验码:10 - 8 = 2
所以最终条码代码为6901234567892
然后就是按照上面的规则画图,这里就直接附代码了
因为我其他语言比较菜o(╥﹏╥)o,相对来说用web的方式生成条码感觉比其他方式要简单一点,班里同学也有用java生成的,有感兴趣的也可以尝试一下,其实只要把编码规则弄懂就容易了。
4.代码实现
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="indexCSS.css">
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="produceJS.js" type="text/javascript"></script>
</head>
<body>
<div id="body">
<input id="input_box" placeholder="请输入条码号">
<button id="produce_EAN" "produceCodeBar()">生成EAN13条形码</button>
</div>
<div id="code_bar">
</div>
<div id="num_position">
</div>
</body>
</html>
produceJS.js(主要代码)
var numberPresent={
0:{
"A":"0001101",
"B":"0100111",
"C":"1110010"
},
1:{
"A":"0011001",
"B":"0110011",
"C":"1100110"
},
2:{
"A":"0010011",
"B":"0011011",
"C":"1101100"
},
3:{
"A":"0111101",
"B":"0100001",
"C":"1000010"
},
4:{
"A":"0100011",
"B":"0011101",
"C":"1011100"
},
5:{
"A":"0110001",
"B":"0111001",
"C":"1001110"
},
6:{
"A":"0101111",
"B":"0000101",
"C":"1010000"
},
7:{
"A":"0111011",
"B":"0010001",
"C":"1000100"
},
8:{
"A":"0110111",
"B":"0001001",
"C":"1001000"
},
9:{
"A":"0001011",
"B":"0010111",
"C":"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"]
];
function produceCodeBar () {
var content = document.getElementById("input_box").value;
console.log(content.length);
if(content.length!==12){
alert("请输入合法条码(12位,不包含校验码)");
}
else {
var num=new Array();
var even=0;
var odd=0;
for(var i=0;i<12;i++){
num[11-i]=parseInt(content%10);
content/=10;
// 记录奇数位偶数位数字之和
if(i%2==1){
odd+=num[11-i]; //奇数位
}
else
even+=num[11-i]; //偶数位
}
var check=even*3+odd;
num[12]=10-check%10;
console.log(num[12]);
var temp = "<div><div class='bar_long color_1'></div><div class='bar_long color_0'></div><div class='bar_long color_1'></div>";
for(var i=1;i<=6;i++){
var ver = num[0];
var choosen=version[ver][i-1];
var numTemp = parseInt(numberPresent[num[i]][choosen]);
for(var j=0;j<7;j++){
if(parseInt(numTemp/Math.pow(10,6-j))===0){
temp+="<div class='bar color_0'></div>";
}
else{
temp+="<div class='bar color_1'></div>"
}
numTemp%=Math.pow(10,6-j);
}
}
temp+=
"<div class='bar_long color_0'></div><div class='bar_long color_1'></div>" +
"<div class='bar_long color_0'></div><div class='bar_long color_1'></div>" +
"<div class='bar_long color_0'></div>";
for(var i=7;i<13;i++){
var numTemp = parseInt(numberPresent[num[i]].C);
for(var j=0;j<7;j++){
if(parseInt(numTemp/Math.pow(10,6-j))===0){
temp+="<div class='bar color_0'></div>";
}
else{
temp+="<div class='bar color_1'></div>"
}
numTemp%=Math.pow(10,6-j);
}
}
temp+=
"<div class='bar_long color_1'></div><div class='bar_long color_0'></div>" +
"<div class='bar_long color_1'></div><div class='clearfix'></div> ";
$("#code_bar").html(temp);
var temp="<div class='numNum start'>"+num[0]+"</div>";
temp+=""
for(var i=1;i<7;i++){
temp+="<div class='numNum dataPart'>"+num[i]+"</div>";
}
temp+="<div class='numNum center'></div>";
for(var i=7;i<13;i++){
temp+="<div class='numNum dataPart'>"+num[i]+"</div>";
}
temp+="<div class='clearfix'></div>";
$("#num_position").html(temp);
}
}
indexCSS.css(生成条码的效果)
#body{
margin-left: 50px;
}
#produce_EAN{
border: none;
background: #ff8f54;
border-radius: 4px;
width: 160px;
text-align: center;
padding: 2px 5px;
cursor: pointer;
color: #ffffff;
}
#code_bar{
margin:50px;
margin-bottom: 0;
}
.width_1{
width: 5px;
}
.bar{
width: 5px;
height: 200px;
float: left;
margin: 0;
padding: 0;
}
.bar_long{
width: 5px;
height: 220px;
float: left;
}
.color_1{
background: #000000;
}
.color_0{
background: #ffffff;
}
.clearfix{
clear: both;
}
#num_position{
margin-left: 50px;
}
.numNum{
float: left;
/*margin:19px;*/
font-size: 1rem;
}
.start{
width: 30px;
margin-left: -10px;
}
.dataPart{
margin: 12px;
margin-top: 0;
/*margin-left: 20px;*/
/*text-align: center;*/
font-size: 1rem;
}
.dataPart:first-child{
margin-left: 11px;
}
.center{
width: 25px;
margin-right: 4px;
height: 20px;
}
最终效果就是这样
用手机扫描结果是这样,不过因为是这个条码号扫出来结果是这个样子,改下条码号有些可以出现具体的码