Barcode recognition with JavaScript - Demo: http://bit.ly/djvUoy

get_barcode_from_image.js

/*
 *    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;
    }
})();

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

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

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?

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

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

Hi EddieLa ,

please post the file DecoderWorker.js of your code

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

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?

Is there anyway this could work with pdf417?

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.

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

any one can give barcode scanning image code for code128

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