전자 서명은 개인이 전자적으로 문서에 서명할 수 있는 자필 서명의 디지털 형식입니다. 이는 기업과 조직이 서명 프로세스를 간소화하는 데 필수적인 도구가 되어 전 세계 어디에서나 단 몇 번의 클릭만으로 문서에 서명할 수 있게 되었습니다. 이 기사에서는 HTML5, JavaScript 및 Dynamsoft Document Viewer를 사용하여 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 Document Viewer로 구축된 당사의 웹 문서 주석 프로젝트는 확장성이 뛰어납니다. 현재 PDF 문서에 대한 바코드 감지가 포함되어 있습니다. 다음 섹션에서는 PDF 문서에 전자 서명을 추가하는 과정을 단계별로 안내합니다.
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-stylus::before {
content: "edit";
}
.icon-stylus {
display: flex;
font-size: 1.5em;
}
서명 버튼을 정의하고 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,
],
};
서명 버튼에 대한 클릭 이벤트 핸들러를 추가합니다.
editViewer.on("sign", sign);
function sign() {
...
}
서명 입력 팝업 대화 상자에는 다음 요소가 포함됩니다.
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() {
...
}
PDF 문서에 서명을 삽입하려면:
캔버스를 블롭으로 변환:
<div>
<p><img src="https://img.php.cn/upload/article/000/000/000/173421499729336.jpg" 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;
현재 페이지 ID 및 페이지 데이터 가져오기:
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);
서명 이미지로 새 스탬프 주석 만들기:
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
위 내용은 HTMLnd JavaScript를 사용하여 PDF 문서에 서명을 삽입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
