diff --git a/docs/images/galaxy.png b/docs/images/galaxy.png new file mode 100644 index 0000000..2750de8 Binary files /dev/null and b/docs/images/galaxy.png differ diff --git a/docs/images/logo-full-small.png b/docs/images/logo-full-small.png new file mode 100644 index 0000000..dc3f2c2 Binary files /dev/null and b/docs/images/logo-full-small.png differ diff --git a/docs/images/test/test.png b/docs/images/test/test.png new file mode 100644 index 0000000..71edae9 Binary files /dev/null and b/docs/images/test/test.png differ diff --git a/docs/images/test/test2.avif b/docs/images/test/test2.avif new file mode 100644 index 0000000..d3e8779 Binary files /dev/null and b/docs/images/test/test2.avif differ diff --git a/docs/index.css b/docs/index.css new file mode 100644 index 0000000..aea10f6 --- /dev/null +++ b/docs/index.css @@ -0,0 +1,142 @@ +@import url("https://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700,800,900"); + +html, +body { + margin: 0; + font-family: "Lato"; +} + +#hero { + width: 100%; + overflow: hidden; + background-image: url("images/galaxy.png"); + background-size: cover; + background-position: 0 -170px; + text-align: center; + color: white; + padding: 50px 0; +} + +#hero h2 { + font-weight: 300; + margin: 0 20px; + margin-top: 15px; +} + +#hero img { + height: 100px; + max-width: 80%; + height: auto; +} + +.view-on .view-on-option { + padding: 11px 16px; + border-radius: 8px; + background: white; + color: black; + text-decoration: none; + font-family: "Lato"; + font-size: 16px; + display: inline-flex; + align-items: center; +} + +.view-on .view-on-option svg { + margin-right: 8px; +} + +#content { + max-width: 700px; + margin: auto; + margin-top: 30px; + padding: 0 30px; + padding-bottom: 30px; +} + +#demo #demo-images .image-container { + width: 150px; + height: 150px; + border-radius: 5px; + overflow: hidden; + cursor: pointer; + margin-bottom: 20px; +} + +#demo #demo-images .image-container.selected { + box-shadow: 0 0 0 6px #1e85ff; +} + +#demo #demo-images .image-container img { + width: 150px; + height: 150px; +} + +#demo { + display: flex; +} + +#arrow { + margin: 20px; + display: flex; + align-items: center; +} + +#arrow::before { + content: "\2192"; + font-size: 35px; +} + +#demo-result { + flex: 1; + border: 3px solid #ededed; + border-radius: 5px; + background-color: #f7f7f7; + padding: 20px; + box-sizing: border-box; + + height: 320px; + overflow: auto; +} + +#demo-result canvas { + max-width: 100%; +} + +code { + background-color: #f1f1f1 !important; + border-radius: 5px; +} + +/* content: 2193 when screen smol */ + +@media only screen and (max-width: 600px) { + #demo{ + display: block; + } + + #demo-images{ + display: flex; + justify-content: center; + } + + #demo #demo-images .image-container, #demo #demo-images .image-container img{ + height: 100px; + width: 100px; + } + + #demo #demo-images .image-container:first-of-type{ + margin-right: 50px; + } + + #demo-title{ + text-align: center; + } + #arrow{ + margin-top: 0; + justify-content: center; + } + + #arrow::before{ + content: "\2193"; + } +} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..55eb011 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,106 @@ + + + + + + + + + jscanify - Javascript mobile document scanner + + + + + + + + + + + + +
+ +

Open-source pure Javascript implemented mobile document scanner.

+
+
+ + + View on Github + + + + + + + View on npm + +
+
+
+ jscanify is an open-source pure Javascript implemented mobile + document scanner designed to run in any Javascript environment + for free.

+ jscanify is capable of detecting & highlighting documents in an + image, as well as undistorting it. It is fast and easy to learn.

+ It can run in the browser or on a server with NodeJS. +

+
+
+

Demo

+

Select an image below to scan

+
+
+
+
+ +
+
+ +
+
+
+
+ Scan results will appear here +
+
+

+
+

Installation

+ 
$ npm i jscanify
+import jscanify from 'jscanify'
+ OR + 
<script src="https://docs.opencv.org/4.7.0/opencv.js" async></script>
+<script src="https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js"></script>
+

Usage

+ 
const scanner = new jscanify();
+const paperWidth = 500;
+const paperHeight = 1000;
+image.onload = function () {
+  scanner.extractPaper(image, paperWidth, paperHeight, (resultCanvas) => {
+    document.body.appendChild(resultCanvas);
+  });
+};
+ It's that easy! Come check out the documentation! +
+ + + + + + + + + + \ No newline at end of file diff --git a/docs/script.js b/docs/script.js new file mode 100644 index 0000000..e125012 --- /dev/null +++ b/docs/script.js @@ -0,0 +1,42 @@ +let loadedOpenCV = false + +const openCvURL = "https://docs.opencv.org/4.7.0/opencv.js" + +function loadOpenCV(onComplete) { + if (loadedOpenCV) { + onComplete() + } else { + $('#demo-result').text('Loading OpenCV...') + const script = document.createElement("script") + script.src = openCvURL + + script.onload = function () { + setTimeout(function () { + onComplete() + }, 1000) + loadedOpenCV = true + } + document.body.appendChild(script) + } +} + +const scanner = new jscanify() +$('#demo-images .image-container').click(function () { + $('.image-container.selected').removeClass('selected') + $(this).addClass('selected') + const imageSrc = $(this).find('img')[0].src + console.log(imageSrc) + loadOpenCV(function () { + $('#demo-result').empty() + + const newImg = document.createElement("img") + newImg.src = imageSrc + + scanner.extractPaper(newImg, 386, 500, (resultCanvas) => { + $('#demo-result').append(resultCanvas); + + const highlightedCanvas = scanner.highlightPaper(newImg) + $('#demo-result').append(highlightedCanvas); + }); + }) +}) \ No newline at end of file