QuaggaJS /条形码扫描仪实现了额外的“阅读器”

时间:2018-10-11 11:31:00

标签: jquery html quaggajs

嘿,也许您对此代码有快速的解决方案。

    var Quagga = window.Quagga;
    var App = {
        _scanner: null,
        init: function() {
            this.attachListeners();
        },
        activateScanner: function() {
            var scanner = this.configureScanner('.overlay__content'),
                onDetected = function (result) {
                    document.querySelector('input.isbn').value = result.codeResult.code;
                    stop();
                }.bind(this),
                stop = function() {
                    scanner.stop();  // should also clear all event-listeners?
                    scanner.removeEventListener('detected', onDetected);
                    this.hideOverlay();
                    this.attachListeners();
                }.bind(this)

;

        this.showOverlay(stop);
        scanner.addEventListener('detected', onDetected).start();
    },
    attachListeners: function() {
        var self = this,
            button = document.querySelector('.input-field input + button.scan');

        button.addEventListener("click", function onClick(e) {
            e.preventDefault();
            button.removeEventListener("click", onClick);
            self.activateScanner();
        });
    },
    showOverlay: function(cancelCb) {
        if (!this._overlay) {
            var content = document.createElement('div'),
                closeButton = document.createElement('div');

            closeButton.appendChild(document.createTextNode('X'));
            content.className = 'overlay__content';
            closeButton.className = 'overlay__close';
            this._overlay = document.createElement('div');
            this._overlay.className = 'overlay';
            this._overlay.appendChild(content);
            content.appendChild(closeButton);
            closeButton.addEventListener('click', function closeClick() {
                closeButton.removeEventListener('click', closeClick);
                cancelCb();
            });
            document.body.appendChild(this._overlay);
        } else {
            var closeButton = document.querySelector('.overlay__close');
            closeButton.addEventListener('click', function closeClick() {
                closeButton.removeEventListener('click', closeClick);
                cancelCb();
            });
        }
        this._overlay.style.display = "block";
    },
    hideOverlay: function() {
        if (this._overlay) {
            this._overlay.style.display = "none";
        }
    },
    configureScanner: function(selector) {
        if (!this._scanner) {
            this._scanner = Quagga
                .decoder({
                    readers: [{
                    format: "code_128_reader", 
                    config: {
                        supplements: [
                            'ean_5_reader', 'ean_2_reader'
                        ]
                    }
                }

                ]})
                .locator({patchSize: 'medium'})
                .fromSource({
                    target: selector,
                    constraints: {
                        width: 800,
                        height: 600,
                        facingMode: "environment"
                    }
                });
        }
        return this._scanner;
    }
};
App.init();

它是一个小的脚本,可以扫描条形码“ code_128”并放入“ input_field”,并且一切正常。

问题是当我想扫描“ code_39”时,需要手动切换然后使用“阅读器”

有人可以帮助实现“阅读器”自动识别条形码的代码吗?

0 个答案:

没有答案