???, ??, ??? ?? ??? 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??: ?? ?? ??

1. GitHub ????? ?? ??? ?????.
   

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

2. document_annotation ????? ?????:
   

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

3. Visual Studio Code?? ????? ???.

2??: ?? ?? ?? ??

1. main.css?? ?? ?? ??? ?? ???? ???? ?????.
   

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

   

2. ?? ?? ??? ???? 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. ?? ?? ??? ?? ?? ??? ???? ?????.
   

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

3??: ?? ?? ? ???? ?? ?? ?? ?? ???

?? ?? ? ???? ?? ?? ?? ???? ??, ???, ??

? ? ?? ??? ????.

• ??: ?? ??? ?????.
• Normalize: ??? ??????.
• ??: ?? ??? ????.

HTML ??

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

4??: ?? ??? ? ?? ? ?? ??

1. ?? ???? ??? ???? ? ??? ?? ???? ???? ????.
   

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

2. ?? ??? ???:
   

   .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 ??? ????? ?? ?? ??? ?????!