Quagga2 does not detect inverted barcode

[calmbrain]

Hi,

I have started using Quagga2 on my PWA project. however, I could not able to make Quagga2 to read inverted barcode where the background is black and the barcode lines are white. is there any configuration I need to pass or the this is still not supported. the I did is to be able to read both normal and inverted.

Thanks

[ericblade]

Hello! Could you provide an example of the problematic barcode? There may be some options to play with that might have an effect, Or perhaps a method of inverting the image before decoding might be useful.

[calmbrain]

'invert()' is not really a function I have implemented. it is a possible value you can pass on canvas 2d context property "filter". see link:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

Quagga.invert boolean is a property I have added to decide either to read inverted barcode or normal barcode. below is comlete modified function for you to understand the modification. I believe you can give better implementation.

`
//modified function
_that.grab = function () {
var doHalfSample = _streamConfig.halfSample;
var frame = inputStream.getFrame();
var drawable = frame;
var drawAngle = 0;
var ctxData;
if (drawable) {
adjustCanvasSize(_canvas, _canvasSize);

                    if (_streamConfig.type === 'ImageStream') {
                        drawable = frame.img;

                        if (frame.tags && frame.tags.orientation) {
                            switch (frame.tags.orientation) {
                                case 6:
                                    drawAngle = 90 * TO_RADIANS;
                                    break;

                                case 8:
                                    drawAngle = -90 * TO_RADIANS;
                                    break;
                            }
                        }
                    }
                    _ctx.filter = (Quagga.invert) ? 'invert(1)' : 'invert(0)';
                    if (drawAngle !== 0) {
                        _ctx.translate(_canvasSize.x / 2, _canvasSize.y / 2);

                        _ctx.rotate(drawAngle);

                        _ctx.drawImage(drawable, -_canvasSize.y / 2, -_canvasSize.x / 2, _canvasSize.y, _canvasSize.x);

                        _ctx.rotate(-drawAngle);

                        _ctx.translate(-_canvasSize.x / 2, -_canvasSize.y / 2);
                    } else {
                        _ctx.drawImage(drawable, 0, 0, _canvasSize.x, _canvasSize.y);
                    }
                    ctxData = _ctx.getImageData(_sx, _sy, _size.x, _size.y).data;
                    if (doHalfSample) {
                        Object(cv_utils["e" /* grayAndHalfSampleFromCanvasData */])(ctxData, _size, _data);
                    } else {
                        Object(cv_utils["c" /* computeGray */])(ctxData, _data, _streamConfig);
                    }

                    return true;
                }

                return false;
            };`

[ericblade]

So sorry I missed this. Not sure if notifications aren't sent for discussion updates, or if I just purely missed it.

for some reason your link links to github, not sure if bug in discussion, but i'll try re-posting it here https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

interesting idea. probably a great idea for a front-end to quagga, but it would need an equivalent operation to be able to do it outside of browser. I'll do some thinking on this..

[hvaughan3]

Is there any programmatic way to know if a given image needs to be inverted or not? As in some way to tell if the barcode being viewed is using white lines instead of black?

[ericblade]

I don't think there's any built in methods for that. I was just thinking of perhaps adding a switch that flags if inverted image processing should be used, and then if no values are returned from the regular image, then run an invert on the image and try it again.

I see there's a pure javascript implementation of some image processing here https://www.npmjs.com/package/jimp .. looks like the library itself is limited to node, and designed for command line use, but i wonder how difficult it would be to adapt parts to work universally, and provide a library of filters. There may be other more suitable options, that's just what I came across in a quick googling.

Perhaps providing a list of filters, much like the list of decoders, and then brute forcing the image through all the filters and through all the decoders, until it finds a match....

[hvaughan3]

Yea that makes sense. Thanks.