springboot+vue实现手写签名 生层代码

这是一个比较复杂的功能，需要前后端配合完成。以下是一个简单的示例代码，供参考：

后端(Spring Boot)：

1. 首先，需要引入相关依赖：

<dependency>
    <groupId>com.github.gcacace</groupId>
    <artifactId>java-signature-pad</artifactId>
    <version>2.2.0</version>
</dependency>

2. 然后，编写一个接口，接受前端传来的签名数据，并将其保存成图片：

@RestController
public class SignatureController {

    @PostMapping("/saveSignature")
    public String saveSignature(@RequestBody String signatureData) {
        try {
            // 解码签名数据
            String base64Image = signatureData.split(",")[1];
            byte[] decodedBytes = Base64.getDecoder().decode(base64Image);
            
            // 将签名保存成图片
            BufferedImage image = ImageIO.read(new ByteArrayInputStream(decodedBytes));
            File outputfile = new File("signature.png");
            ImageIO.write(image, "png", outputfile);
            
            return "success";
        } catch (IOException e) {
            e.printStackTrace();
            return "error";
        }
    }
    
}

前端(Vue)：

1. 首先，需要引入相关组件：

<template>
  <div>
    <SignaturePad v-model="signatureData" />
    <button @click="saveSignature">保存签名</button>
  </div>
</template>

<script>
import SignaturePad from 'vue-signature-pad';

export default {
  components: {
    SignaturePad,
  },
  data() {
    return {
      signatureData: '',
    };
  },
  methods: {
    saveSignature() {
      axios.post('/saveSignature', this.signatureData);
    },
  },
};
</script>

2. 然后，使用 SignaturePad 组件来进行手写签名：

<template>
  <div>
    <SignaturePad v-model="signatureData" />
    <button @click="saveSignature">保存签名</button>
  </div>
</template>