uniapp通过canvas画布，签名保存，并上传到数据库
程序员文章站
2022-04-13 17:36:42
...
HTML：
<!-- 签名 -->
<view class="container" >
<view class="content-box">
<button class="button" @click="initCanvas" v-show="!showCanvas" size="mini" type="primary">点击签名</button>
<view v-show='showCanvas'>
<canvas class='mycanvas' canvas-id="mycanvas"
@touchmove='move' @touchstart='start($event)' @touchend='end'
@touchcancel='cancel' @longtap='tap' @error='error' disable-scroll='true'>
</canvas>
<view class="footer">
<button class="right" @click="clearClick" size="mini" type="primary">清除</button>
<button class="close" @click="close" size="mini" type="primary">关闭</button>
</view>
</view>
</view>
</view>
<!-- 提交按钮 -->
<view style="margin-top:38upx;">
<button type="primary" @click="submit">提交</button>
</view>
script：
<script>
import axios from 'axios';
import utils from '../../common/utils.js';
// 画布
var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;
var _that;
// 获取系统信息
uni.getSystemInfo({
success: function(res) {
canvasw = res.windowWidth;
canvash = res.windowHeight;
},
});
export default {
data() {
return {
bookList: [], //告知书文本信息
username: '',
title:'',
title_id:'',
url_id:'', //告知书id
//填入的数据
answers:[],
answerInputItem:[],
answerCheckItem:[],
//画布
showCanvas:false,
signImage: '',
isEnd: false ,// 是否签名
}
},
onLoad() {
// 获得Canvas的上下文
content = wx.createCanvasContext('mycanvas')
// 设置线的颜色
content.setStrokeStyle("#000")
// 设置线的宽度
content.setLineWidth(5)
// 设置线两端端点样式更加圆润
content.setLineCap('round')
// 设置两条线连接处更加圆润
content.setLineJoin('round')
},
methods: {
//点击“提交”按钮
submit:function(){
//提交签名
var _this = this;
if (this.isEnd) {
uni.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function(res) {
// base64转blob
var blob = _that.dataURItoBlob(res.tempFilePath);
//提交签名
const axios = require('axios');
let data = new FormData();
data.append('type',parseInt(_this.url_id));
data.append('title',_this.title_id);
data.append('signature',res.tempFilePath);
data.append('id_card','444444202009090000');
data.append('signature_time','2020-09-09 12:00:00');
data.append('create_user',201621177059);
axios.post(utils.baseUrl + 'archive/SignatureView/',data).then(function(response) {
if(response.data.code == 200){
uni.showToast({
title: '提交成功',
duration: 1500,
mask: true
})
// console.log('提交成功')
}else{
console.log(response.data)
uni.showToast({
title: '提交失败，请重试',
icon: "none",
duration: 1500,
mask: true
})
}
})
// 打印图片路径
// console.log(res.tempFilePath) //base64
console.log('完成签名')
// 设置图片
_that.signImage = res.tempFilePath
}
})
} else {
uni.showToast({
title: '请先完成签名',
icon: "none",
duration: 1500,
mask: true
})
}
},
// base64 to blob二进制
dataURItoBlob: function(dataURI){
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // mime类型
var byteString = atob(dataURI.split(',')[1]); //base64 解码
var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
var intArray = new Uint8Array(arrayBuffer); //创建视图
for (var i = 0; i < byteString.length; i++) {
intArray[i] = byteString.charCodeAt(i);
}
return new Blob([intArray], {type: mimeString});
},
// blob二进制 to base64
blobToDataURI: function(blob, callback){
var reader = new FileReader();
reader.onload = function (e) {
callback(e.target.result);
}
reader.readAsDataURL(blob);
},
// 显示画布
initCanvas:function() {
this.showCanvas = true;
},
// 关闭画布
close:function() {
this.showCanvas = false;
content.clearRect(0, 0, canvasw, canvash)
content.draw(true)
},
// 画布的触摸移动开始手势响应
start: function(event) {
// console.log(event)
// console.log("触摸开始" + event.changedTouches[0].x)
// console.log("触摸开始" + event.changedTouches[0].y)
// 获取触摸开始的 x,y
let point = {
x: event.changedTouches[0].x,
y: event.changedTouches[0].y
}
// console.log(point)
touchs.push(point);
},
// 画布的触摸移动手势响应
move: function(e) {
let point = {
x: e.touches[0].x,
y: e.touches[0].y
}
// console.log(point)
touchs.push(point)
if (touchs.length >= 2) {
this.draw(touchs)
}
},
// 画布的触摸移动结束手势响应
end: function(e) {
console.log("触摸结束" + e)
// 设置为已经签名
this.isEnd = true
// 清空轨迹数组
for (let i = 0; i < touchs.length; i++) {
touchs.pop()
}
},
// 画布的触摸取消响应
cancel: function(e) {
console.log("触摸取消" + e)
},
// 画布的长按手势响应
tap: function(e) {
console.log("长按手势" + e)
},
error: function(e) {
console.log("画布触摸错误" + e)
},
// 绘制
draw: function(touchs) {
// console.log(touchs[0],touchs[1])
let point1 = touchs[0]
let point2 = touchs[1]
touchs.shift()
content.moveTo(point1.x, point1.y)
content.lineTo(point2.x, point2.y)
content.stroke()
content.draw(true)
},
// 清除操作
clearClick: function() {
// 设置为未签名
this.isEnd = false
// 清除画布
content.clearRect(0, 0, canvasw, canvash)
content.draw(true)
},
}
})
style:
/* 画布 */
.button{
display: table;
background-color: #149615;
}
.mycanvas{
box-shadow: inset 0 0 10px black;
width: 100%;
margin: 0.5rem 0;
}
.left{
background-color: #14b50e;
}
.right{
background-color: #da0606
}
.close{
background-color: #447b73;
}
.footer{
display: flex;
}