I'm trying to read the barcode value from image. I used get_barcode_from_image.js file but i'm getting either "false" or "XXXXXXXXXXXXXX" value not getting the exact value.
<img id="barcode" src="barcode.png"/>
<br/>
<button onclick="alert(getBarcodeFromImage('barcode'))">Scan</button>
Any suggestions for how to get the correct value of barcode image ?
Thanks in Advance.
I'm trying to read the barcode value from image. I used get_barcode_from_image.js file but i'm getting either "false" or "XXXXXXXXXXXXXX" value not getting the exact value.
<img id="barcode" src="barcode.png"/>
<br/>
<button onclick="alert(getBarcodeFromImage('barcode'))">Scan</button>
Any suggestions for how to get the correct value of barcode image ?
Thanks in Advance.
Share Improve this question asked Dec 27, 2013 at 13:52 LuckyLucky 4253 gold badges8 silver badges19 bronze badges 1- Can you show the image? – JJJ Commented Dec 27, 2013 at 13:54
3 Answers
Reset to default 2Try this option, look the links.
https://github./EddieLa/BarcodeReader
Demo
I found 3 solutions:
QuaggaJS library (open source) for reading barcodes, all done in JavaScript.
Supports EAN, CODE 128, CODE 39, EAN 8, UPC-A, UPC-C, and CODABAR
But you need to Choose Barcode type..
webcodecamjs Choose automatically but not supported well in Mobile.
this JavaScript barcode scanner also open source and free
https://github./EddieLa/BarcodeReader
and was the most acquired scanner (the other 2 wasn't deocode some barcodes).
Atenntion that there is 2 changes need in JavaScript barcode scanner example for making it work:
remove the two require() in BarcodeReader, instead, add script tag with src pointing to the two js files: exif.js, DecoderWorker.js.
in exif.js, remove var before "root = this" to make root global. Otherwise, root is undefined.
From Here
There is Scandit Barcode Scanner SDK for the Web which is a barcode recognition engine written in C++. It's piled to WebAssembly so it can run in modern browsers.
Here's a live demo that uses the web or phone camera.
There's also a client library that can be used to process one frame like this:
<img id="barcode" src="image.png">
<script src="https://unpkg./scandit-sdk"></script>
<script>
var image = document.getElementById('barcode');
var canvasContext = document.createElement('canvas').getContext('2d');
canvasContext.drawImage(image, 0, 0);
var imageData = canvasContext.getImageData(0, 0, image.width, image.height).data;
console.log('Loading...');
ScanditSDK.configure("xxx", {
engineLocation: "https://unpkg./scandit-sdk/build/"
}).then(() => {
console.log('Loaded');
var scanner = new ScanditSDK.Scanner({
imageSettings: {
width: image.width,
height: image.height,
format: ScanditSDK.ImageSettings.Format.RGBA_8U
},
scanSettings: new ScanditSDK.ScanSettings({
enabledSymbologies: [ScanditSDK.Barcode.Symbology.QR]
})
});
scanner.onReady(function() {
console.log('Ready');
scanner.processImage(imageData)
.then(result => console.log(result));
});
});
</script>
Links:
- npm
- Documentation
Disclaimer: I work for Scandit