小程序实现手写签名功能

"pageOrientation":"landscape"

                                        重签             完成签名      

page {         background-color: #f2f2f2;     }     canvas {         background-color: #fff;         width: calc(100% - 20px);         height: calc(100% - 70px);         margin: 10px;         position: absolute;     }     .btnBox {         display: flex;         height: 50px;         width: 100%;         position: fixed;         left: 0;         bottom: 0;     }     .btnBox view {         width: 50%;         text-align: center;         height: 50px;         line-height: 50px;         color: #FFFFFF;     }     .btnBox view:active {         background-color: #CCCCCC;         color: #333333;     }     .btn1{         background-color: #FF8F58;     }     .btn2{         background-color: #0599D7;     }

var content = null; var touchs = []; var canvasw = 0; var canvash = 0; var _that; export default {     data() {         return {             isEnd: false, // 是否签名             srcA: ''         }     },     methods: {         overSign: function() {             if (this.isEnd) {                 let that = this                 uni.canvasToTempFilePath({                     canvasId: 'firstCanvas',                     fileType: 'png',                     success: function(res) {                         //打印图片路径                         console.log(res.tempFilePath)                         console.log('完成签名')                         // 可以再次进行直接保存图片到本地，这个保存就不写了可参考之前的canvas图片保存到本地                         // 一般签名都是要返回前一页进行提交，所以在此将图片写到微信内部文件（不会出现在手机相册中）返回上一页获取，在上一页提交后在将图片删除                         let fsm = uni.getFileSystemManager();                         fsm.readFile({                             filePath: res.tempFilePath,                             success: function(res) {                                 //转换成功                                 var arrayBuffer = res.data                                 fsm.writeFile({                                     filePath: `${wx.env.USER_DATA_PATH}/autograph.png-600`,                                     data: arrayBuffer,                                     encoding: 'binary',                                     success() {                                         console.log('写入成功')                                         uni.navigateBack()                                     },                                     fail(err) {                                         console.log(err)                                     },                                 });                             },                             fail: function(e) {}                         })                     }                 })             } else {                 uni.showToast({                     title: '请先完成签名',                     icon: "none",                     duration: 1500,                     mask: 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 

// 获取本地保存的图片 getImg() {         var timestamp = new Date().getTime();         uni.getImageInfo({             src: `${wx.env.USER_DATA_PATH}/autograph.png-600`,             success: function(res) {                 console.log(res.path)                 _that.srcA = res.path                 hasQM = true             },             fail: function(err) {                 console.log(err)                 _that.srcA = ''             },         })     },     //删除缓存的图片     delPic() {             let fsm = uni.getFileSystemManager();             fsm.unlink({                 filePath: `${wx.env.USER_DATA_PATH}/autograph.png-600`,                 success(res) {                     console.log(res)                     _that.srcA = ''                     hasQM = false                 },                 fail(res) {                     console.error(res)                 }     }) }