HTMLnd JavaScript를 사용하여 문서를 감지하고 PDF에 저장하는 방법-JS 튜토리얼-php.cn

HTMLnd JavaScript를 사용하여 문서를 감지하고 PDF에 저장하는 방법

Linda Hamilton

풀어 주다： 2024-12-19 11:30:12

원래의

275명이 탐색했습니다.

영수증, 송장, 계약서 등의 문서를 PDF 파일로 캡처하고 저장하는 것은 많은 기업의 공통 요구 사항입니다. 이 기사에서는 문서를 감지하고 PDF로 저장하는 기능을 추가하여 Dynamsoft Document Viewer로 구축된 웹 문서 편집기 프로젝트를 향상시킵니다. 문서 감지 기능은 Dynamsoft Capture Vision을 통해 구동됩니다.

데모 비디오: 문서를 감지하고 PDF로 저장

온라인 데모

https://yushulx.me/web-document-annotation/

전제 조건

Dynamsoft Capture Vision 평가판 라이선스: Dynamsoft 제품의 모든 기능을 활용하려면 30일 무료 평가판 라이선스를 받으세요.
Dynamsoft Document Viewer: 이 JavaScript SDK를 사용하면 PDF, JPEG, PNG, 를 원활하게 볼 수 있습니다. TIFF 및 BMP 파일. 또한 PDF 주석 렌더링 및 저장 기능도 있습니다. 여기에서 다운로드하세요: https://www.npmjs.com/package/dynamsoft-document-viewer.
Dynamsoft Capture Vision 번들: 이 JavaScript SDK는 문서 감지, 자르기 및 이미지 향상 기능을 제공합니다. 여기에서 다운로드하세요: https://www.npmjs.com/package/dynamsoft-capture-vision-bundle.

HTML5 및 JavaScript에서 문서 감지 및 수정 기능 구현

다음 섹션에서는 HTML5 및 JavaScript를 사용하여 문서 감지 및 수정 기능을 구현하는 방법을 안내합니다. 이미 소스코드를 다운로드하셨다면 2단계로 건너뛰셔도 됩니다.

1단계: 소스 코드 얻기

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에서 프로젝트를 엽니다.

2단계: 문서 감지 버튼 추가

main.css에서 문서 감지 버튼에 대한 머티리얼 아이콘을 추가하세요.

.icon-document_scanner::before {
    content: "crop_free";
}

.icon-document_scanner {
    display: flex;
    font-size: 1.5em;
}

로그인 후 복사

How to Detect and Save Documents to PDF with HTMLnd JavaScript

문서 감지 버튼을 정의하고 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() {
    ...
}
```
로그인 후 복사

3단계: 문서 감지 및 정규화를 위한 팝업 대화 상자 만들기

문서 감지 및 정규화를 위한 팝업 대화 상자에는 감지, 정규화, 취소

의 세 가지 버튼이 있습니다.

감지: 문서 경계를 감지합니다.
Normalize: 문서를 표준화합니다.
취소: 대화 상자를 닫습니다.

HTML 코드

git clone https://github.com/yushulx/web-twain-document-scan-management.git

로그인 후 복사

4단계: 문서 모서리 점 편집 및 문서 수정

편집 뷰어에서 문서를 감지하고 네 모서리 점을 기준으로 윤곽선을 그립니다.
```
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;
}

로그인 후 복사

How to Detect and Save Documents to PDF with HTMLnd JavaScript

소스 코드

https://github.com/yushulx/web-twain-document-scan-management/tree/main/examples/document_annotation

위 내용은 HTMLnd JavaScript를 사용하여 문서를 감지하고 PDF에 저장하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!