Implementing Electronic Signature, Image Merging, and Preview in Frontend using SignaturePad, html2canvas, and merge-images

This article describes a front‑end solution for electronic signatures, image composition, and preview functionality.

Business requirements include providing a PDF‑style document with a signature and a preview of the final result. The proposed approach uses CSS+HTML for document layout, keeps the signature as a base64 string, and merges the rendered document and signature into a single image.

Key libraries used are signature_pad for drawing signatures, html2canvas to convert HTML documents to canvas and then to base64, and merge-images to combine the two base64 images.

Implementation steps:

Create a <canvas id="signCanvas"> element and initialize SignaturePad with appropriate pen color.

Resize the canvas on mount to avoid offset issues using a resizeCanvas() method.

Convert the signature canvas to a base64 PNG via signatureExample.toDataURL('image/png') .

Capture the HTML document as a base64 image using html2canvas .

Optionally resize the signature image with a Promise‑based resizeImage function to achieve proper scaling.

Merge the document image and the (optionally resized) signature image with mergeImages , producing a final base64 preview that can be displayed directly.

Strip the leading data:image/png;base64, prefix before sending the signature data to the back‑end.

Sample code snippets for each step are provided, and screenshots illustrate the intermediate and final results.

The article concludes that the overall logic and code are presented, while further fine‑tuning may be required during integration.