Generator kodu paskowego (kreskowego)

Kod paskowy, inaczej kod kreskowy, to graficzna reprezentacja informacji za pomocą ciemnych i jasnych elementów.

Składa się z czarnych prążków różnej grubości, oddzielonych białymi polami.

Kod paskowy jest umieszczany na opakowaniach i metkach artykułów handlowych. Jego głównym zastosowaniem jest automatyczna identyfikacja produktów w logistyce.

Na przykład, kod EAN-13 jest jednym z najczęściej występujących kodów na wyrobach konsumenckich.

Warto zaznaczyć, że kod paskowy jest również używany na obudowach rezystorów, gdzie różnokolorowe paski reprezentują wartości i parametry tych elementów.

Możesz zmienić w „Ustawieniach” swoje preferencje wyglądu gotowego kodu kreskowego.

Poniżej znajdziesz gotowe pliki oraz wskazówki jak wstawić generator kodu paskowego na własną stronę.

Generuj swój kod

Standard kodu: code-128 EAN-13

Skala(1-10): Kolor:

Wysokość paska:

Rozmiar etykiety:

Twój kod:

Twój plik (każdy kod w linii):

Ogólny proces działania kodu kreskowego

Kod paskowy działa na zasadzie optycznego odczytu :

Kodowanie informacji: Na początku informacja (np. numer produktu) jest przekształcana w sekwencję czarnych i białych prążków. W zależności od rodzaju kodu (np. EAN-13, QR), stosuje się różne algorytmy kodowania.
Generowanie kodu: Komputer lub specjalne urządzenie generuje kod paskowy na podstawie zakodowanej informacji. Prążki mają określone szerokości i odstępy.
Drukowanie lub nanoszenie kodu: Kod paskowy jest drukowany na etykiecie produktu, opakowaniu lub bezpośrednio na produkcie.
Odczyt kodu: Skaner optyczny (np. czytnik kodów kreskowych) emituje światło na kod paskowy. Czarne prążki absorbują światło, a białe odbijają je. Skaner odczytuje te zmiany jako sekwencję cyfr lub innych danych.
Dekodowanie: Odczytane dane są przekształcane z powrotem w pierwotną informację, np. numer produktu lub cenę.

Istnieje wiele rodzajów kodów paskowych, takich jak EAN, UPC, Code 128, Code 39, QR, Data Matrix, itp. Każdy z nich ma swoje unikalne zasady kodowania i odczytu.

Kody źródłowe generatora

Jak wstawić generator na własną stronę?

Można to zrobić ręcznie lub pobrać gotowca i go edytować jak dusza zapragnie.

Samodzielnie:

Tworzymy nowy folder a w nim odpowiednie pliki:

index.html
style.css
script.js

I wklejamy poniższe kody źródłowe.

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Let&#39;s barcode!">
<meta name="Description" content="Darmowy online generator kodu kreskowego">
<meta name="Keywords" content="barcode,, barcode generator, kod, kreskowy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Generator kodów</title>
</head>
<body>
<div class="header"> 
  <script type="text/javascript" src="script.js"></script> 
</div>
<div id="forms" style="display: block;">
  <div class="main-form">
    <div class="form-key-part">
      <button id="OtherSettings" onclick="OtherSettingsClick()">Ustawienia</button>
      <label for="type">Standard kodu: </label>
      code-128
      <input id="type" type="radio" name="type" value="128" checked="checked">
      EAN-13
      <input id="type" type="radio" name="type" value="13">
    </div>
    <div class="form-key-part" id="additionalForm" style="display: none">
      <label for="scale">Skala(1-10): </label>
      <input type="number" id="scale" class="scale" name="scale" value="2" min="1" max="10" step="1">
      <label for="color">Kolor: </label>
      <select class="color" id="color" name="color">
        <option value="#000" style="background-color: #000; font-color: #fff">&nbsp;Czarny</option>
        <option value="#F00" style="background-color: #F00; font-color: #fff">&nbsp;Czerwony</option>
        <option value="#0F0" style="background-color: #0F0; font-color: #fff">&nbsp;Zielony</option>
        <option value="#00F" style="background-color: #00F; font-color: #fff">&nbsp;Niebieski</option>
      </select>
      <br/>
      &nbsp; <br/>
      <label for="barlen">Wysokość paska: </label>
      <select class="barlen" id="barlen" name="barlen">
        <option value="0.25">25%</option>
        <option value="0.5">50%</option>
        <option value="0.75">75%</option>
        <option value="1" selected="selected">100% (standard)</option>
        <option value="1.5">150%</option>
        <option value="2">200%</option>
        <option value="4">400%</option>
      </select>
      <br/>
      &nbsp; <br/>
      <label for="lbsize">Rozmiar etykiety: </label>
      <select class="lbsize" id="lbsize">
        <option value="0.00">Brak</option>
        <option value="0.25">-3</option>
        <option value="0.5">-2</option>
        <option value="0.75">-1</option>
        <option value="1" selected="selected">Standard</option>
        <option value="1.5">+1</option>
        <option value="2">+2</option>
        <option value="4">+3</option>
      </select>
    </div>
    <div class="form-key-part" id="single" style="display: block;">
      <label for="value">Twój kod: </label>
      <input class="code" id="value" type="text" name="code" placeholder="Wpisz tekst">
      <button onclick="barcode(this.previousElementSibling.value)">Generuj</button>
    </div>
    <div class="form-key-part" id="file" style="display: none;">
      <label for="file">Twój plik (każdy kod w linii): </label>
      <input class="code" id="file" type="file" placeholder="Twój plik" onchange="loadFile(this.files[0])">
    </div>
    <div class="form-key-part">
      <button onclick="document.getElementById(&#39;canvasContainer&#39;).innerHTML = &#39;&#39;">Wyczyść</button>
    </div>
  </div>
</div>
<div id="canvasContainer" class="canvasContainer" style="display: block;">
  <canvas id="it1" width="334" height="226"></canvas>
</div>

</body>
</html>

style.css

 html, body {
   background-color: #FFFFFF;
   margin: 0 auto;
   padding: 0;
   text-align: center;
   vertical-align: middle;
 }
 img {
   float: left;
   margin: 3px;
 }
 h1 {
   font-size: 24px;
   padding: 5px;
   margin: 1px;
   float: left;
 }
 a {
   text-decoration: none;
   font-size: 16px;
   color: #000000;
 }
 a:hover {
   font-weight: bold;
 }
 input {
   border-style: dashed;
   border-width: 1px;
   border-color: #B0B0B0;
 }
 select {
   border-style: dashed;
   border-width: 1px;
   background-color: #fff;
   border-color: #B0B0B0;
 }
 button {
   border-style: groove;
   border-width: 1px;
   background-color: #fff;
   border-color: #B0B0B0;
 }
 button:hover {
   font-weight: bold;
 }
 div.mselected {
   float: left;
   margin: 5px;
   padding: 3px;
   font-size: 15px;
   border-style: ridge;
   border-bottom-style: solid;
   border-width: 1px;
   border-color: #B0B0B0;
   border-bottom-color: #000;
 }
 div.main-form {
   float: left;
   width: 97vw;
   margin: 0.5vw;
   padding: 0.8vw;
   border-style: solid;
   border-width: 1px;
   border-color: #500;
 }
 div.form-key-part {
   float: left;
   width: 100%;
   margin: 0 auto;
   padding: 1vh 0 1vh 0;
 }
 div.form-line {
   float: left;
 }
 div.canvasContainer {
   width: 100%;
   float: left;
   border-top-style: none;
 }
 canvas {
   margin: 10px;
 }
 table {
   border-collapse: collapse;
 }
 td {
   border-style: solid;
   border-width: 1px;
 }
 @media print {
   div.header {
     display: none !important;
   }
   div.menu {
     display: none !important;
   }
   div.main-form {
     display: none !important;
   }
   div.canvasContainer {
     border-style: none;
     width: 100%;
   }
 }

script.js

// JavaScript Document
// www.skrip.pl
var codesCount = 0;
var path = '';
function router() {
let path = window.location.hash.slice(1);
document.getElementById("MenuFAQ").className = "menu_poz";
document.getElementById("MenuSingleBarcode").className = "menu_poz";
document.getElementById("MenuFileImport").className = "menu_poz";
if(path == "") {path = '/SingleBarcode';}
if(path == "/FAQ") {
document.getElementById("forms").style.display = "none";
document.getElementById("canvasContainer").style.display = "none";
document.getElementById("FAQ").style.display = "block";
document.getElementById("MenuFAQ").className = "mselected";
}
else {
document.getElementById("forms").style.display = "block";
document.getElementById("canvasContainer").style.display = "block";
document.getElementById("FAQ").style.display = "none";
}
if(path =="/SingleBarcode") {
document.getElementById("single").style.display = "block";
document.getElementById("file").style.display = "none";
document.getElementById("MenuSingleBarcode").className = "mselected";
}
if(path =="/FileImport") {
document.getElementById("single").style.display = "none";
document.getElementById("file").style.display = "block";
document.getElementById("MenuFileImport").className = "mselected";
}
}
window.addEventListener("load", router);
window.addEventListener("hashchange", router);
function OtherSettingsClick() {
let st = document.getElementById('OtherSettings');
if(st.innerHTML === 'Ustawienia') {
st.innerHTML = 'Zamknij';
document.getElementById("additionalForm").style.display = "block";
}
else {
st.innerHTML = 'Ustawienia';
document.getElementById("additionalForm").style.display = "none";
}
}
class Ean13 {
enc = '';
validCode = 'ssss';
contrNo = 0;
codeLen = 0;
codes = [
{L: '0001101', G: '0100111', R: '1110010'},
{L: '0011001', G: '0110011', R: '1100110'},
{L: '0010011', G: '0011011', R: '1101100'},
{L: '0111101', G: '0100001', R: '1000010'},
{L: '0100011', G: '0011101', R: '1011100'},
{L: '0110001', G: '0111001', R: '1001110'},
{L: '0101111', G: '0000101', R: '1010000'},
{L: '0111011', G: '0010001', R: '1000100'},
{L: '0110111', G: '0001001', R: '1001000'},
{L: '0001011', G: '0010111', R: '1110100'}
];
constructor(barcode) {
this.Encode(barcode);
this.codeLen = this.enc.length;
}
Encode(code){
if(!(isNaN(code)) && (code.length == 12 || code.length == 13))
{
let c0 = +code.substring(0, 1);
let c1 = +code.substring(1, 2);
let c2 = +code.substring(2, 3);
let c3 = +code.substring(3, 4);
let c4 = +code.substring(4, 5);
let c5 = +code.substring(5, 6);
let c6 = +code.substring(6, 7);
let c7 = +code.substring(7, 8);
let c8 = +code.substring(8, 9);
let c9 = +code.substring(9, 10);
let c10 = +code.substring(10, 11);
let c11 = +code.substring(11, 12);
this.enc = '101';
this.enc += this.codes[c1].L;
if(c0 <= 3) {this.enc += this.codes[c2].L;}
else {this.enc += this.codes[c2].G;}
if(c0===0||c0===4||c0===7||c0===8) {this.enc += this.codes[c3].L;}
else {this.enc += this.codes[c3].G;}
if(c0==0||c0==1||c0==4||c0==5||c0==9) {this.enc += this.codes[c4].L;}
else {this.enc += this.codes[c4].G;}
if(c0==0||c0==2||c0==5||c0==6||c0==7) {this.enc += this.codes[c5].L;}
else {this.enc += this.codes[c5].G;}
if(c0==0||c0==3||c0==6||c0==8||c0==9) {this.enc += this.codes[c6].L;}
else {this.enc += this.codes[c6].G;}
this.enc += '01010';
this.enc += this.codes[c7].R;
this.enc += this.codes[c8].R;
this.enc += this.codes[c9].R;
this.enc += this.codes[c10].R;
this.enc += this.codes[c11].R;
this.contrNo = (c0 + 3*c1 + c2 + 3*c3 + c4 + 3*c5 + c6 + 3*c7 + c8 + 3*c9 + c10 + 3*c11)%10;
if(this.contrNo !== 0) {this.contrNo = 10 - this.contrNo;}
this.enc += this.codes[c11].R;
this.enc += '101';
this.validCode = code.substring(0, 12) + this.contrNo;
}
}
}
class Code128 {
constructor(barcode) {
this.Encode(barcode);
this.codeLen = this.enc.length;
this.validCode = barcode;
}
enc = '';
codeA = [];
codeB = [];
currentSet = '';
contrNo = 0;
validCode ='';
codes = [
'11011001100','11001101100','11001100110','10010011000','10010001100','10001001100','10011001000','10011000100','10001100100','11001001000','11001000100',
'11000100100','10110011100','10011011100','10011001110','10111001100','10011101100','10011100110','11001110010','11001011100','11001001110','11011100100',
'11001110100','11101101110','11101001100','11100101100','11100100110','11101100100','11100110100','11100110010','11011011000','11011000110','11000110110',
'10100011000','10001011000','10001000110','10110001000','10001101000','10001100010','11010001000','11000101000','11000100010','10110111000','10110001110',
'10001101110','10111011000','10111000110','10001110110','11101110110','11010001110','11000101110','11011101000','11011100010','11011101110','11101011000',
'11101000110','11100010110','11101101000','11101100010','11100011010','11101111010','11001000010','11110001010','10100110000','10100001100','10010110000',
'10010000110','10000101100','10000100110','10110010000','10110000100','10011010000','10011000010','10000110100','10000110010','11000010010','11001010000',
'11110111010','11000010100','10001111010','10100111100','10010111100','10010011110','10111100100','10011110100','10011110010','11110100100','11110010100',
'11110010010','11011011110','11011110110','11110110110','10101111000','10100011110','10001011110','10111101000','10111100010','11110101000','11110100010',
'10111011110','10111101110','11101011110','11110101110','11010000100','11010010000','11010011100','1100011101011'
];
Encode(code) {
let val;
let ct = 0;
let chr;
this.contrNo = 0;
if(isNaN(+code)) {
let codeArray = code.split('');
if(codeArray[0].substring(0, 1).charCodeAt(0) >= 32) {
val = 104;
this.currentSet = 'B';
}
else {
val = 103;
this.currentSet = 'A';
}
this.contrNo += val;
this.enc = this.codes[val];
for (chr of codeArray) {
let ascii =	chr.charCodeAt(0);
if(ascii < 32 && this.currentSet == 'B') {
ct += 1;
this.enc += this.codes[101];
this.currentSet = 'A';
this.contrNo += ct * 101;
}
if(ascii > 95 && this.currentSet == 'A') {
ct += 1;
this.enc += this.codes[100];
this.currentSet = 'B'
this.contrNo += ct * 100;
}
if(ascii < 32) {
val = ascii + 64;
}
else {
val = ascii - 32;
}
this.enc += this.codes[val];
ct += 1;
this.contrNo += ct * val;
}
}
else {
this.enc = this.codes[105];
this.currentSet = 'C';
let ct = 0;
let i = 0;
this.contrNo += 105;
for (i = 0; i < code.length - 1; i+= 2) {
chr = code[i] + '' + code[i+1];
this.enc += this.codes[+chr];
ct += 1;
this.contrNo += ct * +chr;
}
if(i == code.length - 1) {
this.enc += this.codes[100];
ct += 1;
this.contrNo += ct * 100;
chr = code[i] + '';
val = chr.charCodeAt(0) - 32;
this.enc += this.codes[val];
ct += 1;
this.contrNo += ct * val;
}
}
this.enc += this.codes[this.contrNo%103];
this.enc += this.codes[106];
}
}
var codesCount = 0;
var scale = 1;
var barlen = 1;
var lbsize = 1;
var color = '#000';
function barcode(val) {
scale = document.getElementById('scale').value;
barlen = document.getElementById('barlen').value;
lbsize = document.getElementById('lbsize').value;
color = document.getElementById('color').value;
var canvas = document.createElement("canvas");
var leftMargin = 5;
codesCount = codesCount + 1;
canvas.setAttribute('id','it' + codesCount.toString());
var codetype = document.querySelector('input[name="type"]:checked').value;
if(codetype == '13')
{
var e13 = new Ean13(val);
var canWidth = (e13.codeLen + 1 + leftMargin) * scale;
var canHeight = 100 * barlen * scale + 13 * scale * lbsize;
canvas.setAttribute('width', canWidth);
canvas.setAttribute('height', canHeight);
var context = canvas.getContext('2d');
canv13(e13, context);
}
if(codetype == '128')
{
var e128 = new Code128(val);
var canWidth = (e128.codeLen) * scale;
var canHeight = 100 * barlen * scale + 13 * scale * lbsize;
canvas.setAttribute('width', canWidth);
canvas.setAttribute('height', canHeight);
var context = canvas.getContext('2d');
canv128(e128, context);
}
var element = document.getElementById("canvasContainer");
element.appendChild(canvas);
}
function canv13(e, ctx) {
let barArray = e.enc.split('');
let i = 0;
let extraLength = 0;
for (const bar of barArray) {
i += 1;
if(i==1||i==2||i==3||i==46||i==47||i==48||i==49||i==50||i==93||i==94||i==95)
{extraLength = 10;}
else
{extraLength = 0;}
if(bar == '1') {ctx.fillStyle = color;}
else {ctx.fillStyle = "#FFF";}
ctx.fillRect((i + 5) * scale, 0, 1 * scale, 100 * barlen * scale + (extraLength * scale));
}
ctx.font = (10 * lbsize * scale).toString() + "px Arial";
ctx.textAlign = "center";
ctx.fillText(e.validCode.substring(0, 1), (2 * scale), 100 * barlen * scale + 11 * scale * lbsize);
ctx.fillText(e.validCode.substring(1,7), (31 * scale), 100 * barlen * scale + 11 * scale * lbsize);
ctx.fillText(e.validCode.substring(7,13), (77 * scale), 100 * barlen * scale + 11 * scale * lbsize);
}
function canv128(e, ctx) {
let barArray = e.enc.split('');
let i = 0;
for (const bar of barArray) {
i += 1;
if(bar == '1') {ctx.fillStyle = color;}
else {ctx.fillStyle = "#FFF";}
ctx.fillRect(i * scale, 0, 1 * scale, 100 * barlen * scale);
}
ctx.font = (10 * lbsize * scale).toString() + "px Arial";
ctx.textAlign = "center";
ctx.fillText(e.validCode, ctx.canvas.width/2, 100 * barlen * scale + 11 * scale * lbsize);
}
async function loadFile(file) {
let text = await file.text()
let codes = text.replace(/\r\n/g,'\n').split('\n');
for (const code of codes)
{
barcode(code);
}
}

Top Stories

Jak nie zostać ofiarą oszustów. Sposób na rozpoznanie fałszywego maila

Wangiri scam – jak nie zostać ofiarą

Statystyki wyszukiwarki PornHub za 2024 rok

Generator kodów paskowych online

Kod paskowy, inaczej kod kreskowy, to graficzna reprezentacja informacji.