【微信小程序】实现手写电子签名并保存为图片功能

需求概述：
微信小程序的一个功能，类似于画板，用于电子签名，要求有一键清空画板和保存功能。

实现思路：
微信开发文档中的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文件之前写过了，这里就不拿来混字数了。

总结

以上是生活随笔为你收集整理的【微信小程序】实现手写电子签名并保存为图片功能的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。