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

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

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

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

AI识别图片识别微信小程序（手写OCR）
使用腾讯云手写OCR API的微信小程序 GitHub地址主要功能:识别图片形式的手写笔记并展示 //appid等作为全局变量定义在了app.js里//使用时需将相应字段添加到app.js文件中gl ...
微信小程序手写签名_微信小程序实现手写签字
无纸化办公,这是老板对我的要求,然而有人现场执法文件全部电子化,只有签字部分让一个搞web的人有点儿头疼,不能为了这个找个人来开发app吧于是想到了小程序,对于一个新接触小程序的人来说还是有挑战性的, ...
原生微信小程序实现手写签名功能
项目中有遇到在小程序上实现手动签名功能,今天给大家分享下代码 wxml 文件代码如下,catchtouchmove属性一定要加上,否则移动起来连笔非常不流畅 <view class=" ...
微信小程序实现手写签名（极简横版）
以下代码在仅在基础库2.6版本无法正常运行,其他版本暂未测出问题. 文章目录 1.横版JSON配置 2.效果预览 3.代码实现 3.1 HTML 3.2 CSS 3.3 JSON 3.4 JS 1.横 ...
微信小程序开发手账从入门到部署【持续更新】
微信小程序开发手账从今天起,打算记录一下自己从入门开发微信小程序到小程序上线的完整流程. 如果没有意外的话打算每周更新一次.20201231 准备工作 hbuilder.java环境(springb ...
微信小程序练手项目-音乐播放器
微信小程序练手项目-音乐播放器该项目只适合练手,大佬请绕道项目展示图: 项目介绍微信小程序音乐播放器页面: 音乐推荐.播放器.播放列表功能: 播放.暂停.上一首.下一首.跳转播放列表.实时进 ...
视频教程-微信小程序系统教程python版[3/3阶段]_微信小程序支付-手游开发
微信小程序系统教程python版[3/3阶段]_微信小程序支付微信企业号星级会员.10多年软件从业经历,国家级软件项目负责人,主要从事软件研发.软件企业员工技能培训.已经取得计算机技术与软件资格考试 ...
微信小程序利用腾讯云IM发送语音 + 图片
微信小程序利用腾讯云IM发送语音 + 图片能做到这里说明你已经可以发送普通文本了如果没有的话可以看一下我的上一篇文章有完整的讲解效果图语音聊天发送图片传送 → 发送图片发送语音 ** ...
微信小程序在底部导航栏使用扫一扫功能【代码可用】
微信小程序在底部导航栏使用扫一扫功能解决方案 uni-app 微信原生代码在家躺着也能遇到奇奇怪怪的需求,这不,需要在微信小程序底部的导航栏中加一个扫一扫功能⭐╮(￣﹏￣)╭⭐. 解决方案在导航 ...

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

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

最新文章

热门文章