uniapp签字版(签名)组件
演示效果
看代码自行修改canvas样式,宽度和高度
如果有bug,欢迎在评论区指出
sign-con.vue
<script setup>
import { reactive, onMounted, getCurrentInstance, ref } from "vue";
const _this = reactive({
loading: false,
});
let data = reactive({
ctx: null, //绘图图像
points: [], //路径点集合
path: "",
flag: false,
});
const instance = ref(null);
onMounted(() => {
instance.value = getCurrentInstance();
init();
});
function init() {
data.ctx = uni.createCanvasContext("signsss", instance.value);
data.ctx.lineWidth = 6;
data.ctx.lineCap = "round";
data.ctx.lineJoin = "round";
data.flag = false;
}
function touchstart(e) {
let startX = e.changedTouches[0].x;
let startY = e.changedTouches[0].y;
let startPoint = { X: startX, Y: startY };
data.points.push(startPoint);
data.ctx.beginPath();
}
function touchmove(e) {
let moveX = e.changedTouches[0].x;
let moveY = e.changedTouches[0].y;
let movePoint = { X: moveX, Y: moveY };
data.points.push(movePoint); //存点
let len = data.points.length;
if (len >= 2) {
draw(); //绘制路径
}
}
function touchend(e) {
data.points = [];
}
function touchcancel(e) {
touchend();
}
function draw() {
let point1 = data.points[0];
let point2 = data.points[1];
data.points.shift();
data.ctx.moveTo(point1.X, point1.Y);
data.ctx.lineTo(point2.X, point2.Y);
data.ctx.stroke();
data.ctx.draw(true);
data.flag = true;
}
function save() {
_this.loading = true;
uni.canvasToTempFilePath(
{
x: 0,
y: 0,
width: 320, // 画布得宽度,单位px
height: 566, // 画布得高度,单位px
canvasId: "signsss",
success: function (res) {
// res.tempFilePath 临时路径
console.log(123, res.tempFilePath);
// 获取到这个临时路径,就可以调用uniapp的上传api uni.uploadFile
// 转base64
uni.getFileSystemManager().readFile({
filePath: res.tempFilePath,
encoding: "base64",
success: (e) => {
let base64 = "data:image/png;base64," + e.data;
console.log(base64);
},
complete: function () {
_this.loading = false;
},
});
},
complete: function () {
_this.loading = false;
},
},
instance.value
);
}
//清空画布
function clear() {
uni.getSystemInfo({
success: function (res) {
let canvasw = res.windowWidth;
let canvash = res.windowHeight;
data.ctx.clearRect(0, 0, canvasw, canvash);
data.ctx.draw(false);
data.flag = false;
},
});
}
</script>
<template>
<view>
<view class="title">签名组件</view>
<view class="sign-content">
<canvas
style="width: 640rpx; height: 1136rpx"
canvas-id="signsss"
id="signsss"
class="signsss"
disable-scroll
:hidpi="false"
@touchstart="touchstart"
@touchmove="touchmove"
@touchend="touchend"
@touchcancel="touchcancel"
></canvas>
</view>
<view class="btns">
<button class="btn" @click="save" :loading="_this.loading">保存</button>
<button class="btn" @click="clear">重置</button>
</view>
</view>
</template>
<style lang="scss" scoped>
.title {
padding: 40rpx 0;
text-align: center;
}
.sign-content {
border: 2rpx solid red;
width: 640rpx;
margin: 0 auto;
height: 1136rpx;
}
.btns {
display: flex;
align-items: center;
justify-content: center;
margin-top: 40rpx;
}
.btn {
width: 300rpx;
height: 80rpx;
margin: 0 10rpx;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
</style>