基于canvas实现的签名组件
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
const imgUrl = ref('');
const canvas = ref();
let ctx: CanvasRenderingContext2D;
let painting = false;
const getOffset = (event: MouseEvent | TouchEvent) => {
let offset: [number, number];
if ((event as MouseEvent).offsetX) {
const { offsetX, offsetY } = event as MouseEvent;
offset = [offsetX, offsetY];
} else {
const { top, left } = canvas.value.getBoundingClientRect();
const offsetX = (event as TouchEvent).touches[0].clientX - left;
const offsetY = (event as TouchEvent).touches[0].clientY - top;
offset = [offsetX, offsetY];
}
return offset;
};
let startX = 0,
startY = 0;
const onEventStart = (event: MouseEvent | TouchEvent) => {
[startX, startY] = getOffset(event);
painting = true;
};
const onEventMove = (event: MouseEvent | TouchEvent) => {
if (painting) {
const [endX, endY] = getOffset(event);
paint(startX, startY, endX, endY, ctx);
startX = endX;
startY = endY;
}
};
const onEventEnd = () => {
if (painting) {
painting = false;
}
};
onMounted(() => {
ctx = canvas.value.getContext('2d') as CanvasRenderingContext2D;
});
const handleToFile = async () => {
if (isCanvasBlank(canvas.value)) {
message.warning('当前签名文件为空');
return;
}
const file = dataURLtoFile(canvas.value.toDataURL(), '签名.png');
if (!file) return;
handleClearSign();
};
const handleClearSign = () => {
ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
};
const isCanvasBlank = (canvas: HTMLCanvasElement) => {
const blank = document.createElement('canvas');
blank.width = canvas.width;
blank.height = canvas.height;
return canvas.toDataURL() == blank.toDataURL();
};
const handleSaveImg = () => {
if (isCanvasBlank(canvas.value)) {
message.warning('当前签名文件为空');
return;
}
const el = document.createElement('a');
el.href = canvas.value.toDataURL();
el.download = '签名';
const event = new MouseEvent('click');
el.dispatchEvent(event);
};
const dataURLtoFile = (dataurl: string, filename: string) => {
const arr: string[] = dataurl.split(',');
if (!arr.length) return;
const mime = arr[0].match(/:(.*?);/);
if (mime) {
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime[1] });
}
};
function paint(
startX: number,
startY: number,
endX: number,
endY: number,
ctx: CanvasRenderingContext2D,
) {
ctx.beginPath();
ctx.globalAlpha = 1;
ctx.lineWidth = 2;
ctx.strokeStyle = '#000';
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.closePath();
ctx.stroke();
}
function eraser(
startX: number,
startY: number,
endX: number,
endY: number,
ctx: CanvasRenderingContext2D,
size: number,
shape: 'rect' | 'circle',
) {
ctx.beginPath();
ctx.globalAlpha = 1;
switch (shape) {
case 'rect':
ctx.lineWidth = size;
ctx.strokeStyle = '#fff';
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.closePath();
ctx.stroke();
break;
case 'circle':
ctx.fillStyle = '#fff';
ctx.arc(startX, startY, size, 0, 2 * Math.PI);
ctx.fill();
break;
}
}
</script>
<template>
<div class="canvas-dom">
<h3>基于canvas实现的签名组件</h3>
<header>
<a-button type="primary" @click="handleSaveImg">保存为图片</a-button>
<a-button @click="handleToFile"> 保存到后端 </a-button>
<a-button @click="handleClearSign"> 清空签名 </a-button>
</header>
<canvas
ref="canvas"
height="200"
width="500"
@mousedown="onEventStart"
@mousemove.stop.prevent="onEventMove"
@mouseup="onEventEnd"
@touchstart="onEventStart"
@touchmove.stop.prevent="onEventMove"
@touchend="onEventEnd"
>
</canvas>
<!-- <img v-if="imgUrl" :src="imgUrl" alt="签名" /> -->
</div>
</template>
<style scoped lang="scss">
.canvas-dom {
width: 100%;
height: 100%;
padding: 0 20px;
background-color: #fff;
canvas {
border: 1px solid #e6e6e6;
}
header {
display: flex;
flex-flow: row nowrap;
align-items: center;
width: 100%;
margin: 8px;
.eraser-option {
display: flex;
label {
white-space: nowrap;
}
}
}
}
</style>