Cara Memasukkan Tandatangan ke dalam Dokumen PDF dengan HTMLnd JavaScript-tutorial js-php.cn

Tandatangan elektronik ialah bentuk digital tandatangan tulisan tangan yang membolehkan individu menandatangani dokumen secara elektronik. Ia telah menjadi alat penting untuk perniagaan dan organisasi untuk menyelaraskan proses menandatangani, membolehkan dokumen ditandatangani dengan hanya beberapa klik dari mana-mana sahaja di dunia. Dalam artikel ini, kami akan meneroka cara memasukkan tandatangan ke dalam dokumen PDF menggunakan HTML5, JavaScript dan Dynamsoft Document Viewer.

Video Demo: Tandatangani Dokumen PDF dengan Tandatangan Elektronik

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 turun pautan: https://www.npmjs.com/package/dynamsoft-document-viewer.

Melaksanakan Fungsi Tandatangan untuk Editor PDF Web

Projek anotasi dokumen web kami, dibina dengan Dynamsoft Document Viewer, sangat boleh dikembangkan. Ia pada masa ini termasuk pengesanan kod bar untuk dokumen PDF. Dalam bahagian berikut, kami akan membimbing anda melalui proses menambah tandatangan elektronik pada dokumen PDF langkah demi langkah.

Langkah 1: Dapatkan Kod Sumber

Klon kod sumber daripada repositori GitHub:
```
git clone https://github.com/yushulx/web-twain-document-scan-management.git
```
Salin selepas log masuk
Salin selepas log masuk
Navigasi ke direktori document_annotation:
```
cd web-twain-document-scan-management/examples/document_annotation
```
Salin selepas log masuk
Salin selepas log masuk
Buka projek dalam Kod Visual Studio.

Langkah 2: Tambah Butang Tandatangan

Dalam main.css, tambahkan ikon bahan untuk butang tandatangan:

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

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

Salin selepas log masuk

How to Insert Signatures into PDF Documents with HTMLnd JavaScript

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

Salin selepas log masuk

Tambah pengendali acara klik untuk butang tandatangan:
```
editViewer.on("sign", sign);

function sign() {
    ...
}
```
Salin selepas log masuk
Salin selepas log masuk

Langkah 3: Cipta Dialog Pop Timbul untuk Input Tandatangan

Dialog pop timbul untuk input tandatangan termasuk elemen berikut:

Elemen kanvas untuk melukis tandatangan.
Pilihan warna untuk menukar warna tandatangan.
Gelangsar lejang untuk melaraskan ketebalan tandatangan.
Koordinat X dan Y untuk meletakkan tandatangan.
Butang simpan untuk memasukkan tandatangan ke dalam dokumen PDF.
Butang batal untuk menutup dialog.
Butang lukis semula untuk memadamkan tandatangan.

Kod HTML

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

Salin selepas log masuk

Tambahkan pendengar acara untuk acara tetikus:

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

Salin selepas log masuk

Tambahkan pendengar acara untuk pilihan warna dan strok:

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

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

Salin selepas log masuk

Laksanakan fungsi lukisan:

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,
    ],
};

Salin selepas log masuk

Semua laluan disimpan dalam tatasusunan drawingHistory. Fungsi redrawCanvas berulang melalui tatasusunan dan melukis semula laluan pada kanvas.

Tambahkan pendengar acara untuk butang OK, Lukis Semula dan Batal:

editViewer.on("sign", sign);

function sign() {
    ...
}

Salin selepas log masuk

Langkah 4: Masukkan Tandatangan ke dalam Dokumen

Untuk memasukkan tandatangan ke dalam dokumen PDF:

Tukarkan kanvas kepada gumpalan:

<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;

Salin selepas log masuk

Dapatkan ID halaman semasa dan data halaman:

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

Salin selepas log masuk

Buat anotasi setem baharu dengan imej tandatangan:

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();
});

Salin selepas log masuk

How to Insert Signatures into PDF Documents with HTMLnd JavaScript

Kod Sumber

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

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