uniapp vue3 canvas实现手写签名

userSign.vue

<template><view class="signature"><view class="btn-box" v-if="orientation === 'abeam'"><button @click="clearClick">重签</button><button @click="finish">完成签名</button></view><canvas id="canvas" canvas-id="canvas" :disable-scroll="true" @touchmove="move" @touchstart="start" @error="error"@touchend="touchend" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas><view class="btn-box" v-if="orientation === 'portrait'"><button type="warn" @click="clearClick">重签</button><button type="primary" @click="finish">完成签名</button></view></view>
</template><script setup>import {ref,onMounted,getCurrentInstance} from 'vue'const props = defineProps({// 分享orientation: {type: String,default: "portrait", // 竖向},width: {type: Number,default: 0,},height: {type: Number,default: 0,},// 字体粗细lineWidth: {type: Number,default: 3,},// 字体颜色strokeStyle: {type: String,default: "black",},});const emit = defineEmits(["finish", "clear"]);const instance = getCurrentInstance().proxy;const ctx = ref("");const pr = ref(0);const canvasWidth = ref("");const canvasHeight = ref("");const points = ref([]);onMounted(() => {getSystemInfo();createCanvas();});// 触摸开始const start = (e) => {points.value.push({X: e.touches[0].x,Y: e.touches[0].y});ctx.value.beginPath();};// 开始移动const move = (e) => {points.value.push({X: e.touches[0].x,Y: e.touches[0].y}); //存点draw(); //绘制路径};const touchend = () => {points.value = [];};const draw = () => {const point1 = points.value[0];const point2 = points.value[1];points.value.shift();ctx.value.moveTo(point1.X, point1.Y);ctx.value.lineTo(point2.X, point2.Y);ctx.value.stroke();ctx.value.draw(true);};const createCanvas = () => {ctx.value = uni.createCanvasContext("canvas", instance, {willReadFrequently: true,});ctx.value.lineGap = "round";ctx.value.lineJoin = "round";ctx.value.lineWidth = props.lineWidth; // 字体粗细ctx.value.strokeStyle = props.strokeStyle; // 字体颜色};const canvasW = ref(300);const canvasH = ref(300);// 获取系统信息const getSystemInfo = () => {uni.getSystemInfo({success: (res) => {pr.value = res.pixelRatio;if (props.orientation == "portrait") {if (props.width > res.windowWidth || props.width == 0) {canvasWidth.value = res.windowWidth;} else {canvasWidth.value = props.width;}if (props.height > res.windowHeight - 70 || props.height == 0) {canvasHeight.value = res.windowHeight - 70;} else {canvasHeight.value = props.height;}} else if (props.orientation == "abeam") {if (props.width > res.windowWidth - 70 || props.width == 0) {canvasWidth.value = res.windowWidth - 70;} else {canvasWidth.value = props.width;}if (props.height > res.windowHeight || props.height == 0) {canvasHeight.value = res.windowHeight;} else {canvasHeight.value = props.height;}}// 我写死的canvasHeight.value = 300;const rate = canvasHeight.value / canvasWidth.value;canvasW.value = 300;canvasH.value = 300 / rate;},});};// canvas 的errorconst error = (e) => {console.log("画出错了" + e);};// 重签const clearClick = () => {ctx.value.clearRect(0, 0, canvasWidth.value, canvasHeight.value);ctx.value.draw(true);emit("clear");};// 点击完成签名const finish = () => {uni.canvasToTempFilePath({canvasId: "canvas",success: (res) => {const path = res.tempFilePath;emit("finish", path);},});};// 如果想要base64格式const finish = () => {uni.canvasToTempFilePath({canvasId: "canvas",x: 0,y: 0,width: canvasWidth.value,height: canvasHeight.value,destWidth: canvasWidth.value * pr.value, // 乘以像素比保证高清destHeight: canvasHeight.value * pr.value,fileType: 'png',quality: 1, // 最高质量success: (res) => {// 通过文件系统读取 base64const base64 = uni.getFileSystemManager().readFileSync(res.tempFilePath, 'base64')console.log('base64=', `data:image/png;base64,${base64}`);emit('finish', `data:image/png;base64,${base64}`)},fail: (err) => {console.error('生成签名失败:', err)}}, instance);};defineExpose({clearClick,});
</script><style scoped lang="scss">canvas {background-color: white;}.signature {width: 100%;height: 100%;display: flex;flex-wrap: wrap;align-items: flex-end;// background-color: #e7e5e7 !important;}.btn-box {width: 100%;display: flex;text-align: center;padding: 20rpx 0;border-top: 1px solid #bbb;}
</style>

使用它

	.popup-title {text-align: center;font-weight: 500;font-weight: bold;padding: 40rpx 0;border-bottom: 1px solid #bbb;}<u-popup ref="popupRef" mode="center" title="考试签名" background-color="#fff"><view class="popup-title"><text>考试签名</text></view><view><userSign></userSign></view></u-popup>const popupRef = ref()// 签名弹出层const togglePopup = () => {console.log('悬浮球 - 弹框出答题卡');popupRef.value.open('center')}