Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Barcode recognition with JavaScript - Demo: http://bit.ly/djvUoy
/*
* Copyright (c) 2010 Tobias Schneider
* This script is freely distributable under the terms of the MIT license.
*/
(function(){
var UPC_SET = {
"3211": '0',
"2221": '1',
"2122": '2',
"1411": '3',
"1132": '4',
"1231": '5',
"1114": '6',
"1312": '7',
"1213": '8',
"3112": '9'
};
getBarcodeFromImage = function(imgOrId){
var doc = document,
img = "object" == typeof imgOrId ? imgOrId : doc.getElementById(imgOrId),
canvas = doc.createElement("canvas"),
width = img.width,
height = img.height,
ctx = canvas.getContext("2d"),
spoints = [1, 9, 2, 8, 3, 7, 4, 6, 5],
numLines = spoints.length,
slineStep = height / (numLines + 1),
round = Math.round;
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
while(numLines--){
console.log(spoints[numLines]);
var pxLine = ctx.getImageData(0, slineStep * spoints[numLines], width, 2).data,
sum = [],
min = 0,
max = 0;
for(var row = 0; row < 2; row++){
for(var col = 0; col < width; col++){
var i = ((row * width) + col) * 4,
g = ((pxLine[i] * 3) + (pxLine[i + 1] * 4) + (pxLine[i + 2] * 2)) / 9,
s = sum[col];
pxLine[i] = pxLine[i + 1] = pxLine[i + 2] = g;
sum[col] = g + (undefined == s ? 0 : s);
}
}
for(var i = 0; i < width; i++){
var s = sum[i] = sum[i] / 2;
if(s < min){ min = s; }
if(s > max){ max = s; }
}
var pivot = min + ((max - min) / 2),
bmp = [];
for(var col = 0; col < width; col++){
var matches = 0;
for(var row = 0; row < 2; row++){
if(pxLine[((row * width) + col) * 4] > pivot){ matches++; }
}
bmp.push(matches > 1);
}
var curr = bmp[0],
count = 1,
lines = [];
for(var col = 0; col < width; col++){
if(bmp[col] == curr){ count++; }
else{
lines.push(count);
count = 1;
curr = bmp[col];
}
}
var code = '',
bar = ~~((lines[1] + lines[2] + lines[3]) / 3),
u = UPC_SET;
for(var i = 1, l = lines.length; i < l; i++){
if(code.length < 6){ var group = lines.slice(i * 4, (i * 4) + 4); }
else{ var group = lines.slice((i * 4 ) + 5, (i * 4) + 9); }
var digits = [
round(group[0] / bar),
round(group[1] / bar),
round(group[2] / bar),
round(group[3] / bar)
];
code += u[digits.join('')] || u[digits.reverse().join('')] || 'X';
if(12 == code.length){ return code; break; }
}
if(-1 == code.indexOf('X')){ return code || false; }
}
return false;
}
})();
@christiaanwesterbeek
Copy link

christiaanwesterbeek commented Dec 19, 2012

It does not return the left most number 5 in your example. How do i get that? I need to have that in order to be able to do an EAN checksum check

@manuels
Copy link

manuels commented Apr 3, 2013

This code is great!
If you need a more accurate barcode scanner, try http://manuels.github.com/unix-toolbox.js-exact-image/demo/

@JNBWorks
Copy link

JNBWorks commented Apr 23, 2013

manuels - I really like your code. Can you advise though, how do you increase the memory size as if you take a photo with an iphone 5 for example it complains about a memory issue?

@EddieLa
Copy link

EddieLa commented Jun 5, 2013

I looked through this code when I started working on my barcode reader, it's nice to see that I understand
more of it now.
I have a demo of mine up if you want to take a look at it.
http://eddiela.github.io/BarcodeReader/demo.html

@vignesh210
Copy link

vignesh210 commented Jun 25, 2013

i need clear java script code for bar code scanner .because i am struggling where i have to pass my source image and i need to implement in mobile ...so any one can help me ....

@swathikonduri
Copy link

swathikonduri commented Jul 17, 2013

Hi EddieLa ,

please post the file DecoderWorker.js of your code

@funkjunky
Copy link

funkjunky commented Oct 19, 2013

Just copy the link and replace the htm file with the js file. Here is the link:
view-source:http://eddiela.github.io/BarcodeReader/DecoderWorker.js

@tonylampada
Copy link

tonylampada commented Apr 5, 2014

I've used this to build a webcam barcode scanner

https://github.com/tonylampada/barcodescanner/tree/gh-pages

Live demo here:
jhuckaby/webcamjs#9

Doesn't work that great (at least with my webcam)

It can only scan big images with not-so-long barcodes.

Any ideas on how to improve it?

@mitquinn
Copy link

mitquinn commented Nov 4, 2014

Is there anyway this could work with pdf417?

@BobbyJay
Copy link

BobbyJay commented Feb 21, 2015

You can also check out my barcode scanner: https://github.com/BobbyJay/SlaRle.js
It supports EAN-13 (and UPC-A), but if you want other codes like pdf417 you have to modify the decoding part.

Copy link

ghost commented Jun 3, 2015

Any thoughts on if you'll implement pdf417? Would be AWESOME if you did. @BobbyJay @tobytailor

@ambikar11
Copy link

ambikar11 commented Jun 7, 2016

any one can give barcode scanning image code for code128

@mubaidr
Copy link

mubaidr commented Jun 22, 2018

Anybody looking for an extensible bar-code scanner (based on this script), have a look: https://github.com/mubaidr/Javascript-Barcode-Reader

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment