Merakam dan menyimpan dokumen, seperti resit, invois dan kontrak, kerana fail PDF adalah keperluan biasa untuk kebanyakan perniagaan. Dalam artikel ini, kami meningkatkan projek editor dokumen web kami yang dibina dengan Dynamsoft Document Viewer dengan menambahkan keupayaan untuk mengesan dan menyimpan dokumen sebagai PDF. Ciri pengesanan dokumen dikuasakan oleh Dynamsoft Capture Vision.

Video Demo: Kesan dan Simpan Dokumen ke PDF

Demo Dalam Talian

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

Prasyarat

• Lesen Percubaan Dynamsoft Capture Vision: Dapatkan lesen percubaan percuma selama 30 hari untuk membuka kunci keupayaan penuh Produk Dynamsoft.

• Dynamsoft Document Viewer: SDK JavaScript ini membolehkan paparan lancar PDF, JPEG, PNG, TIFF, dan Fail BMP. Ia juga menampilkan pemaparan dan penjimatan anotasi PDF. Muat turunnya di sini: https://www.npmjs.com/package/dynamsoft-document-viewer.

• Dynamsoft Capture Vision Bundle: SDK JavaScript ini menyediakan pengesanan dokumen, pemangkasan dan fungsi peningkatan imej. Muat turunnya di sini: https://www.npmjs.com/package/dynamsoft-capture-vision-bundle.

Melaksanakan Ciri Pengesanan dan Pembetulan Dokumen dalam HTML5 dan JavaScript

Bahagian berikut membimbing anda melalui pelaksanaan pengesanan dokumen dan fungsi pembetulan menggunakan HTML5 dan JavaScript. Jika anda telah memuat turun kod sumber, anda boleh melangkau ke Langkah 2.

Langkah 1: Dapatkan Kod Sumber

1. Klon kod sumber daripada repositori GitHub:
   

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

2. Navigasi ke direktori document_annotation:
   

   cd web-twain-document-scan-management/examples/document_annotation
   

3. Buka projek dalam Kod Visual Studio.

Langkah2: Tambah Butang Pengesanan Dokumen

1. Dalam main.css, tambahkan ikon bahan untuk butang pengesanan dokumen:
   

   .icon-document_scanner::before {
       content: "crop_free";
   }
   
   .icon-document_scanner {
       display: flex;
       font-size: 1.5em;
   }
   
   

   

2. Tentukan butang pengesanan dokumen dan tambahkannya pada bar alat dalam 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,
       ],
   };
   

3. Tambah pengendali acara klik untuk butang pengesanan dokumen:
   

   editViewer.on("detectDocument", detectDocument);
   
   async function detectDocument() {
       ...
   }
   

Langkah 3: Cipta Dialog Pop Timbul untuk Pengesanan dan Normalisasi Dokumen

Dialog pop timbul untuk pengesanan dan penormalan dokumen termasuk tiga butang: Kesan, Normalkan dan Batal.

• Kesan: Kesan sempadan dokumen.
• Normalkan: Normalkan dokumen.
• Batal: Tutup dialog.

Kod HTML

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

Langkah 4: Edit Mata Sudut Dokumen dan Perbetulkan Dokumen

1. Kesan dokumen dan lukis kontur berdasarkan empat titik sudut dalam pemapar edit:
   

   cd web-twain-document-scan-management/examples/document_annotation
   

2. Normalkan imej dokumen:
   

   .icon-document_scanner::before {
       content: "crop_free";
   }
   
   .icon-document_scanner {
       display: flex;
       font-size: 1.5em;
   }
   
   

   

Kod Sumber

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

Atas ialah kandungan terperinci Cara Mengesan dan Menyimpan Dokumen ke PDF dengan HTMLnd JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!