jscanify 1.0.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +28 -10
  2. package/docs/images/test/test-sized.png +0 -0
  3. package/docs/images/test/test2-sized.png +0 -0
  4. package/docs/images/test/test2.png +0 -0
  5. package/docs/index.css +141 -141
  6. package/docs/index.html +124 -105
  7. package/docs/script.js +41 -41
  8. package/package.json +9 -4
  9. package/src/jscanify-node.js +256 -0
  10. package/src/jscanify.js +254 -275
  11. package/src/opencv.js +48 -0
  12. package/test/tests.js +120 -0
  13. package/docs/images/test/test2.avif +0 -0
package/README.md CHANGED
@@ -2,9 +2,23 @@
2
2
  <img src="docs/images/logo-full.png" height="100">
3
3
  </p>
4
4
 
5
+ <p align="center">
6
+ <a href="https://www.jsdelivr.com/package/gh/ColonelParrot/jscanify"><img src="https://data.jsdelivr.com/v1/package/gh/ColonelParrot/jscanify/badge"></a>
7
+ <a href="https://cdnjs.com/libraries/jscanify"><img src="https://img.shields.io/cdnjs/v/jscanify"></a>
8
+ <a href="https://npmjs.com/package/jscanify"><img src="https://badgen.net/npm/dw/jscanify"></a>
9
+ <br />
10
+ <a href="https://github.com/ColonelParrot/jscanify/blob/master/LICENSE"><img src="https://img.shields.io/github/license/ColonelParrot/jscanify.svg"></a>
11
+ <a href="https://GitHub.com/ColonelParrot/jscanify/releases/"><img src="https://img.shields.io/github/release/ColonelParrot/jscanify.svg"></a>
12
+ <a href="https://npmjs.com/package/jscanify"><img src="https://badgen.net/npm/v/jscanify"></a>
13
+ </p>
14
+
15
+ <p align="center">
16
+ <a href="https://nodei.co/npm/jscanify/"><img src="https://nodei.co/npm/jscanify.png"></a>
17
+ </p>
18
+
5
19
  <p align="center">
6
20
  Open-source pure Javascript implemented mobile document scanner. Powered with <a href="https://docs.opencv.org/3.4/d5/d10/tutorial_js_root.html">opencv.js</a><br/><br/>
7
- Available on <a href="https://www.npmjs.com/package/jscanify">npm</a> or via cdn
21
+ Available on <a href="https://www.npmjs.com/package/jscanify">npm</a> or via <a href="https://www.jsdelivr.com/package/gh/ColonelParrot/jscanify">cdn</a>
8
22
  </p>
9
23
 
10
24
  **Features**:
@@ -12,8 +26,8 @@ Available on <a href="https://www.npmjs.com/package/jscanify">npm</a> or via cdn
12
26
  - paper detection & highlighting
13
27
  - paper scanning with distortion correction
14
28
 
15
- | Image Highlighting | Scanned Result |
16
- | ------------------------------------------------- | ----------------------------------------------- |
29
+ | Image Highlighting | Scanned Result |
30
+ | -------------------------------------------- | ------------------------------------------ |
17
31
  | <img src="docs/images/highlight-paper1.png"> | <img src="docs/images/scanned-paper1.png"> |
18
32
  | <img src="docs/images/highlight-paper2.png"> | <img src="docs/images/scanned-paper2.png"> |
19
33
 
@@ -36,6 +50,8 @@ cdn:
36
50
  <script src="https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js"></script>
37
51
  ```
38
52
 
53
+ > **Note**: jscanify on NodeJS is slightly different. See [wiki: use on NodeJS](https://github.com/ColonelParrot/jscanify/wiki#use-on-nodejs).
54
+
39
55
  ### Highlight Paper in Image
40
56
 
41
57
  ```html
@@ -57,9 +73,8 @@ const scanner = new jscanify();
57
73
  const paperWidth = 500;
58
74
  const paperHeight = 1000;
59
75
  image.onload = function () {
60
- scanner.extractPaper(image, paperWidth, paperHeight, (resultCanvas) => {
61
- document.body.appendChild(resultCanvas);
62
- });
76
+ const resultCanvas = scanner.extractPaper(image, paperWidth, paperHeight);
77
+ document.body.appendChild(resultCanvas);
63
78
  };
64
79
  ```
65
80
 
@@ -68,9 +83,10 @@ image.onload = function () {
68
83
  The following code continuously reads from the user's camera and highlights the paper:
69
84
 
70
85
  ```html
71
- <video id="video"></video>
72
- <canvas id="canvas"></canvas> <!-- original video -->
73
- <canvas id="result"></canvas> <!-- highlighted video -->
86
+ <video id="video"></video> <canvas id="canvas"></canvas>
87
+ <!-- original video -->
88
+ <canvas id="result"></canvas>
89
+ <!-- highlighted video -->
74
90
  ```
75
91
 
76
92
  ```js
@@ -92,6 +108,8 @@ navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
92
108
  ```
93
109
 
94
110
  To export the paper to a PDF, see [here](https://stackoverflow.com/questions/23681325/convert-canvas-to-pdf)
111
+
95
112
  ### Notes
113
+
96
114
  - for optimal paper detection, the paper should be placed on a flat surface with a solid background color
97
- - we recommend wrapping your code using `jscanify` in a window `load` event listener to ensure OpenCV is loaded
115
+ - we recommend wrapping your code using `jscanify` in a window `load` event listener to ensure OpenCV is loaded
package/docs/images/test/test-sized.png ADDED
Binary file
package/docs/images/test/test2-sized.png ADDED
Binary file
package/docs/images/test/test2.png ADDED
Binary file
package/docs/index.css CHANGED
@@ -1,142 +1,142 @@
1
- @import url("https://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700,800,900");
2
-
3
- html,
4
- body {
5
- margin: 0;
6
- font-family: "Lato";
7
- }
8
-
9
- #hero {
10
- width: 100%;
11
- overflow: hidden;
12
- background-image: url("images/galaxy.png");
13
- background-size: cover;
14
- background-position: 0 -170px;
15
- text-align: center;
16
- color: white;
17
- padding: 50px 0;
18
- }
19
-
20
- #hero h2 {
21
- font-weight: 300;
22
- margin: 0 20px;
23
- margin-top: 15px;
24
- }
25
-
26
- #hero img {
27
- height: 100px;
28
- max-width: 80%;
29
- height: auto;
30
- }
31
-
32
- .view-on .view-on-option {
33
- padding: 11px 16px;
34
- border-radius: 8px;
35
- background: white;
36
- color: black;
37
- text-decoration: none;
38
- font-family: "Lato";
39
- font-size: 16px;
40
- display: inline-flex;
41
- align-items: center;
42
- }
43
-
44
- .view-on .view-on-option svg {
45
- margin-right: 8px;
46
- }
47
-
48
- #content {
49
- max-width: 700px;
50
- margin: auto;
51
- margin-top: 30px;
52
- padding: 0 30px;
53
- padding-bottom: 30px;
54
- }
55
-
56
- #demo #demo-images .image-container {
57
- width: 150px;
58
- height: 150px;
59
- border-radius: 5px;
60
- overflow: hidden;
61
- cursor: pointer;
62
- margin-bottom: 20px;
63
- }
64
-
65
- #demo #demo-images .image-container.selected {
66
- box-shadow: 0 0 0 6px #1e85ff;
67
- }
68
-
69
- #demo #demo-images .image-container img {
70
- width: 150px;
71
- height: 150px;
72
- }
73
-
74
- #demo {
75
- display: flex;
76
- }
77
-
78
- #arrow {
79
- margin: 20px;
80
- display: flex;
81
- align-items: center;
82
- }
83
-
84
- #arrow::before {
85
- content: "\2192";
86
- font-size: 35px;
87
- }
88
-
89
- #demo-result {
90
- flex: 1;
91
- border: 3px solid #ededed;
92
- border-radius: 5px;
93
- background-color: #f7f7f7;
94
- padding: 20px;
95
- box-sizing: border-box;
96
-
97
- height: 320px;
98
- overflow: auto;
99
- }
100
-
101
- #demo-result canvas {
102
- max-width: 100%;
103
- }
104
-
105
- code {
106
- background-color: #f1f1f1 !important;
107
- border-radius: 5px;
108
- }
109
-
110
- /* content: 2193 when screen smol */
111
-
112
- @media only screen and (max-width: 600px) {
113
- #demo{
114
- display: block;
115
- }
116
-
117
- #demo-images{
118
- display: flex;
119
- justify-content: center;
120
- }
121
-
122
- #demo #demo-images .image-container, #demo #demo-images .image-container img{
123
- height: 100px;
124
- width: 100px;
125
- }
126
-
127
- #demo #demo-images .image-container:first-of-type{
128
- margin-right: 50px;
129
- }
130
-
131
- #demo-title{
132
- text-align: center;
133
- }
134
- #arrow{
135
- margin-top: 0;
136
- justify-content: center;
137
- }
138
-
139
- #arrow::before{
140
- content: "\2193";
141
- }
1
+ @import url("https://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700,800,900");
2
+
3
+ html,
4
+ body {
5
+ margin: 0;
6
+ font-family: "Lato";
7
+ }
8
+
9
+ #hero {
10
+ width: 100%;
11
+ overflow: hidden;
12
+ background-image: url("images/galaxy.png");
13
+ background-size: cover;
14
+ background-position: 0 -170px;
15
+ background-attachment: fixed;
16
+ text-align: center;
17
+ color: white;
18
+ padding: 50px 0;
19
+ }
20
+
21
+ #hero h2 {
22
+ font-weight: 300;
23
+ margin: 0 20px;
24
+ margin-top: 15px;
25
+ }
26
+
27
+ #hero img {
28
+ max-width: 80%;
29
+ height: auto;
30
+ }
31
+
32
+ .view-on .view-on-option {
33
+ padding: 11px 16px;
34
+ border-radius: 8px;
35
+ background: white;
36
+ color: black;
37
+ text-decoration: none;
38
+ font-family: "Lato";
39
+ font-size: 16px;
40
+ display: inline-flex;
41
+ align-items: center;
42
+ }
43
+
44
+ .view-on .view-on-option svg {
45
+ margin-right: 8px;
46
+ }
47
+
48
+ #content {
49
+ max-width: 700px;
50
+ margin: auto;
51
+ margin-top: 30px;
52
+ padding: 0 30px;
53
+ padding-bottom: 30px;
54
+ }
55
+
56
+ #demo #demo-images .image-container {
57
+ width: 150px;
58
+ height: 150px;
59
+ border-radius: 5px;
60
+ overflow: hidden;
61
+ cursor: pointer;
62
+ margin-bottom: 20px;
63
+ }
64
+
65
+ #demo #demo-images .image-container.selected {
66
+ box-shadow: 0 0 0 6px #1e85ff;
67
+ }
68
+
69
+ #demo #demo-images .image-container img {
70
+ width: 150px;
71
+ height: 150px;
72
+ }
73
+
74
+ #demo {
75
+ display: flex;
76
+ }
77
+
78
+ #arrow {
79
+ margin: 20px;
80
+ display: flex;
81
+ align-items: center;
82
+ }
83
+
84
+ #arrow::before {
85
+ content: "\2192";
86
+ font-size: 35px;
87
+ }
88
+
89
+ #demo-result {
90
+ flex: 1;
91
+ border: 3px solid #ededed;
92
+ border-radius: 5px;
93
+ background-color: #f7f7f7;
94
+ padding: 20px;
95
+ box-sizing: border-box;
96
+
97
+ height: 320px;
98
+ overflow: auto;
99
+ }
100
+
101
+ #demo-result canvas {
102
+ max-width: 100%;
103
+ }
104
+
105
+ code {
106
+ background-color: #f1f1f1 !important;
107
+ border-radius: 5px;
108
+ }
109
+
110
+ /* content: 2193 when screen smol */
111
+
112
+ @media only screen and (max-width: 600px) {
113
+ #demo{
114
+ display: block;
115
+ }
116
+
117
+ #demo-images{
118
+ display: flex;
119
+ justify-content: center;
120
+ }
121
+
122
+ #demo #demo-images .image-container, #demo #demo-images .image-container img{
123
+ height: 100px;
124
+ width: 100px;
125
+ }
126
+
127
+ #demo #demo-images .image-container:first-of-type{
128
+ margin-right: 50px;
129
+ }
130
+
131
+ #demo-title{
132
+ text-align: center;
133
+ }
134
+ #arrow{
135
+ margin-top: 0;
136
+ justify-content: center;
137
+ }
138
+
139
+ #arrow::before{
140
+ content: "\2193";
141
+ }
142
142
  }
package/docs/index.html CHANGED
@@ -1,106 +1,125 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <script async src="https://www.googletagmanager.com/gtag/js?id=G-32CWY3SB1G"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-32CWY3SB1G")</script>
6
- <meta charset="UTF-8" />
7
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
- <title>jscanify - Javascript mobile document scanner</title>
10
- <meta name="description" content="Open-source pure Javascript implemented mobile document scanner." />
11
- <meta property="og:title" content="jscanify" />
12
- <meta property="og:description" content="Open-source pure Javascript implemented mobile document scanner." />
13
- <meta property="og:url" content="https://colonelparrot.github.io/jscanify/" />
14
- <meta property="og:image" content="https://colonelparrot.github.io/jscanify/images/logo.png" />
15
- <meta property="og:locale" content="en_US" />
16
- <link rel="icon" type="image/x-icon" href="favicon.ico" />
17
- <link rel="stylesheet" href="index.css" />
18
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/a11y-light.min.css"
19
- integrity="sha512-WDk6RzwygsN9KecRHAfm9HTN87LQjqdygDmkHSJxVkVI7ErCZ8ZWxP6T8RvBujY1n2/E4Ac+bn2ChXnp5rnnHA=="
20
- crossorigin="anonymous" referrerpolicy="no-referrer" async />
21
- </head>
22
-
23
- <body>
24
- <div id="hero">
25
- <img src="images/logo-full-small.png" />
26
- <h2>Open-source pure Javascript implemented mobile document scanner.</h2>
27
- <br />
28
- <div class="view-on">
29
- <a class="view-on-option" href="https://github.com/ColonelParrot/jscanify" target="_blank" style="margin: 10px">
30
- <svg width="16" height="16" aria-hidden="true" viewBox="0 0 16 16">
31
- <path fill-rule="evenodd"
32
- d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
33
- </path>
34
- </svg>
35
- View on Github
36
- </a>
37
- <a class="view-on-option" href="https://nodei.co/npm/jscanify/" target="_blank">
38
- <svg xmlns="http://www.w3.org/2000/svg" width="41" height="16" viewBox="0 0 256 100"
39
- preserveAspectRatio="xMinYMin meet">
40
- <path d="M0 0v85.498h71.166V99.83H128V85.498h128V0H0z" fill="#CB3837"></path>
41
- <path
42
- d="M42.502 14.332h-28.17v56.834h28.17V28.664h14.332v42.502h14.332V14.332H42.502zM85.498 14.332v71.166h28.664V71.166h28.17V14.332H85.498zM128 56.834h-13.838v-28.17H128v28.17zM184.834 14.332h-28.17v56.834h28.17V28.664h14.332v42.502h14.332V28.664h14.332v42.502h14.332V14.332h-57.328z"
43
- fill="#FFF"></path>
44
- </svg>
45
- View on npm
46
- </a>
47
- </div>
48
- </div>
49
- <div id="content">
50
- <b>jscanify</b> is an open-source pure Javascript implemented mobile
51
- document scanner designed to run in any Javascript environment
52
- <u>for free</u>. <br /><br />
53
- <b>jscanify</b> is capable of detecting & highlighting documents in an
54
- image, as well as undistorting it. It is fast and easy to learn.<br /><br />
55
- It can run in the <b>browser</b> or on a server with <b>NodeJS</b>.
56
- <br /><br />
57
- <hr />
58
- <div id="demo-title">
59
- <h1 style="margin-bottom: 0">Demo</h1>
60
- <p style="margin-top: 0">Select an image below to scan</p>
61
- </div>
62
- <div id="demo">
63
- <div id="demo-images">
64
- <div class="image-container">
65
- <img src="images/test/test.png" />
66
- </div>
67
- <div class="image-container" style="margin-bottom: 0">
68
- <img src="images/test/test2.avif" />
69
- </div>
70
- </div>
71
- <div id="arrow"></div>
72
- <div id="demo-result">
73
- Scan results will appear here
74
- </div>
75
- </div>
76
- <br /><br />
77
- <hr />
78
- <h1>Installation</h1>
79
- <pre><code class="language-js">$ npm i jscanify
80
- import jscanify from 'jscanify'</code></pre>
81
- OR
82
- <pre><code class="language-html">&lt;script src=&quot;https://docs.opencv.org/4.7.0/opencv.js&quot; async&gt;&lt;/script&gt;
83
- &lt;script src=&quot;https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js&quot;&gt;&lt;/script&gt;</code></pre>
84
- <h1>Usage</h1>
85
- <pre><code class="language-js">const scanner = new jscanify();
86
- const paperWidth = 500;
87
- const paperHeight = 1000;
88
- image.onload = function () {
89
- scanner.extractPaper(image, paperWidth, paperHeight, (resultCanvas) => {
90
- document.body.appendChild(resultCanvas);
91
- });
92
- };</code></pre>
93
- It's that easy! Come check out the <a href="https://github.com/ColonelParrot/jscanify/wiki" target="_blank">documentation</a>!
94
- </div>
95
- <script src="../src/jscanify.js"></script>
96
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
97
- <script src="script.js"></script>
98
-
99
-
100
- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"
101
- integrity="sha512-bgHRAiTjGrzHzLyKOnpFvaEpGzJet3z4tZnXGjpsCcqOnAH6VGUx9frc5bcIhKTVLEiCO6vEhNAgx5jtLUYrfA=="
102
- crossorigin="anonymous" referrerpolicy="no-referrer"></script>
103
- <script>hljs.highlightAll();</script>
104
- </body>
105
-
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <script async src="https://www.googletagmanager.com/gtag/js?id=G-32CWY3SB1G"></script>
6
+ <script>function gtag() { dataLayer.push(arguments) } window.dataLayer = window.dataLayer || [], gtag("js", new Date), gtag("config", "G-32CWY3SB1G")</script>
7
+ <meta charset="UTF-8" />
8
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
9
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10
+ <title>jscanify - Javascript mobile document scanner</title>
11
+ <meta name="description" content="Open-source pure Javascript implemented mobile document scanner." />
12
+ <meta property="og:title" content="jscanify" />
13
+ <meta property="og:description" content="Open-source pure Javascript implemented mobile document scanner." />
14
+ <meta property="og:url" content="https://colonelparrot.github.io/jscanify/" />
15
+ <meta property="og:image" content="https://colonelparrot.github.io/jscanify/images/logo.png" />
16
+ <meta property="og:locale" content="en_US" />
17
+ <link rel="icon" type="image/x-icon" href="favicon.ico" />
18
+ <link rel="stylesheet" href="index.css" />
19
+ </head>
20
+
21
+ <body>
22
+ <div id="hero" style="position: relative">
23
+ <a href="https://github.com/ColonelParrot/jscanify" aria-label="View the library on GitHub" target="_blank" style="position: absolute; top: 0; right: 0">
24
+ <svg width="80" height="80" viewBox="0 0 250 250"
25
+ style="fill:white; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
26
+ <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
27
+ <path
28
+ d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
29
+ fill="black" style="transform-origin: 130px 106px;" class="octo-arm"></path>
30
+ <path
31
+ d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
32
+ fill="black" class="octo-body"></path>
33
+ </svg>
34
+ </a>
35
+ <img src="images/logo-full-small.png" alt="jscanify logo" />
36
+ <h2>Open-source pure Javascript implemented mobile document scanner.</h2>
37
+ <br />
38
+ <div class="view-on">
39
+ <a class="view-on-option" href="https://github.com/ColonelParrot/jscanify" target="_blank" style="margin: 10px">
40
+ <svg width="16" height="16" aria-hidden="true" viewBox="0 0 16 16">
41
+ <path fill-rule="evenodd"
42
+ d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
43
+ </path>
44
+ </svg>
45
+ View on Github
46
+ </a>
47
+ <a class="view-on-option" href="https://nodei.co/npm/jscanify/" target="_blank">
48
+ <svg xmlns="http://www.w3.org/2000/svg" width="41" height="16" viewBox="0 0 256 100"
49
+ preserveAspectRatio="xMinYMin meet">
50
+ <path d="M0 0v85.498h71.166V99.83H128V85.498h128V0H0z" fill="#CB3837"></path>
51
+ <path
52
+ d="M42.502 14.332h-28.17v56.834h28.17V28.664h14.332v42.502h14.332V14.332H42.502zM85.498 14.332v71.166h28.664V71.166h28.17V14.332H85.498zM128 56.834h-13.838v-28.17H128v28.17zM184.834 14.332h-28.17v56.834h28.17V28.664h14.332v42.502h14.332V28.664h14.332v42.502h14.332V14.332h-57.328z"
53
+ fill="#FFF"></path>
54
+ </svg>
55
+ View on npm
56
+ </a>
57
+ </div>
58
+ </div>
59
+ <div id="content">
60
+ <b>jscanify</b> is an open-source pure Javascript implemented mobile
61
+ document scanner designed to run in any Javascript environment
62
+ <u>for free</u>. <br /><br />
63
+ <b>jscanify</b> is capable of detecting & highlighting documents in an
64
+ image, as well as undistorting it. It is fast and easy to learn.<br /><br />
65
+ It can run in the <b>browser</b> or on a server with <b>NodeJS</b>.
66
+ <br /><br />
67
+ <hr />
68
+ <div id="demo-title">
69
+ <h1 style="margin-bottom: 0">Demo</h1>
70
+ <p style="margin-top: 0">Select an image below to scan</p>
71
+ </div>
72
+ <div id="demo">
73
+ <div id="demo-images">
74
+ <div class="image-container">
75
+ <img src="images/test/test-sized.png" data-url="images/test/test.png" alt="jscanify test image 1" />
76
+ </div>
77
+ <div class="image-container" style="margin-bottom: 0">
78
+ <img src="images/test/test2-sized.png" data-url="images/test/test2.png" alt="jscanify test image 2" />
79
+ </div>
80
+ </div>
81
+ <div id="arrow"></div>
82
+ <div id="demo-result">
83
+ Scan results will appear here
84
+ </div>
85
+ </div>
86
+ <br /><br />
87
+ <hr />
88
+ <h1>Installation</h1>
89
+ <pre><code class="language-js">$ npm i jscanify
90
+ import jscanify from 'jscanify'</code></pre>
91
+ OR
92
+ <pre><code class="language-html">&lt;script src=&quot;https://docs.opencv.org/4.7.0/opencv.js&quot; async&gt;&lt;/script&gt;
93
+ &lt;script src=&quot;https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js&quot;&gt;&lt;/script&gt;</code></pre>
94
+ <h1>Usage</h1>
95
+ <pre><code class="language-js">const scanner = new jscanify();
96
+ const paperWidth = 500;
97
+ const paperHeight = 1000;
98
+ image.onload = function () {
99
+ scanner.extractPaper(image, paperWidth, paperHeight, (resultCanvas) => {
100
+ document.body.appendChild(resultCanvas);
101
+ });
102
+ };</code></pre>
103
+ It's that easy! Come check out the <a href="https://github.com/ColonelParrot/jscanify/wiki"
104
+ target="_blank">documentation</a>!
105
+ </div>
106
+ <script src="../src/jscanify.js"></script>
107
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
108
+ <script src="script.js"></script>
109
+
110
+
111
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"
112
+ integrity="sha512-bgHRAiTjGrzHzLyKOnpFvaEpGzJet3z4tZnXGjpsCcqOnAH6VGUx9frc5bcIhKTVLEiCO6vEhNAgx5jtLUYrfA=="
113
+ crossorigin="anonymous" referrerpolicy="no-referrer" async></script>
114
+ <script>
115
+ $(window).on('load', function () {
116
+ hljs.highlightAll();
117
+ })
118
+ </script>
119
+
120
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/a11y-light.min.css"
121
+ integrity="sha512-WDk6RzwygsN9KecRHAfm9HTN87LQjqdygDmkHSJxVkVI7ErCZ8ZWxP6T8RvBujY1n2/E4Ac+bn2ChXnp5rnnHA=="
122
+ crossorigin="anonymous" referrerpolicy="no-referrer" />
123
+ </body>
124
+
106
125
  </html>