专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

前端H5实现一个电子签名功能并保存到SpringBoot后端应用中?

ins518 2024-12-15 13:54:12 技术文章 15 ℃ 0 评论

有这样一个需求，在前端实现一个电子签名的功能，然后将生成的电子签名保存到SpringBoot的后台应用中进行存储。下面我们就来看看如何实现这个需求。

前端实现电子签名功能

前端电子签名操作，我们可以通过引入相关的签名库来实现，例如我们可以使用signature_pad库来实现电子签名功能。可以使用CDN或者通过npm安装这个库，如下所示。

<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/2.3.2/signature_pad.min.js"></script>

可以创建一个HTML页面，在其中创建一个用于绘制签名的<canvas>元素和一个按钮，用于提交签名。如下所示。

<!DOCTYPE html>
<html>
<head>
    <title>电子签名</title>
</head>
<body>
    <canvas id="signature-pad" width="400" height="200" style="border: 1px solid #000000;"></canvas>
    <button id="clear">清除</button>
    <button id="save">保存</button>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/2.3.2/signature_pad.min.js"></script>
    <script>
        var canvas = document.getElementById('signature-pad');
        var signaturePad = new SignaturePad(canvas);
        
        document.getElementById('clear').addEventListener('click', function () {
            signaturePad.clear();
        });

        document.getElementById('save').addEventListener('click', function () {
            if (signaturePad.isEmpty()) {
                alert("请提供签名！");
            } else {
                var dataURL = signaturePad.toDataURL();
                fetch('/api/signature', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ signature: dataURL })
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Success:', data);
                })
                .catch((error) => {
                    console.error('Error:', error);
                });
            }
        });
    </script>
</body>
</html>

后端Spring Boot应用

创建一个SpringBoot项目，并且保证在这个项目中能够正常的进行RESTFul接口的调用，如下所示，来实现一个Controller控制器用来接收前端发送过来的签名信息并进行存储。

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import java.util.Base64;

@RestController
public class SignatureController {

    @PostMapping("/api/signature")
    public String saveSignature(@RequestBody SignatureRequest request) {
        String base64Signature = request.getSignature();
        byte[] decodedBytes = Base64.getDecoder().decode(base64Signature.split(",")[1]);
        
        // 你可以将decodedBytes保存到文件系统、数据库等
        // 在此示例中，我们将其保存到文件系统
        try {
            java.nio.file.Files.write(java.nio.file.Paths.get("signature.png"), decodedBytes);
        } catch (java.io.IOException e) {
            e.printStackTrace();
            return "{\"status\": \"error\"}";
        }

        return "{\"status\": \"success\"}";
    }

    public static class SignatureRequest {
        private String signature;

        public String getSignature() {
            return signature;
        }

        public void setSignature(String signature) {
            this.signature = signature;
        }
    }
}

在上面的实现中，我们将签名的信息存储到一个文件系统中，当然我们也可以通过对象存储将相关的文件存储到对象存储中或者是数据库中。

测试流程

我们在浏览器中打开页面，并且在canvas中绘制签名信息，然后点击保存按钮，这个时候，就会向后端发送签名数据并且后端将数据保存成一个PNG的图片文件，在后续过程中进行使用。

通过上面的步骤我们就可以实现一个前端签名，后端保存的操作。在实际操作的过程中，我们还可以对文件存储操作进行优化或者是对签名操作进行优化来保证应用程序更加符合用户的签名习惯，提高用户体验。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表