使用微信小程序的canvas做了个人签名的功能，支持导出为图片和清空的功能。为了提供用户体验，在性能优化上做了很大提升。最后的保存图片是先保存为本地临时文件，然后上传服务器，从服务器请求预览。下面先上图，再公布代码
wxml代码为
<!--index.wxml--><view class="container"><canvas canvas-id="firstCanvas" id='firstCanvas' bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas><view class="btn"><button type="warn" bindtap='clear'>清除</button><button type="primary" bindtap='export'>提交</button></view></view>
js代码为
//index.js//获取应用实例const app = getApp()Page({data: {context: null,index: 0,height: 0,width: 0},/**记录开始点 */bindtouchstart: function(e) {this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)},/**记录移动点，刷新绘制 */bindtouchmove: function(e) {this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);this.data.context.stroke();this.data.context.draw(true);this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);},/**清空画布 */clear: function() {this.data.context.clearRect(0, 0, this.data.width, this.data.height);this.data.context.draw();this.data.context.setStrokeStyle('#00ff00')this.data.context.setLineWidth(2)this.data.context.setFontSize(20)let str = "签名区域";this.data.context.fillText(str, Math.ceil((this.data.width - this.data.context.measureText(str).width) / 2), Math.ceil(this.data.height / 2) - 20)this.data.context.draw()},/**导出图片 */export: function() {const that=this;this.data.context.draw(false, wx.canvasToTempFilePath({x: 0,y: 0,width: that.data.width,height: that.data.height,destWidth: that.data.width,destHeight: that.data.height,fileType: 'jpg',canvasId: 'firstCanvas',success(res) {wx.uploadFile({url: 'http://192.168.0.157:8089/uppic', filePath: res.tempFilePath,name: 'file',success(res) {var url = "http://192.168.0.157:8089/pic?name=" + res.datawx.previewImage({// current: url, // 当前显示图片的http链接urls: [url], // 需要预览的图片http链接列表fail(f) {console.log(2)console.error(f)},success(s) {console.log(1)console.log(s)}})},fail(err) {wx.showToast({title: '上传失败',icon: 'none',duration: 2000})}})},fail() {wx.showToast({title: '导出失败',icon: 'none',duration: 2000})}}))},onLoad: function(options) {console.log(options.id);if (options.id) {wx.showToast({title: '姓名' + options.id,icon: 'success',duration: 2000})}},onShow: function() {let query = wx.createSelectorQuery();const that = this;query.select('#firstCanvas').boundingClientRect();query.exec(function(rect) {let width = rect[0].width;let height = rect[0].height;that.setData({width,height});const context = wx.createCanvasContext('firstCanvas')that.setData({context: context})context.setStrokeStyle('#00ff00')context.setLineWidth(2)context.setFontSize(20)let str = "签名区域";context.fillText(str, Math.ceil((width - context.measureText(str).width) / 2), Math.ceil(height / 2) - 20)context.draw()});},onShareAppMessage: (res) => {if (res.from === 'button') {console.log("来自页面内转发按钮");console.log(res.target);} else {console.log("来自右上角转发菜单")}return {title: '手动签名',path: '/pages/index/index?id=测试',// imageUrl: "/images/1.jpg",success: (res) => {console.log("转发成功", res);},fail: (res) => {console.log("转发失败", res);}}}})
