vue3Canvas签字板组件封装

效果如下&＃xff1a;

使用

<he-sigin width&＃61;"800" height&＃61;"500"></he-sigin>


具体实现&＃xff1a;

<template><div id&＃61;"signatureBox" &＃64;touchmove.prevent><canvasref&＃61;"myCanvas"id&＃61;"canvas":width&＃61;"width":height&＃61;"height"&＃64;mousedown&＃61;"canvasDown($event)"&＃64;mousemove&＃61;"canvasMove($event)"&＃64;mouseup&＃61;"canvasUp()"&＃64;mouseleave&＃61;"canvasLeave()">抱歉&＃xff0c;您的浏览器不支持canvas元素canvas><span class&＃61;"mt-a" &＃64;click&＃61;"clear">清除span><span class&＃61;"mt-b" &＃64;click&＃61;"ok">确认span>div><div &＃64;click&＃61;"save" v-if&＃61;"imgSrc" class&＃61;"save">保存图片div>
template>


import { ref, reactive, toRefs, onMounted } from "vue";
export default {props: {width: { type: String, default: "500" },height: { type: String, default: "300" },},setup() {const myCanvas &＃61; ref(null);const data &＃61; reactive({ctx: null,canvasMoveUse: false,imgSrc: "",});const clear &＃61; () &＃61;> {data.ctx.clearRect(0, 0, data.ctx.canvas.width, data.ctx.canvas.height);data.imgSrc &＃61; "";};const ok &＃61; () &＃61;> {var base64Img &＃61; myCanvas.value.toDataURL("image/jpg");data.imgSrc &＃61; base64Img;};const save &＃61; () &＃61;> {var oA &＃61; document.createElement("a");oA.download &＃61; ""; // 设置下载的文件名&＃xff0c;默认是&＃39;下载&＃39;oA.href &＃61; data.imgSrc;document.body.appendChild(oA);oA.click();oA.remove(); // 下载之后把创建的元素删除data.imgSrc &＃61; "";};const canvasDown &＃61; (e) &＃61;> {data.canvasMoveUse &＃61; true;const canvasX &＃61; e.offsetX;const canvasY &＃61; e.offsetY;data.ctx.beginPath(); // 移动的起点data.ctx.moveTo(canvasX, canvasY);};const canvasMove &＃61; (e) &＃61;> {if (data.canvasMoveUse) {let canvasX;let canvasY;canvasX &＃61; e.offsetX;canvasY &＃61; e.offsetY;data.ctx.lineTo(canvasX, canvasY);data.ctx.stroke();}};const canvasUp &＃61; () &＃61;> {data.canvasMoveUse &＃61; false;};const canvasLeave &＃61; () &＃61;> {data.canvasMoveUse &＃61; false;};onMounted(() &＃61;> {data.ctx &＃61; myCanvas.value.getContext("2d");data.ctx.lineWidth &＃61; 5;});return {...toRefs(data),myCanvas,clear,ok,save,canvasDown,canvasMove,canvasUp,canvasLeave,};},
};


* {touch-action: pan-y;
}
#signatureBox {z-index: 9999;background: #f2f3f7;position: relative;
}
#canvas {display: block;margin: 0 auto;background: #fff;cursor: default;
}
.mt-a {position: absolute;left: 5%;top: 40%;font-size: 50px;cursor: pointer;
}
.mt-b {position: absolute;right: 5%;top: 40%;cursor: pointer;font-size: 50px;
}
.save {font-size: 28px;text-align: center;line-height: 40px;cursor: pointer;color: red;
}
#canvas{border:1px solid #ccc;border-radius: 20px;
}