Question

我正在使用一个名为 QuaggaJs 的条形码库，我试图让它为相机生成的画布占据浏览器屏幕的 100%，而没有任何滚动条。

html

const noop = () => {}
const dateProxyHandler = {
  get(target, prop, receiver) {
    if (prop === Symbol.toStringTag) return "Date"
    if (typeof prop === "string" && prop.startsWith("set")) return noop

    const value = Reflect.get(target, prop, receiver)
    return typeof value === "function" && prop !== "constructor"
      ? value.bind(target)
      : value
  },
}

function freeze(value) {
  return value instanceof Date
    ? new Proxy(Object.freeze(new Date(Number(value))), dateProxyHandler)
    : Object.freeze(value)
}

const frozenDate = freeze(new Date())

frozenDate.setHours(0) // noop
frozenDate.getHours() // works :)

JSON.stringify(frozenDate) // works :)

const copiedDate = new Date(Number(frozenDate)) // works :)

Object.prototype.toString.call(frozenDate) // "[object Date]"

js

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
  <script src="bootstrap.js"></script>
  <script src="all.js"></script>

  <script src="main.js"></script>

  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="all.css">

</head>

<body>
  <section class="test">
    <div id="container">
      <select id="cameras-selection">
      </select>
      <div id="close-camera-container">
        <i class="far fa-times-circle fa-2x"></i>
      </div>
    </div>
    <div class="form-group has-feedback">
      <input type="text" class="form-control search-box" />
      <i class="fas fa-barcode form-control-feedback glyphicon fa-5x"></i>
    </div>
  </section>
</body>

</html>

style.css

$(function () {
  $("#close-camera-container").click(function () {
    hideCamera();
  });

  function hideCamera() {
    $("#container").hide();
    $(".form-group").show();
    Quagga.stop();
  }

  function startCamera() {
    Quagga.start();
    $("#container").show();
    $(".form-group").hide();
  }

  function setupCameraSelectList() {
    navigator.mediaDevices.enumerateDevices().then(function (devices) {
      var $cameras = $("#cameras-selection");
      $cameras.empty();
      var videoInputs = devices.filter(function (device) {
        return device.kind === "videoinput";
      });

      if (videoInputs.length == 1) {
        $cameras.append(
          new Option(videoInputs[0].label, videoInputs[0].deviceId)
        );
      } else {
        $cameras.append(new Option("Select a Camera", ""));
        devices.forEach((device) => {
          if(device.deviceId !== "default"){
            $cameras.append(new Option(device.label, device.deviceId));
          }
        });
      }
    });
  }

  $(".fa-barcode").click(function () {

    $("#container").hide();
    Quagga.init(
      {
        inputStream: {
          name: "Live",
          type: "LiveStream",
          target: "#container",
          constraints: {
            width: {min: 320},
            height: {min: 240},
            facing: "environment", // or user
          },
        },
        decoder: {
          readers: ["upc_reader", "ean_reader"],
        },
      },
      function (err) {
        if (err) {
          console.log(err);
          return;
        }

        startCamera();
        setupCameraSelectList();
      }
    );
  });

  Quagga.onDetected(function (result) {
    if (result.codeResult) {
      $(".search-box").val(result.codeResult.code);
      hideCamera();
    }
  });

  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 }
        );
      }
    }
  });
});

可以在这里看到现场演示。

https://barcodes.z4.web.core.windows.net/

让 Canvas 占据手机屏幕的 100%

0 个答案: