将收据、发票和合同等文档捕获并保存为 PDF 文件是许多企业的常见要求。在本文中，我们通过添加检测文档并将其另存为 PDF 的功能来增强使用 Dynamsoft Document Viewer 构建的 Web 文档编辑器项目。文档检测功能由 Dynamsoft Capture Vision 提供支持。
https://yushulx.me/web-document-annotation/
Dynamsoft Capture Vision 试用许可证：获取 30 天免费试用许可证以解锁 Dynamsoft 产品的全部功能。
Dynamsoft 文档查看器：此 JavaScript SDK 可无缝查看 PDF、JPEG、PNG、 TIFF 和 BMP 文件。它还具有 PDF 注释渲染和保存功能。在这里下载：https://www.npmjs.com/package/dynamsoft-document-viewer。
Dynamsoft Capture Vision Bundle：此 JavaScript SDK 提供文档检测、裁剪和图像增强功能。在这里下载：https://www.npmjs.com/package/dynamsoft-capture-vision-bundle。
以下部分将指导您使用 HTML5 和 JavaScript 实现文档检测和纠正功能。如果您已经下载了源代码，可以跳至步骤2。
从 GitHub 存储库克隆源代码：
git clone https://github.com/yushulx/web-twain-document-scan-management.git
导航到 document_annotation 目录：
cd web-twain-document-scan-management/examples/document_annotation
在 Visual Studio Code 中打开项目。
在main.css中，为文档检测按钮添加材质图标：
.icon-document_scanner::before {
content: "crop_free";
}
.icon-document_scanner {
display: flex;
font-size: 1.5em;
}
定义文档检测按钮并将其添加到main.js中的工具栏：
const documentButton = {
type: Dynamsoft.DDV.Elements.Button,
className: "material-icons icon-document_scanner",
tooltip: "Detect document",
events: {
click: "detectDocument",
}
}
const pcEditViewerUiConfig = {
type: Dynamsoft.DDV.Elements.Layout,
flexDirection: "column",
className: "ddv-edit-viewer-desktop",
children: [
{
type: Dynamsoft.DDV.Elements.Layout,
className: "ddv-edit-viewer-header-desktop",
children: [
{
type: Dynamsoft.DDV.Elements.Layout,
children: [
Dynamsoft.DDV.Elements.ThumbnailSwitch,
Dynamsoft.DDV.Elements.Zoom,
Dynamsoft.DDV.Elements.FitMode,
Dynamsoft.DDV.Elements.Crop,
Dynamsoft.DDV.Elements.Filter,
Dynamsoft.DDV.Elements.Undo,
Dynamsoft.DDV.Elements.Redo,
Dynamsoft.DDV.Elements.DeleteCurrent,
Dynamsoft.DDV.Elements.DeleteAll,
Dynamsoft.DDV.Elements.Pan,
Dynamsoft.DDV.Elements.AnnotationSet,
qrButton,
checkButton,
scanButton,
clearButton,
signatureButton,
documentButton,
],
},
{
type: Dynamsoft.DDV.Elements.Layout,
children: [
{
type: Dynamsoft.DDV.Elements.Pagination,
className: "ddv-edit-viewer-pagination-desktop",
},
loadButton,
downloadButton,
],
},
],
},
Dynamsoft.DDV.Elements.MainView,
],
};
添加文档检测按钮的点击事件处理程序：
editViewer.on("detectDocument", detectDocument);
async function detectDocument() {
...
}
文档检测和标准化的弹出对话框包括三个按钮：检测、标准化和取消。
HTML 代码
git clone https://github.com/yushulx/web-twain-document-scan-management.git
检测文档并根据编辑查看器中的四个角点绘制轮廓：
cd web-twain-document-scan-management/examples/document_annotation
标准化文档图像：
.icon-document_scanner::before {
content: "crop_free";
}
.icon-document_scanner {
display: flex;
font-size: 1.5em;
}
https://github.com/yushulx/web-twain-document-scan-management/tree/main/examples/document_annotation
以上是如何使用 HTMLnd JavaScript 检测文档并将其保存为 PDF的详细内容。更多信息请关注PHP中文网其他相关文章！
