barcode-reader-javascript-samples/read-an-image.html at main · Dynamsoft/barcode-reader-javascript-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <meta name="description" content="Read barcodes from an image with Dynamsoft Barcode Reader." />
  <meta name="keywords" content="barcode, image" />
  <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/read-an-image.html" />
  <title>Dynamsoft Barcode Reader Sample - Hello World (Read an Image)</title>
</head>

<body>
  <h1>Hello World (Read an Image)</h1>
  <input id="input-file" type="file" multiple accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" />
  <span id="decoding" style="display: none;">Decoding...</span>
  <br />
  Results:<br />
  <div id="results"></div>
  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/dbr.bundle.js"></script>
  <!-- If the network is unstable or you prefer to self-host the SDK, uncomment the line below to load it locally -->
  <!-- <script src="../dist/dbr.bundle.js"></script> -->

  <script>
    /** LICENSE ALERT - README
     * To use the library, you need to first specify a license key.
     *
     * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=samples&product=dbr&package=js to get your own trial license good for 30 days.
     * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
     * For more information, see https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner.html#license&utm_source=samples or contact support@dynamsoft.com.
     * LICENSE ALERT - THE END
     */
    let config = {
      license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9",
    };

    // Create a new instance of the Dynamsoft Barcode Scanner
    const barcodeScanner = new Dynamsoft.BarcodeScanner(config);

    const resultsContainer = document.querySelector("#results");

    document.querySelector("#input-file").addEventListener("change", async function (e) {
      let file = e.target.files[0];
      this.value = "";
      resultsContainer.innerText = "";
      try {
        document.querySelector("#decoding").style.display = "inline"; // Show decoding indicator during the decoding process
        // Decode selected image with 'ReadBarcodes_ReadRateFirst' template.
        const result = await barcodeScanner.decode(file, "ReadBarcodes_ReadRateFirst");
        const barcodeResultItems = result.decodedBarcodesResult?.barcodeResultItems;

        if (!barcodeResultItems) {
          resultsContainer.innerText += "No barcode found\n";
          return;
        }

        for (let item of barcodeResultItems) {
          resultsContainer.innerText += item.text + "\n";
          console.log(item.text);
        }
      } catch (ex) {
        let errMsg = ex.message || ex;
        console.error(ex);
        alert(errMsg);
      } finally {
        document.querySelector("#decoding").style.display = "none"; // Hide decoding indicator after the decoding process
      }
    });
  </script>
</body>

</html>