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 元素表示图片对象,即 。
当然，jscanify 还支持在用户相机中突出显示纸张。以下代码不断从用户的相机读取数据并突出显示纸张：
// 原始视频
// 高亮后的视频以下是利用
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