HTMLnd JavaScript를 사용하여 PDF 문서에 서명을 삽입하는 방법

전자 서명은 개인이 전자적으로 문서에 서명할 수 있는 자필 서명의 디지털 형식입니다. 이는 기업과 조직이 서명 프로세스를 간소화하는 데 필수적인 도구가 되어 전 세계 어디에서나 단 몇 번의 클릭만으로 문서에 서명할 수 있게 되었습니다. 이 기사에서는 HTML5, JavaScript 및 Dynamsoft Document Viewer를 사용하여 PDF 문서에 서명을 삽입하는 방법을 살펴보겠습니다.

데모 비디오: 전자 서명으로 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.

웹 PDF 편집기의 서명 기능 구현

Dynamsoft Document Viewer로 구축된 당사의 웹 문서 주석 프로젝트는 확장성이 뛰어납니다. 현재 PDF 문서에 대한 바코드 감지가 포함되어 있습니다. 다음 섹션에서는 PDF 문서에 전자 서명을 추가하는 과정을 단계별로 안내합니다.

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-stylus::before {
       content: "edit";
   }
   
   .icon-stylus {
       display: flex;
       font-size: 1.5em;
   }
   
   

   

2. 서명 버튼을 정의하고 main.js의 도구 모음에 추가하세요.
   

   const signatureButton = {
       type: Dynamsoft.DDV.Elements.Button,
       className: "material-icons icon-stylus",
       tooltip: "Sign the document",
       events: {
           click: "sign",
       }
   }
   
   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,
                       ],
                   },
                   {
                       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("sign", sign);
   
   function sign() {
       ...
   }
   

3단계: 서명 입력을 위한 팝업 대화 상자 만들기

서명 입력 팝업 대화 상자에는 다음 요소가 포함됩니다.

• 서명을 그리기 위한 캔버스 요소입니다.
• 시그니처 색상 변경을 위한 색상 옵션
• 시그니처 두께를 조정하는 획 슬라이더
• 서명 위치를 지정하기 위한 X 및 Y 좌표입니다.
• PDF 문서에 서명을 삽입하는 저장 버튼입니다.
• 대화상자를 닫는 취소 버튼입니다.
• 서명을 지울 수 있는 다시 그리기 버튼

HTML 코드

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

마우스 이벤트에 대한 이벤트 리스너 추가:

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

색상 및 획 옵션에 대한 이벤트 리스너 추가:

.icon-stylus::before {
    content: "edit";
}

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

그리기 기능 구현:

const signatureButton = {
    type: Dynamsoft.DDV.Elements.Button,
    className: "material-icons icon-stylus",
    tooltip: "Sign the document",
    events: {
        click: "sign",
    }
}

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,
                    ],
                },
                {
                    type: Dynamsoft.DDV.Elements.Layout,
                    children: [
                        {
                            type: Dynamsoft.DDV.Elements.Pagination,
                            className: "ddv-edit-viewer-pagination-desktop",
                        },
                        loadButton,
                        downloadButton,
                    ],
                },
            ],
        },
        Dynamsoft.DDV.Elements.MainView,
    ],
};

모든 경로는 DrawingHistory 배열에 저장됩니다. redrawCanvas 함수는 배열을 반복하고 캔버스에 경로를 다시 그립니다.

확인, 다시 그리기 및 취소 버튼에 대한 이벤트 리스너를 추가합니다.

editViewer.on("sign", sign);

function sign() {
    ...
}

4단계: 문서에 서명 삽입

PDF 문서에 서명을 삽입하려면:

1. 캔버스를 블롭으로 변환:
   

   <div>
   
   
   
   <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173421499729336.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How to Insert Signatures into PDF Documents with HTMLnd JavaScript"></p>
   
   <p><strong>JavaScript code for the signature input dialog</strong></p>
   
   <ol>
   <li>
   <p>Initialize the canvas and drawing context:<br>
   </p>
   <pre class="brush:php;toolbar:false">let canvas = document.getElementById("signatureCanvas");
   let ctx = canvas.getContext("2d");
   let isDrawing = false;
   let color = "black"; 
   let strokeWidth = 3;  
   let drawingHistory = []; 
   canvas.width = 500;
   canvas.height = 300;
   

2. 현재 페이지 ID 및 페이지 데이터 가져오기:
   

   canvas.addEventListener("mousedown", startDrawing);
   canvas.addEventListener("mousemove", draw);
   canvas.addEventListener("mouseup", stopDrawing);
   canvas.addEventListener("mouseout", stopDrawing);
   

3. 서명 이미지로 새 스탬프 주석 만들기:
   

   document.getElementById("blue").addEventListener("click", () => {
       color = "blue";
       redrawCanvas();
   });
   
   document.getElementById("red").addEventListener("click", () => {
       color = "red";
       redrawCanvas();
   });
   
   document.getElementById("black").addEventListener("click", () => {
       color = "black";
       redrawCanvas();
   });
   
   document.getElementById("strokeSlider").addEventListener("input", (e) => {
       strokeWidth = e.target.value;
       redrawCanvas();
   });
   

   

소스 코드

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