uniapp封装手写签名

组件代码 cat-signature

<template><view v-if="visibleSync" class="cat-signature" :class="{'visible':show}" @touchmove.stop.prevent="moveHandle"><view class="mask" @tap="close" /><view class="content"><canvas class='firstCanvas' :canvas-id="canvasId" @touchmove='move' @touchstart='start($event)'@touchend='end' @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error' /><view class="btns"><view class="btn" @tap="clear">清除</view><view class="btn" @tap="save">保存</view></view></view></view>
</template><script>var content = null;var touchs = [];var canvasw = 0;var canvash = 0;//获取系统信息uni.getSystemInfo({success: function(res) {canvasw = res.windowWidth;canvash = canvasw * 9 / 16;},})export default {name: 'cat-signature',props: {visible: {type: Boolean,default: false},canvasId: {type: String,default: 'firstCanvas'}},data() {return {show: false,visibleSync: false,signImage: '',hasDh: false,}},watch: {visible(val) {this.visibleSync = val;this.show = val;this.getInfo()}},created(options) {this.visibleSync = this.visiblethis.getInfo()setTimeout(() => {this.show = this.visible;}, 100)},methods: {getInfo() {//获得Canvas的上下文content = uni.createCanvasContext(this.canvasId, this)//设置线的颜色content.setStrokeStyle("#000")//设置线的宽度content.setLineWidth(5)//设置线两端端点样式更加圆润content.setLineCap('round')//设置两条线连接处更加圆润content.setLineJoin('round')},// close() {this.show = false;this.hasDh = false;this.$emit('close')},moveHandle() {},// 画布的触摸移动开始手势响应start(e) {let point = {x: e.touches[0].x,y: e.touches[0].y,}touchs.push(point);this.hasDh = true},// 画布的触摸移动手势响应move: function(e) {let point = {x: e.touches[0].x,y: e.touches[0].y}touchs.push(point)if (touchs.length >= 2) {this.draw(touchs)}},// 画布的触摸移动结束手势响应end: function(e) {//清空轨迹数组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) {let point1 = touchs[0]let point2 = touchs[1]// console.log(JSON.stringify(touchs))content.moveTo(point1.x, point1.y)content.lineTo(point2.x, point2.y)content.stroke()content.draw(true);touchs.shift()},//清除操作clear: function() {//清除画布content.clearRect(0, 0, canvasw, canvash)content.draw(true)// this.close()this.hasDh = false;this.$emit('clear')},save() {var that = this;if (!this.hasDh) {uni.showToast({title: '请先签字',icon: 'none'})return;}uni.showLoading({title: '生成中...',mask: true})setTimeout(() => {uni.canvasToTempFilePath({canvasId: this.canvasId,success: function(res) {that.signImage = res.tempFilePath;that.$emit('save', res.tempFilePath);uni.hideLoading()that.hasDh = false;that.show = false;},fail: function(err) {console.log(err)uni.hideLoading()}}, this)}, 100)}}}
</script><style lang="scss">.cat-signature.visible {visibility: visible}.cat-signature {display: block;position: fixed;top: 0;left: 0;right: 0;bottom: 0;overflow: hidden;z-index: 11;height: 100vh;visibility: hidden;.mask {display: block;opacity: 0;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .4);transition: opacity .3s;}.content {display: block;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;width: 94%;height: 60vh;background: #fff;border-radius: 8upx;box-shadow: 0px 3px 3px #333;// canvas.firstCanvas {background-color: #fff;width: 100%;height: 100%;}// canvas.btns {padding: 0 15px;height: 100upx;overflow: hidden;position: absolute;bottom: 10upx;left: 0;right: 0;margin: auto;display: flex;justify-content: space-between;.btn {width: 40%;text-align: center;font-size: 28upx;height: 60upx;line-height: 60upx;background-color: #999;color: #fff;border-radius: 6upx;}}}}.visible .mask {display: block;opacity: 1}
</style>

页面代码

<template><view class="content"><button type="primary" @tap="doss">点击签名</button><view class="imgs"><image class="img" :src="img" mode="widthFix"></image></view><catSignature canvasId="canvas1" @close="close" @save="save" :visible="isShow" /></view>
</template><script>import catSignature from "@/components/cat-signature/cat-signature.vue"export default {components: {catSignature},data() {return {img: '',isShow: false,}},onLoad() {},methods: {doss() {this.isShow = true;},close() {this.isShow = false;},save(val) {console.log(val);this.isShow = false;this.img = valconst result = this.uploadImg(val)//调用接口上传图片到服务器console.log(JSON.parse(result));},uploadImg(url) {//这个是上传到服务器的代码，可根据具体需求自行修改return new Promise((resolve, reject) => {console.log(this.$http.fsApiUrl + '/Image/UploadImg');let a = uni.uploadFile({url: this.$http.fsApiUrl + '/Image/UploadImg',filePath: url,name: 'file',success: (res) => {console.log(res);if (res.statusCode == 500) {this.imageList.splice(0, 1);this.onImageOversize()} else {setTimeout(() => {resolve(res.data);}, 1000);}}});})},}}
</script><style>.imgs {width: 500upx;height: 500upx;display: flex;margin: 0 auto;flex-wrap: wrap;}.imgs img {width: 100%;height: 100%;}
</style>