需求概述：
微信小程序的一個功能，類似于畫板，用于電子簽名，要求有一鍵清空畫板和保存功能。

實現思路：
微信開發文檔中的Canvas組件
微信畫布API中的
wx.createCanvasContext(string canvasId, Object this)
wx.canvasToTempFilePath(Object object, Object this)
CanvasContext.draw(boolean reserve, function callback)
開發文檔中把上面的API的用法寫的很詳細了，這里不多贅述了，直接放代碼：
WXML文件

<view class="Container"><view class="PaintRegion"><!-- 畫板區域 --><canvas class="myCanvas" canvas-id="myCanvas" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></canvas></view><view class="BtnRegion"><!-- 按鈕區域，有保存，清空等按鈕 --><button type="primary" size="mini"bind:tap="clearCanvas">清空</button>　　　<button type="primary" size="mini"bind:tap="SaveImg">保存</button></view><!-- <view>圖片預覽區域<image class="" src="{{url}}"></image></view> --> </view>

WXSS文件

.Container {border: black 2px solid;border-radius: 3px;height: 99vh;width: 98vw;margin: 0 auto;box-shadow: 0 0 3px 2px black; }.PaintRegion {height: 90%;border: black 1px solid;margin: 3px 3px;margin-bottom: 10px; }.BtnRegion {/* height: 8%; */text-align: center; }.myCanvas {height: 99%;width: 99%; }

JS文件

var config = require("../../utils/config.js"); Page({/*** 頁面的初始數據*/data: {penColor: 'black',lineWidth: 3,Imgurl: ""},/*** 觸摸開始*/touchStart: function(e) {//得到觸摸點的坐標this.startX = e.changedTouches[0].x;this.startY = e.changedTouches[0].y;this.context = wx.createCanvasContext("myCanvas", this);// 設置畫筆顏色this.context.setStrokeStyle(this.data.penColor);// 設置線條寬度this.context.setLineWidth(this.data.lineWidth);this.context.setLineCap('round'); // 讓線條圓潤this.context.beginPath();},/*** 手指觸摸后移動*/touchMove: function(e) {var startX1 = e.changedTouches[0].x;var startY1 = e.changedTouches[0].y;this.context.moveTo(this.startX, this.startY);this.context.lineTo(startX1, startY1);this.context.stroke();this.startX = startX1;this.startY = startY1;//只是一個記錄方法調用的容器，用于生成記錄繪制行為的actions數組。context跟<canvas/>不存在對應關系，一個context生成畫布的繪制動作數組可以應用于多個<canvas/>wx.drawCanvas({canvasId: 'myCanvas',reserve: true,actions: this.context.getActions() // 獲取繪圖動作數組})},/*** 觸摸結束*/touchEnd: function(e) {this.touchMove(e);},/*** 清除涂鴉信息*/clearCanvas: function(e) {this.context = wx.createCanvasContext("myCanvas", this);this.context.draw();//CanvasContext.draw(boolean reserve, function callback)//將之前在繪圖上下文中的描述（路徑、變形、樣式）畫到 canvas 中。//reserve:本次繪制是否接著上一次繪制。false則會清空畫布，true則保留},SaveImg: function() {var that = this;this.context = wx.createCanvasContext("myCanvas", this);this.context.draw(true, function() {wx.canvasToTempFilePath({canvasId: 'myCanvas',success: function(res) {that.setData({//這里是為了預覽功能做準備Imgurl: res.tempFilePath});//將圖片保存到服務器wx.uploadFile({url: config.fileUrl + "UpLoadFile.php", //接口地址filePath: res.tempFilePath,name: 'uploadfile_ant',header: {"Content-Type": "multipart/form-data"},success: function(res) {console.log(JSON.parse(res.data).url); //打印出后臺傳回前端的圖片的url地址},fail: function(res) {wx.hideToast();wx.showModal({title: '錯誤提示',content: '上傳圖片失敗',showCancel: false,success: function(res) {}})}});//若需要將圖片下載到本地，則打開下面的注釋// wx.saveImageToPhotosAlbum({// // 下載圖片// filePath: res.tempFilePath,// success: function() {// wx.showToast({// title: '保存成功',// icon: 'success',// })// },// })},})});} })

上傳圖片的后臺PHP文件之前寫過了，這里就不拿來混字數了。

總結

以上是生活随笔為你收集整理的【微信小程序】实现手写电子签名并保存为图片功能的全部內容，希望文章能夠幫你解決所遇到的問題。

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