Create a gist now

Instantly share code, notes, and snippets.

Embed
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

This comment has been minimized.

Show comment
Hide comment
@christiaanwesterbeek

christiaanwesterbeek 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

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

This comment has been minimized.

Show comment
Hide comment
@manuels

manuels 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/

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

This comment has been minimized.

Show comment
Hide comment
@JNBWorks

JNBWorks 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?

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

This comment has been minimized.

Show comment
Hide comment
@EddieLa

EddieLa 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

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

This comment has been minimized.

Show comment
Hide comment
@vignesh210

vignesh210 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 ....

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

This comment has been minimized.

Show comment
Hide comment
@swathikonduri

swathikonduri Jul 17, 2013

Hi EddieLa ,

please post the file DecoderWorker.js of your code

Hi EddieLa ,

please post the file DecoderWorker.js of your code

@funkjunky

This comment has been minimized.

Show comment
Hide comment
@funkjunky

funkjunky 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

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

This comment has been minimized.

Show comment
Hide comment
@tonylampada

tonylampada 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?

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?

@mquinn123

This comment has been minimized.

Show comment
Hide comment
@mquinn123

mquinn123 Nov 4, 2014

Is there anyway this could work with pdf417?

Is there anyway this could work with pdf417?

@BobbyJay

This comment has been minimized.

Show comment
Hide comment
@BobbyJay

BobbyJay 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.

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.

@bgold0

This comment has been minimized.

Show comment
Hide comment
@bgold0

bgold0 Jun 3, 2015

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

bgold0 commented Jun 3, 2015

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

@ambikar11

This comment has been minimized.

Show comment
Hide comment
@ambikar11

ambikar11 Jun 7, 2016

any one can give barcode scanning image code for code128

ambikar11 commented Jun 7, 2016

any one can give barcode scanning image code for code128

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