canvas绘制签名并保存

实现签名的三个关键方法：

1.mousedown：当鼠标按下时开始绘制签名。

2.mousemove：鼠标移动时持续绘制。

3.mouseup：鼠标抬起时结束绘制。

html：

<div class="setSign"><canvasref="canvas"@mousedown="startDrawing"@mousemove="draw"@mouseup="stopDrawing"></canvas>
</div>
<div class="btns"><el-button @click="handleClose">取 消</el-button><el-button type="danger" @click="clearCanvas">清 空</el-button><el-button type="primary" @click="saveSignature">保 存</el-button>
</div>

js：

import { getSignNew, saveSignNew } from "@/api/common";
export default {mixins: [],components: {},props: {},
data() {return {isDrawing: false,canvas: null,context: null,savedImage: null,queryObj: {},};
},created() {},mounted() {this.queryObj = this.$common.convertKeys(this.$route.query);getSignNew(this.queryObj).then((data) => {// 请求到签名的base64格式，如果是存在后端的图片那么需要自己转为base64if (data && data.data.flag && data.data.datas.length > 0) {this.savedImage = data.data.datas[0]["BASE64IMG"];var bgImg = new Image();bgImg.src = this.savedImage;bgImg.onload = () => {this.$nextTick(() => {// 获取容器的宽高let box = document.querySelector(".setSign");let w = box.clientWidth;let h = box.clientHeight;// 给容器设置paddinglet padding = 20;this.canvas = this.$refs.canvas;this.canvas.height = h - padding; //获取画布的高度this.canvas.width = w - padding; //获取画布的宽度this.context = this.canvas.getContext("2d");this.context.drawImage(bgImg, 0, 0);this.context.lineWidth = 3; //设置线条宽度this.context.strokeStyle = "#000"; //字体颜色});};}}).catch((err) => {this.$message.error("获取签名图片失败");});},methods: {startDrawing() {this.isDrawing = true;const rect = this.canvas.getBoundingClientRect();this.context.beginPath();this.context.moveTo(event.clientX - rect.left, event.clientY - rect.top);},draw() {if (!this.isDrawing) return;const rect = this.canvas.getBoundingClientRect();this.context.lineTo(event.clientX - rect.left, event.clientY - rect.top);this.context.stroke();},stopDrawing() {this.isDrawing = false;},// 清空画布clearCanvas() {this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);this.savedImage = null;},// 保存签名saveSignature() {// 获取图片的base64this.savedImage = this.canvas.toDataURL();let submitObj = {base64img: this.savedImage,...this.queryObj,};saveSignNew(submitObj).then((data) => {if (data && data.data.flag) {this.$message.success("保存成功");}});},},
};
</script>

效果图：