小程序实现手写签名功能_javascript技巧_

"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`,                                     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 < 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)         },     },     /*生命周期函数--监听页面加载 */     onLoad: function(options) {         _that = this         let dev = uni.getSystemInfoSync()         console.log(dev)         // 获取横屏的宽高 设置画布的大小         // screenWidth windowHeight         canvasw = dev.screenWidth - 20         canvash = dev.screenHeight - 70         //获得Canvas的上下文         content = wx.createCanvasContext('firstCanvas')         //设置线的颜色         content.setStrokeStyle("#000")         //设置线的宽度         content.setLineWidth(5)         //设置线两端端点样式更加圆润         content.setLineCap('round')         //设置两条线连接处更加圆润         content.setLineJoin('round')         content.setFillStyle('white'); //填充白色         content.fillRect(0, 0, canvasw, canvash); //画出矩形白色背景         content.restore()         content.save()     }, }

// 获取本地保存的图片 getImg() {         var timestamp = new Date().getTime();         uni.getImageInfo({             src: `${wx.env.USER_DATA_PATH}/autograph.png`,             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`,                 success(res) {                     console.log(res)                     _that.srcA = ''                     hasQM = false                 },                 fail(res) {                     console.error(res)                 }     }) }