From 7875045f7a43d7080e10f399b93d7696b8efb00c Mon Sep 17 00:00:00 2001 From: ColonelParrot <65585002+ColonelParrot@users.noreply.github.com> Date: Thu, 1 Aug 2024 13:38:16 -0400 Subject: [PATCH] Update README.md --- README.md | 119 +----------------------------------------------------- 1 file changed, 1 insertion(+), 118 deletions(-) diff --git a/README.md b/README.md index a91fc27..6018e36 100644 --- a/README.md +++ b/README.md @@ -1,118 +1 @@ -

- -

- -

- - - -
- - -

- -

- -

- -

-Open-source pure Javascript implemented mobile document scanner. Powered with opencv.js
-Supports the web, NodeJS, React, and others. -

-Available on npm or via cdn
-

- -**Features**: - -- paper detection & highlighting -- paper scanning with distortion correction - -| Image Highlighting | Scanned Result | -| -------------------------------------------- | ------------------------------------------ | -| | | -| | | - -## Quickstart - -> **Developers Note**: you can now use the [jscanify debugging tool](https://colonelparrot.github.io/jscanify/tester.html) to observe the result (highlighting, extraction) on test images. - -### Import - -npm: - -```js -$ npm i jscanify -import jscanify from 'jscanify' -``` - -cdn: - -```html - - - -``` - -> **Note**: jscanify on NodeJS is slightly different. See [wiki: use on NodeJS](https://github.com/ColonelParrot/jscanify/wiki#use-on-nodejs). - -### Highlight Paper in Image - -```html - -``` - -```js -const scanner = new jscanify(); -image.onload = function () { - const highlightedCanvas = scanner.highlightPaper(image); - document.body.appendChild(highlightedCanvas); -}; -``` - -### Extract Paper - -```js -const scanner = new jscanify(); -const paperWidth = 500; -const paperHeight = 1000; -image.onload = function () { - const resultCanvas = scanner.extractPaper(image, paperWidth, paperHeight); - document.body.appendChild(resultCanvas); -}; -``` - -### Highlighting Paper in User Camera - -The following code continuously reads from the user's camera and highlights the paper: - -```html - - - - -``` - -```js -const scanner = new jscanify(); -const canvasCtx = canvas.getContext("2d"); -const resultCtx = result.getContext("2d"); -navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => { - video.srcObject = stream; - video.onloadedmetadata = () => { - video.play(); - - setInterval(() => { - canvasCtx.drawImage(video, 0, 0); - const resultCanvas = scanner.highlightPaper(canvas); - resultCtx.drawImage(resultCanvas, 0, 0); - }, 10); - }; -}); -``` - -To export the paper to a PDF, see [here](https://stackoverflow.com/questions/23681325/convert-canvas-to-pdf) - -### Notes - -- for optimal paper detection, the paper should be placed on a flat surface with a solid background color -- we recommend wrapping your code using `jscanify` in a window `load` event listener to ensure OpenCV is loaded +This is a mirror of [puffinsoft/jscanify](https://github.com/puffinsoft/jscanify). Please direct all issues, stars and forks towards that repository.