Question

我目前有以下代码：

＆＃13;

SELECT DS, COUNT(DS)
FROM playerrating
GROUP BY  DS 
ORDER BY DS DESC;

＆＃13;

/**Quagga initialiser starts here*/

$(function() {
  var value;
  var App = {
    init: function() {
      Quagga.init(this.state, function(err) {
        if (err) {
          console.log(err);
          return;
        }
        App.attachListeners();
        Quagga.start();
      });
    },
    initCameraSelection: function() {
      var streamLabel = Quagga.CameraAccess.getActiveStreamLabel();

      return Quagga.CameraAccess.enumerateVideoDevices()
        .then(function(devices) {
          function pruneText(text) {
            return text.length > 30 ? text.substr(0, 30) : text;
          }
          var $deviceSelection = document.getElementById("deviceSelection");
          while ($deviceSelection.firstChild) {
            $deviceSelection.removeChild($deviceSelection.firstChild);
          }
          devices.forEach(function(device) {
            var $option = document.createElement("option");
            $option.value = device.deviceId || device.id;
            $option.appendChild(document.createTextNode(pruneText(device.label || device.deviceId || device.id)));
            $option.selected = streamLabel === device.label;
            $deviceSelection.appendChild($option);
          });
        });
    },
    querySelectedReaders: function() {
      return Array.prototype.slice.call(document.querySelectorAll('.readers input[type=checkbox]'))
        .filter(function(element) {
          return !!element.checked;
        })
        .map(function(element) {
          return element.getAttribute("name");
        });
    },
    attachListeners: function() {
      var self = this;

      self.initCameraSelection();
      $(".controls").on("click", "button.stop", function(e) {
        e.preventDefault();
        Quagga.stop();
      });

      $(".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 = $target.attr("type") === "checkbox" ? this.querySelectedReaders() : $target.val();
        var name = $target.attr("name"),
          state = self._convertNameToState(name);

        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) {
          if (typeof o[key] === "object" && typeof val === "object") {
            Object.assign(o[key], val);
          } else {
            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").off("click", "button.stop");
      $(".controls .reader-config-group").off("change", "input, select");
    },
    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();
      Quagga.stop();
      App.init();
    },
    inputMapper: {
      inputStream: {
        constraints: function(value) {
          if (/^(\d+)x(\d+)$/.test(value)) {
            var values = value.split('x');
            return {
              width: {
                min: parseInt(values[0])
              },
              height: {
                min: parseInt(values[1])
              }
            };
          }
          return {
            deviceId: 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'
                ]
              }
            }];
          }
          console.log("value before format :" + value);
          return [{
            format: value + "_reader",
            config: {}
          }];
        }
      }
    },
    state: {
      inputStream: {
        type: "LiveStream",
        constraints: {
          width: {
            min: 640
          },
          height: {
            min: 480
          },
          aspectRatio: {
            min: 1,
            max: 100
          },
          facingMode: "environment" // or user
        }
      },
      locator: {
        patchSize: "large",
        halfSample: true
      },
      numOfWorkers: 4,
      decoder: {
        readers: ["code_39_reader", "code_128_reader"]
      },
      locate: true,
      multiple: true
    },
    lastResult: null
  };

  //value =  App.querySelectedReaders() ;
  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;

    if (App.lastResult !== code) {
      App.lastResult = code;
      var $node = null,
        canvas = Quagga.canvas.dom.image;

      $node = $('<li><h4 class="code"></h4></li></br>');
      $node.find("img").attr("src", canvas.toDataURL());
      $node.find("h4.code").html(code);
      $("#result_strip ul.thumbnails").prepend($node);
    }

  });
});

＆＃13;

@charset "UTF-8";
.collapsable-source pre {
  font-size: small;
}

.input-field {
  display: flex;
  align-items: center;
  width: 260px;
}

.input-field label {
  flex: 0 0 auto;
  padding-right: 0.5rem;
}

.input-field input {
  flex: 1 1 auto;
  height: 20px;
}

.input-field button {
  flex: 0 0 auto;
  height: 28px;
  font-size: 20px;
  width: 40px;
}

.icon-barcode {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTAgNGg0djIwaC00ek02IDRoMnYyMGgtMnpNMTAgNGgydjIwaC0yek0xNiA0aDJ2MjBoLTJ6TTI0IDRoMnYyMGgtMnpNMzAgNGgydjIwaC0yek0yMCA0aDF2MjBoLTF6TTE0IDRoMXYyMGgtMXpNMjcgNGgxdjIwaC0xek0wIDI2aDJ2MmgtMnpNNiAyNmgydjJoLTJ6TTEwIDI2aDJ2MmgtMnpNMjAgMjZoMnYyaC0yek0zMCAyNmgydjJoLTJ6TTI0IDI2aDR2MmgtNHpNMTQgMjZoNHYyaC00eiI+PC9wYXRoPjwvc3ZnPg==);
}

.overlay {
  overflow: hidden;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.overlay__content {
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-height: 90%;
  max-width: 800px;
}

.overlay__close {
  position: absolute;
  right: 0;
  padding: 0.5rem;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  background-color: white;
  cursor: pointer;
  border: 3px solid black;
  font-size: 1.5rem;
  margin: -1rem;
  border-radius: 2rem;
  z-index: 100;
  box-sizing: content-box;
}

.overlay__content video {
  width: 100%;
  height: 100%;
}

.overlay__content canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

#interactive.viewport {
  position: relative;
}

#interactive.viewport>canvas,
#interactive.viewport>video {
  max-width: 100%;
  width: 100%;
}

canvas.drawing,
canvas.drawingBuffer {
  position: absolute;
  left: 0;
  top: 0;
}


/* line 16, ../sass/_viewport.scss */

.controls fieldset {
  border: none;
}


/* line 19, ../sass/_viewport.scss */

.controls .input-group {
  float: left;
}


/* line 21, ../sass/_viewport.scss */

.controls .input-group input,
.controls .input-group button {
  display: block;
}


/* line 25, ../sass/_viewport.scss */

.controls .reader-config-group {
  float: right;
}


/* line 28, ../sass/_viewport.scss */

.controls .reader-config-group label {
  display: block;
}


/* line 30, ../sass/_viewport.scss */

.controls .reader-config-group label span {
  width: 11rem;
  display: inline-block;
  text-align: right;
}


/* line 37, ../sass/_viewport.scss */

.controls:after {
  content: '';
  display: block;
  clear: both;
}


/* line 22, ../sass/_viewport.scss */

#result_strip {
  margin: 10px 0;
  border-top: 1px solid #EEE;
  border-bottom: 1px solid #EEE;
  padding: 10px 0;
}


/* line 28, ../sass/_viewport.scss */

#result_strip ul.thumbnails {
  padding: 0;
  margin: 0;
  list-style-type: none;
  width: auto;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}


/* line 37, ../sass/_viewport.scss */

#result_strip ul.thumbnails>li {
  display: inline-block;
  vertical-align: middle;
  width: 160px;
}


/* line 41, ../sass/_viewport.scss */

#result_strip ul.thumbnails>li .thumbnail {
  padding: 5px;
  margin: 4px;
  border: 1px dashed #CCC;
}


/* line 46, ../sass/_viewport.scss */

#result_strip ul.thumbnails>li .thumbnail img {
  max-width: 140px;
}


/* line 49, ../sass/_viewport.scss */

#result_strip ul.thumbnails>li .thumbnail .caption {
  white-space: normal;
}


/* line 51, ../sass/_viewport.scss */

#result_strip ul.thumbnails>li .thumbnail .caption h4 {
  text-align: center;
  word-wrap: break-word;
  height: 40px;
  margin: 0px;
}


/* line 61, ../sass/_viewport.scss */

#result_strip ul.thumbnails:after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 603px) {
  /* line 2, ../sass/phone/_core.scss */
  #container {
    margin: 10px auto;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}

@media (max-width: 603px) {
  /* line 5, ../sass/phone/_viewport.scss */
  #interactive.viewport {
    width: 300px;
    height: 300px;
    overflow: hidden;
  }
  /* line 20, ../sass/phone/_viewport.scss */
  #result_strip {
    margin-top: 5px;
    padding-top: 5px;
  }
  #result_strip ul.thumbnails {
    width: 100%;
    height: auto;
  }
  /* line 24, ../sass/phone/_viewport.scss */
  #result_strip ul.thumbnails>li {
    width: 150px;
  }
  /* line 27, ../sass/phone/_viewport.scss */
  #result_strip ul.thumbnails>li .thumbnail .imgWrapper {
    width: 130px;
    height: 130px;
    overflow: hidden;
  }
  /* line 31, ../sass/phone/_viewport.scss */
  #result_strip ul.thumbnails>li .thumbnail .imgWrapper img {
    margin-top: -25px;
    width: 130px;
    height: 180px;
  }
}

＆＃13;

＆＃13; jsfiddle：http://jsfiddle.net/ArcherMark/9Lubqrr4/70/

现在我希望将它实施到我的网站中。但出于某种原因，它不会起作用：jsfiddle.net/ArcherMark/677s8nv4/9/

此扫描仪仅适用于非iOS设备，在iOS上没有运行代码行吗？

希望有人知道发生了什么。

下一个链接与下面的图像有关。这是我在localhost上的代码：jsfiddle.net/ArcherMark/wLypzsss/

如何将JSFiddle转换为可用的HTML文件

0 个答案: