需求如下圖展示，因為小程序中有好幾個地方使用簽名，所以做成組件。

?

1、創建組件

?signature.js

const app = getApp(); Component({/*** 組件的屬性列表*/properties: {},/*** 組件的初始數據*/data: {context: null,index: 0,height: 0,width: 0,src: '', //保存后的簽名圖片地址},/*** 組件的方法列表*/methods: {goPage(e) {wx.redirectTo({url: e.currentTarget.dataset.url})},initCanvas() {const that = this;const query = wx.createSelectorQuery().in(this)query.select('#firstCanvas').fields({node: true,size: true}).exec((rect) => {console.log('rect===', rect)let width = rect[0].width;let height = rect[0].height;that.setData({width,height});const context = wx.createCanvasContext('firstCanvas', that)that.setData({context: context})context.setStrokeStyle('#061A06')context.setLineWidth(2)context.draw()})},/**記錄開始點 */bindtouchstart(e) {this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)},/**記錄移動點，刷新繪制 */bindtouchmove(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() {this.data.context.clearRect(0, 0, this.data.width, this.data.height);this.data.context.setStrokeStyle('#061A06')this.data.context.setLineWidth(2)this.data.context.draw();},/**導出圖片 */export () {const that = this;this.data.context.draw(true, () => {that.exportImage();});},exportImage() {const that = this;setTimeout(() => {wx.canvasToTempFilePath({fileType: 'png',canvasId: 'firstCanvas',success(res) {wx.uploadFile({url: '***/api/v1/common/stream', //服務器上傳圖片urlfilePath: res.tempFilePath,name: 'file',header: {"content-type": "multipart/form-data"},success(res) {let data = res.data;data = JSON.parse(res.data);console.log(data)if (data.success) {that.setData({src: data.data})that.colseSign()app.showMsg('保存成功')} else {app.showMsg(data.msg)}},fail(err) {console.log(err)app.showMsg('保存失敗api')}})},fail(err) {console.log(err)app.showMsg('保存失敗')}}, that)}, 500)},colseSign() {this.triggerEvent('sign', this.data.src)}},lifetimes: {ready: function() {this.initCanvas()}}, })

wxml:

<view class="mask" catchtouchmove="true"><view class="sign-pop" catchtouchmove="true"><view class="tc h1">簽名區，請手寫輸入清晰可辨的簽名</view><view class="sign-box"><canvas canvas-id="firstCanvas" class="canvas" id='firstCanvas' bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas></view><view class="btn-group tc"><van-button bind:click="clear" round color="#DC1515" custom-style="width: 230rpx;height:80rpx;font-weight: 400;font-size: 28rpx;margin-right:20rpx">清空</van-button><van-button bind:click="export" round color="#185729" custom-style="width: 230rpx;height:80rpx;font-weight: 400;font-size: 28rpx;margin-right:20rpx">保存</van-button><van-button bind:click="colseSign" round color="#9F9F9F" custom-style="width: 230rpx;height:80rpx;font-weight: 400;font-size: 28rpx;">返回</van-button></view></view> </view>

css樣式就不展示了。。

?2、在父組件中的使用

js:

Page({/*** 頁面的初始數據*/data: {show_sign: false, //簽名顯示},openSing(){this.setData({show_sign: true})},saveSign(src){console.log(src)this.setData({show_sign: false})}, })

wxml:

<view class="tc"><van-button bind:click="back" round color="#9F9F9F" custom-style="width: 300rpx;height:80rpx;font-weight: 400;font-size: 28rpx;margin-right:20rpx">返回</van-button><van-button bind:click="openSing" round color="#185729" custom-style="width: 320rpx;height:80rpx;font-weight: 400;font-size: 28rpx;">點擊這里，簽名確認</van-button> </view><view wx:if="{{show_sign}}"><signature bind:sign="saveSign"></signature> </view>

總結

以上是生活随笔為你收集整理的微信小程序自定义canvas手写签名组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。