<template>
<view class="x-modal">
<view class="x-m-con">
<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
</view>
<view class="x-m-title">
<view class="xm-t-clear" @click="clear">
<text>清除</text>
</view>
<view class="xm-t-sure" @click="confirm">
<text>确定</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
configUrl: '', //七牛云地址
showAutograph: false, //签名弹框是否显示
ctx: '', //绘图图像
points: [], //路径点集合
signature: ''
}
},
mounted () {
this.autograph()
},
methods: {
//创建并显示签名画布
autograph() {
this.showAutograph = true;
//创建绘图对象
this.ctx = uni.createCanvasContext("mycanvas", this);
//设置画笔样式
this.ctx.lineWidth = 4;
this.ctx.lineCap = "round"
this.ctx.lineJoin = "round"
},
//触摸开始，获取到起点
touchstart(e) {
let startX = e.changedTouches[0].x;
let startY = e.changedTouches[0].y;
let startPoint = {
X: startX,
Y: startY
};
this.points.push(startPoint);
//每次触摸开始，开启新的路径
this.ctx.beginPath();
},
//触摸移动，获取到路径点
touchmove(e) {
let moveX = e.changedTouches[0].x;
let moveY = e.changedTouches[0].y;
let movePoint = {
X: moveX,
Y: moveY
};
this.points.push(movePoint); //存点
let len = this.points.length;
if (len >= 2) {
this.draw(); //绘制路径
}
},
// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
touchend() {
this.points = [];
},
/* ***********************************************
# 绘制笔迹
# 1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
# 2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
# 3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
************************************************ */
draw() {
let point1 = this.points[0]
let point2 = this.points[1]
this.points.shift()
this.ctx.moveTo(point1.X, point1.Y)
this.ctx.lineTo(point2.X, point2.Y)
this.ctx.stroke()
this.ctx.draw(true)
},
//清空画布
clear() {
let that = this;
uni.getSystemInfo({
success: function(res) {
let canvasw = res.windowWidth;
let canvash = res.windowHeight;
that.ctx.clearRect(0, 0, canvasw, canvash);
that.ctx.draw(true);
},
})
},
//关闭并清空画布
cancel() {
this.showAutograph = false;
this.clear();
},
//完成绘画并保存到本地
confirm() {
let that = this;
let token = uni.getStorageSync('token')
uni.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function(res) {
//图片格式为base64，如果不是可上传七牛云，之后请求签名接口即可
uni.uploadFile({
url: that.$myurlsst.IMG_URL,
file: that.base64ToBlob(res.tempFilePath) ,
name: 'file',
header: {
"token": token
},
datatype: 'json',
success: (res) => {
var newimgUrl = JSON.parse(res.data) == ''?'':JSON.parse(res.data)
if (newimgUrl.code == '401'){
uni.reLaunch({
url: "/pages/signUp/signUp"
})
} else {
var newurls = newimgUrl.data
console.log(newurls)
}
},
});
}
})
},
// base64转png
base64ToBlob(urlData) {
let arr = urlData.split(',');
let mime = arr[0].match(/:(.*?);/)[1] || "image/png";
// 去掉url的头，并转化为byte
let bytes = window.atob(arr[1]);
// 处理异常,将ascii码小于0的转换为大于0
let ab = new ArrayBuffer(bytes.length);
// 生成视图（直接针对内存）：8位无符号整数，长度1个字节
let ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {
type: mime
});
}
}
}
</script>
样式使用less,可自行选择
<style lang="less">
@playcenter:{
display: flex;
align-items: center;
justify-content: center;
}
.x-modal {
width: 100%;
.x-m-title {
width: 100%;
height: 90rpx;
padding: 0 38rpx 0 31rpx;
box-sizing: border-box;
font-size: 29rpx;
color: #333333;
@playcenter();
justify-content: space-between;
.xm-t-clear {
font-size: 25rpx;
width: 120rpx;
height: 54rpx;
color: #999;
border: 1px solid #999;
border-radius: 20rpx;
@playcenter();
}
.xm-t-sure {
font-size: 25rpx;
width: 120rpx;
height: 54rpx;
color: #267DFF;
border: 1px solid #267DFF;
border-radius: 20rpx;
@playcenter();
}
}
.x-m-con {
width: 100%;
margin-top: 5rpx;
box-sizing: border-box;
border: 1px dashed #999;
.mycanvas{
width: 100%;
height: 300rpx;
}
}
}
</style>
