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

什么是 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