使用QuaggaJS从img标签获取条形码？

Question

我想从单个img标签中读取条形码。但是此示例仅适用于输入类型文件。

以下是文件：

• https://codepen.io/rogergcc/pen/zeoMZp.js
• https://codepen.io/rogergcc/pen/daOQjr.js
• https://codepen.io/rogergcc/pen/jdVQQm.js

完整的代码在这里[https://codepen.io/rogergcc/pen/VgmGbv]

  <img src="QuaggaJS2_files/img/Ticket_1.jpeg" alt="ticket_1" width="300px" id="imgTicket">
            <span id="codigo"> codigo : </span>


var App = {
    init: function() {
      App.attachListeners();
    },
    config: {
  reader: "code_128",
  length: 10
},
attachListeners: function() {
  var self = this;

  $(".controls input[type=file]").on("change", function(e) {
    value = "i2of5";
    (name = "decoder.readers"), (state = "decoder.readers");
    //debugger;
    console.log("Value of " + state + " changed to " + value);
    self.setState(state, value);

    if (e.target.files && e.target.files.length) {
      App.decode(URL.createObjectURL(e.target.files[0]));
    }
  });



     $(".controls button").on("click", function(e) {
        var input = document.querySelector(".controls input[type=file]");

        // TODO

        if (input.files && input.files.length) {
          App.decode(URL.createObjectURL(input.files[0]));
        }
      });

      $(".controls .reader-config-group").on(
        "change",
        "input, select",
        function(e) {
          e.preventDefault();
          var $target = $(e.target),
            value =
              $target.attr("type") === "checkbox"
                ? $target.prop("checked")
                : $target.val(),
            //value ="i2of5";
            name = $target.attr("name"),
            state = self._convertNameToState(name);
          debugger;
          console.log("Value of " + state + " changed to " + value);
          self.setState(state, value);
        }
      );
    },
    _accessByPath: function(obj, path, val) {
      var parts = path.split("."),
        depth = parts.length,
        setter = typeof val !== "undefined" ? true : false;

      return parts.reduce(function(o, key, i) {
        if (setter && i + 1 === depth) {
          o[key] = val;
        }
        return key in o ? o[key] : {};
      }, obj);
    },
    _convertNameToState: function(name) {
      return name
        .replace("_", ".")
        .split("-")
        .reduce(function(result, value) {
          return result + value.charAt(0).toUpperCase() + value.substring(1);
        });
    },
    detachListeners: function() {
      $(".controls input[type=file]").off("change");
      $(".controls .reader-config-group").off("change", "input, select");
      $(".controls button").off("click");
    },
    decode: function(src) {
      var self = this,
        config = $.extend({}, self.state, { src: src });

      Quagga.decodeSingle(config, function(result) {});
    },
    setState: function(path, value) {
      var self = this;

      if (typeof self._accessByPath(self.inputMapper, path) === "function") {
        value = self._accessByPath(self.inputMapper, path)(value);
      }

      self._accessByPath(self.state, path, value);

      console.log(JSON.stringify(self.state));
      App.detachListeners();
      App.init();
    },
    inputMapper: {
      inputStream: {
        size: function(value) {
          return parseInt(value);
        }
      },
      numOfWorkers: function(value) {
        return parseInt(value);
      },
      decoder: {
        readers: function(value) {
          if (value === "ean_extended") {
            return [
              {
                format: "ean_reader",
                config: {
                  supplements: ["ean_5_reader", "ean_2_reader"]
                }
              }
            ];
          }
          return [
            {
              format: value + "_reader",
              config: {}
            }
          ];
        }
      }
    },
    state: {
      inputStream: {
        size: 1280
      },
      locator: {
        patchSize: "medium",
        halfSample: false
      },
      numOfWorkers: 1,
      decoder: {
        readers: [
          {
            format: "code_128_reader",
            config: {}
          }
        ]
      },
      locate: true,
      src: null
        }
      };
      App.init();

      Quagga.onProcessed(function(result) {
        var drawingCtx = Quagga.canvas.ctx.overlay,
          drawingCanvas = Quagga.canvas.dom.overlay;

    if (result) {
      if (result.boxes) {
        drawingCtx.clearRect(
          0,
          0,
          parseInt(drawingCanvas.getAttribute("width")),
          parseInt(drawingCanvas.getAttribute("height"))
        );
        result.boxes
          .filter(function(box) {
            return box !== result.box;
          })
          .forEach(function(box) {
            Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, {
              color: "green",
              lineWidth: 2
            });
          });
      }

      if (result.box) {
        Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, {
          color: "#00F",
          lineWidth: 2
        });
      }

      if (result.codeResult && result.codeResult.code) {
        Quagga.ImageDebug.drawPath(
          result.line,
          { x: "x", y: "y" },
          drawingCtx,
          { color: "red", lineWidth: 3 }
        );
      }
    }
  });



     Quagga.onDetected(function(result) {
        var code = result.codeResult.code,
          $node,
          canvas = Quagga.canvas.dom.image;

        $node = $(
          '<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>'
        );
        $node.find("img").attr("src", canvas.toDataURL());
        $node.find("h4.code").html(code);
        $("#result_strip ul.thumbnails").prepend($node);
      });