jscanify：支持Node.js/浏览器/React移动文档扫描仪

大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 jscanify

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

jscanify 是开源的纯 Javascript 实现的移动文档扫描仪，由 opencv.js 提供支持，支持： Web、NodeJS、React 等环境。

jscanify 的典型特征包括：

纸张检测和突出显示带畸变校正的纸张扫描

目前 jscanify 在 Github 通过 MIT 协议开源，有超过 1k 的 star，是一个值得关注的前端开源项目。

如何使用 jscanify

首先导入相应的库：

$ npm i jscanify// 安装 jscanify 然后导入import jscanify from 'jscanify'

使用起来也非常简单：

const scanner = new jscanify();// image的onload触发后可以调用方法image.onload = function () { const highlightedCanvas = scanner.highlightPaper(image); document.body.appendChild(highlightedCanvas);};

以上 image 元素表示图片对象,即 <img src="/path/to/your/image.png" id="image" />。

当然，jscanify 还支持在用户相机中突出显示纸张。以下代码不断从用户的相机读取数据并突出显示纸张：

<video id="video"></video><canvas id="canvas"></canvas>// 原始视频<canvas id="result"></canvas>// 高亮后的视频

以下是利用 navigator.mediaDevices.getUserMedia 获取用户摄像头数据的示例：

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); };});

当然，开发者还可以通过利用 jsPDF 库和 toDataURL 函数来实现导出为 PDF 的目的。

download.addEventListener("click", function() { // jsPDF 只支持 jpeg var imgData = canvas.toDataURL("image/jpeg", 1.0); var pdf = new jsPDF(); pdf.addImage(imgData, 'JPEG', 0, 0); pdf.save("download.pdf");}, false);

更多关于 jscanify 的用法和示例可以参考文末资料，本文不再过多展开.

参考资料

https://github.com/ColonelParrot/jscanify

https://colonelparrot.github.io/jscanify/

https://stackoverflow.com/questions/23681325/convert-canvas-to-pdf