test-mds-js-samples/scenarios/image-file-scanning.html at main · dynamsoft-h/test-mds-js-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
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image File Scanning | Dynamsoft Document Scanner</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-scanner@1.4.0/dist/dds.bundle.js"></script> -->
    <!-- To use locally: -->
    <script src="../../dist/dds.bundle.js"></script>
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        padding: 20px;
        max-width: 800px;
        margin: 0 auto;
      }
      h1 {
        margin-bottom: 20px;
      }
      input[type="file"] {
        margin-bottom: 20px;
      }
      #results canvas {
        width: 100%;
        height: auto;
      }
    </style>
  </head>

  <body>
    <h1>Scan An Existing Image</h1>
    <input type="file" id="initialFile" accept="image/png,image/jpeg,image/jpg" />
    <div id="results"></div>

    <script>
      const resultContainer = document.querySelector("#results");

      let documentScanner;

      // Initialize the Dynamsoft Document Scanner
      (async () => {
        try {
          console.log("Initializing Dynamsoft Document Scanner...");

          documentScanner = new Dynamsoft.DocumentScanner({
            license:
              "YOUR_LICENSE_KEY_HERE", // Replace with your actual license key
            scannerViewConfig: {
              cameraEnhancerUIPath: "../../dist/document-scanner.ui.xml",
            },
          });

          console.log("Initialization complete!");
        } catch (ex) {
          alert(`Failed to initialize: ${ex?.message || ex}`);
          throw ex;
        }
      })();

      // File input handler
      document.getElementById("initialFile").onchange = async function () {
        try {
          const files = Array.from(this.files || []);
          if (files.length) {
            const result = await documentScanner.launch(files[0]);

            // Clear the result container and display the scanned result as a canvas
            if (result?.correctedImageResult) {
              resultContainer.innerHTML = ""; // Clear placeholder content
              const canvas = result.correctedImageResult.toCanvas();
              resultContainer.appendChild(canvas);
            } else {
              resultContainer.innerHTML = "<p>No image scanned. Please try again.</p>";
            }
          }
        } catch (ex) {
          console.error("File scan error:", ex);
          const p = document.createElement("p");
          p.textContent = `Error: ${ex?.message || ex}`;
          resultContainer.replaceChildren(p);
        }
      };
    </script>
  </body>
</html>