{"id":13562654,"url":"https://github.com/puffinsoft/jscanify","last_synced_at":"2025-04-03T19:31:17.206Z","repository":{"id":153086716,"uuid":"627512878","full_name":"puffinsoft/jscanify","owner":"puffinsoft","description":"Open-source Javascript mobile document scanner.","archived":false,"fork":false,"pushed_at":"2024-07-07T18:15:15.000Z","size":5569,"stargazers_count":925,"open_issues_count":4,"forks_count":49,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-07-07T19:35:32.793Z","etag":null,"topics":["document-scanner","javascript","js","nodejs"],"latest_commit_sha":null,"homepage":"https://puffinsoft.github.io/jscanify/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/puffinsoft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-13T16:11:12.000Z","updated_at":"2024-07-07T19:35:41.518Z","dependencies_parsed_at":null,"dependency_job_id":"6b5a95dd-d17a-4fe8-8946-723cd0670db1","html_url":"https://github.com/puffinsoft/jscanify","commit_stats":null,"previous_names":["puffinsoft/jscanify"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puffinsoft%2Fjscanify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puffinsoft%2Fjscanify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puffinsoft%2Fjscanify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puffinsoft%2Fjscanify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/puffinsoft","download_url":"https://codeload.github.com/puffinsoft/jscanify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247065183,"owners_count":20877720,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["document-scanner","javascript","js","nodejs"],"created_at":"2024-08-01T13:01:10.799Z","updated_at":"2025-04-03T19:31:17.200Z","avatar_url":"https://github.com/puffinsoft.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\r\n    \u003cimg src=\"docs/images/logo-github.png\" height=\"150\"\u003e\r\n\u003c/p\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n    \u003ca href=\"https://www.jsdelivr.com/package/gh/ColonelParrot/jscanify\"\u003e\u003cimg src=\"https://data.jsdelivr.com/v1/package/gh/ColonelParrot/jscanify/badge\"\u003e\u003c/a\u003e\r\n    \u003ca href=\"https://cdnjs.com/libraries/jscanify\"\u003e\u003cimg src=\"https://img.shields.io/cdnjs/v/jscanify\"\u003e\u003c/a\u003e\r\n    \u003ca href=\"https://npmjs.com/package/jscanify\"\u003e\u003cimg src=\"https://badgen.net/npm/dw/jscanify\"\u003e\u003c/a\u003e\r\n    \u003cbr /\u003e\r\n    \u003ca href=\"https://github.com/puffinsoft/jscanify/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/github/license/puffinsoft/jscanify.svg\"\u003e\u003c/a\u003e\r\n    \u003ca href=\"https://npmjs.com/package/jscanify\"\u003e\u003cimg src=\"https://badgen.net/npm/v/jscanify\"\u003e\u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003ca href=\"https://nodei.co/npm/jscanify/\"\u003e\u003cimg src=\"https://nodei.co/npm/jscanify.png\"\u003e\u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\nPowered with \u003ca href=\"https://docs.opencv.org/3.4/d5/d10/tutorial_js_root.html\"\u003eopencv.js\u003c/a\u003e\u003cbr/\u003e\r\nSupports the web, NodeJS, \u003ca href=\"https://github.com/ColonelParrot/react-scanify-demo\"\u003eReact\u003c/a\u003e, and others.\r\n\u003cbr/\u003e\r\nAvailable on \u003ca href=\"https://www.npmjs.com/package/jscanify\"\u003enpm\u003c/a\u003e or via \u003ca href=\"https://www.jsdelivr.com/package/gh/ColonelParrot/jscanify\"\u003ecdn\u003c/a\u003e\u003cbr/\u003e\r\n\u003c/p\u003e\r\n\r\n**Features**:\r\n\r\n- paper detection \u0026 highlighting\r\n- paper scanning with distortion correction\r\n\r\n\u003e [!IMPORTANT]  \r\n\u003e 🎉 _jscanify v1.3.0+_ has just been released! **Same API, better results.** See the [release](https://github.com/puffinsoft/jscanify/releases/tag/v1.3.0) to see the difference! 🎉\r\n\r\n\r\n- 🆕 glare suppression\r\n- 🆕 multi-colored paper support\r\n\r\n\u003chr /\u003e\r\n\r\n\u003cimg src=\"docs/images/github-explanation-long.png\" /\u003e\r\n\r\n\u003ch3 align=\"center\" margin=\"0\"\u003e\u003ca href=\"https://github.com/puffinsoft/jscanify/wiki\"\u003e➡️ view documentation\u003c/a\u003e\u003c/h3\u003e\r\n\r\n\u003chr/\u003e\r\n\r\n## Quickstart\r\n\r\n\u003e **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.\r\n\r\n### Import\r\n\r\nnpm:\r\n\r\n```js\r\n$ npm i jscanify\r\nimport jscanify from 'jscanify'\r\n```\r\n\r\ncdn:\r\n\r\n```html\r\n\u003cscript src=\"https://docs.opencv.org/4.7.0/opencv.js\" async\u003e\u003c/script\u003e\r\n\u003c!-- warning: loading OpenCV can take some time. Load asynchronously --\u003e\r\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n\u003e **Note**: jscanify on NodeJS is slightly different. See [wiki: use on NodeJS](https://github.com/ColonelParrot/jscanify/wiki#use-on-nodejs).\r\n\r\n### Highlight Paper in Image\r\n\r\n```html\r\n\u003cimg src=\"/path/to/your/image.png\" id=\"image\" /\u003e\r\n```\r\n\r\n```js\r\nconst scanner = new jscanify();\r\nimage.onload = function () {\r\n  const highlightedCanvas = scanner.highlightPaper(image);\r\n  document.body.appendChild(highlightedCanvas);\r\n};\r\n```\r\n\r\n### Extract Paper\r\n\r\n```js\r\nconst scanner = new jscanify();\r\nconst paperWidth = 500;\r\nconst paperHeight = 1000;\r\nimage.onload = function () {\r\n  const resultCanvas = scanner.extractPaper(image, paperWidth, paperHeight);\r\n  document.body.appendChild(resultCanvas);\r\n};\r\n```\r\n\r\n### Highlighting Paper in User Camera\r\n\r\nThe following code continuously reads from the user's camera and highlights the paper:\r\n\r\n```html\r\n\u003cvideo id=\"video\"\u003e\u003c/video\u003e \u003ccanvas id=\"canvas\"\u003e\u003c/canvas\u003e\r\n\u003c!-- original video --\u003e\r\n\u003ccanvas id=\"result\"\u003e\u003c/canvas\u003e\r\n\u003c!-- highlighted video --\u003e\r\n```\r\n\r\n```js\r\nconst scanner = new jscanify();\r\nconst canvasCtx = canvas.getContext(\"2d\");\r\nconst resultCtx = result.getContext(\"2d\");\r\nnavigator.mediaDevices.getUserMedia({ video: true }).then((stream) =\u003e {\r\n  video.srcObject = stream;\r\n  video.onloadedmetadata = () =\u003e {\r\n    video.play();\r\n\r\n    setInterval(() =\u003e {\r\n      canvasCtx.drawImage(video, 0, 0);\r\n      const resultCanvas = scanner.highlightPaper(canvas);\r\n      resultCtx.drawImage(resultCanvas, 0, 0);\r\n    }, 10);\r\n  };\r\n});\r\n```\r\n\r\nTo export the paper to a PDF, see [here](https://stackoverflow.com/questions/23681325/convert-canvas-to-pdf)\r\n\r\n### Notes\r\n\r\n- for optimal paper detection, the paper should be placed on a flat surface with a solid background color\r\n- we recommend wrapping your code using `jscanify` in a window `load` event listener to ensure OpenCV is loaded\r\n\r\n\u003ch3 align=\"center\" margin=\"0\"\u003e\u003ca href=\"https://github.com/puffinsoft/jscanify/wiki\"\u003e➡️ view documentation\u003c/a\u003e\u003c/h3\u003e","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpuffinsoft%2Fjscanify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpuffinsoft%2Fjscanify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpuffinsoft%2Fjscanify/lists"}