小程序实现手写签名功能

小程序利用canvas实现手写签名

设置小程序横屏

在page.json或对应页面 .json文件中设置
landscape代表固定横屏

"pageOrientation":"landscape"

手写签名

创建canvas画布设置监听触摸开始移动结束等时间

此处为uniapp示例原生小程序的也可参考进行修改(只需将@touchmove等事件换为bindtouchmove等微信事件即可)

<view class='contents'><canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move' @touchstart='start($event)'@touchend='end' @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'></canvas><view class="btnBox"><view class="btn1" @tap='clearClick'>重签</view><view class="btn2" @tap="overSign">完成签名</view></view></view>

 page {background-color: #f2f2f2;}canvas {background-color: #fff;width: calc(100% - 20px);height: calc(100% - 70px);margin: 10px;position: absolute;}.btnBox {display: flex;height: 50px;width: 100%;position: fixed;left: 0;bottom: 0;}.btnBox view {width: 50%;text-align: center;height: 50px;line-height: 50px;color: #FFFFFF;}.btnBox view:active {background-color: #CCCCCC;color: #333333;}.btn1{background-color: #FF8F58;}.btn2{background-color: #0599D7;}

重点js

var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;
var _that;
export default {data() {return {isEnd: false, // 是否签名srcA: ''}},methods: {overSign: function() {if (this.isEnd) {let that = thisuni.canvasToTempFilePath({canvasId: 'firstCanvas',fileType: 'png',success: function(res) {//打印图片路径console.log(res.tempFilePath)console.log('完成签名')// 可以再次进行直接保存图片到本地，这个保存就不写了可参考之前的canvas图片保存到本地// 一般签名都是要返回前一页进行提交，所以在此将图片写到微信内部文件（不会出现在手机相册中）返回上一页获取，在上一页提交后在将图片删除let fsm = uni.getFileSystemManager();fsm.readFile({filePath: res.tempFilePath,success: function(res) {//转换成功var arrayBuffer = res.datafsm.writeFile({filePath: `${wx.env.USER_DATA_PATH}/autograph.png`,data: arrayBuffer,encoding: 'binary',success() {console.log('写入成功')uni.navigateBack()},fail(err) {console.log(err)},});},fail: function(e) {}})}})} else {uni.showToast({title: '请先完成签名',icon: "none",duration: 1500,mask: true})}},// 画布的触摸移动开始手势响应start: function(event) {// console.log(event)// console.log("触摸开始" + event.changedTouches[0].x)// console.log("触摸开始" + event.changedTouches[0].y)//获取触摸开始的 x,ylet point = {x: event.changedTouches[0].x,y: event.changedTouches[0].y}// console.log(point)touchs.push(point);},// 画布的触摸移动手势响应move: function(e) {let point = {x: e.touches[0].x,y: e.touches[0].y}// console.log(point)touchs.push(point)if (touchs.length >= 2) {this.draw(touchs)}},// 画布的触摸移动结束手势响应end: function(e) {// console.log("触摸结束" + e)// 设置为已经签名this.isEnd = true// 清空轨迹数组for (let i = 0; i < touchs.length; i++) {touchs.pop()}},// 画布的触摸取消响应cancel: function(e) {console.log("触摸取消" + e)},// 画布的长按手势响应tap: function(e) {console.log("长按手势" + e)},error: function(e) {console.log("画布触摸错误" + e)},//绘制draw: function(touchs) {// console.log(touchs[0], touchs[1])let point1 = touchs[0]let point2 = touchs[1]touchs.shift()content.moveTo(point1.x, point1.y)content.lineTo(point2.x, point2.y)content.stroke()content.draw(true)},//清除操作clearClick: function() {// 设置为未签名this.isEnd = false//清除画布content.clearRect(0, 0, canvasw, canvash)content.draw(true)},},/*生命周期函数--监听页面加载 */onLoad: function(options) {_that = thislet dev = uni.getSystemInfoSync()console.log(dev)// 获取横屏的宽高 设置画布的大小// screenWidth windowHeightcanvasw = dev.screenWidth - 20canvash = dev.screenHeight - 70//获得Canvas的上下文content = wx.createCanvasContext('firstCanvas')//设置线的颜色content.setStrokeStyle("#000")//设置线的宽度content.setLineWidth(5)//设置线两端端点样式更加圆润content.setLineCap('round')//设置两条线连接处更加圆润content.setLineJoin('round')content.setFillStyle('white'); //填充白色content.fillRect(0, 0, canvasw, canvash); //画出矩形白色背景content.restore()content.save()},
}

上一页可在onshow中获取签名的图片（若签名没有writeFile则可不理会下方的）

 // 获取本地保存的图片getImg() {var timestamp = new Date().getTime();uni.getImageInfo({src: `${wx.env.USER_DATA_PATH}/autograph.png`,success: function(res) {console.log(res.path)_that.srcA = res.pathhasQM = true},fail: function(err) {console.log(err)_that.srcA = ''},})},//删除缓存的图片delPic() {let fsm = uni.getFileSystemManager();fsm.unlink({filePath: `${wx.env.USER_DATA_PATH}/autograph.png`,success(res) {console.log(res)_that.srcA = ''hasQM = false},fail(res) {console.error(res)}})}

小程序实现手写签名功能相关推荐

原生微信小程序实现手写签名功能
项目中有遇到在小程序上实现手动签名功能,今天给大家分享下代码 wxml 文件代码如下,catchtouchmove属性一定要加上,否则移动起来连笔非常不流畅 <view class=" ...
记录一下小程序的手写签名组件
文章目录前言一..js文件的内容二..json文件的内容三..wxml文件的内容四..wxss文件的内容五.要引用的.wxml文件的内容六.要引用的.js文件的内容七.总结前言由于 ...
微信小程序实现手写签名（极简横版）
以下代码在仅在基础库2.6版本无法正常运行,其他版本暂未测出问题. 文章目录 1.横版JSON配置 2.效果预览 3.代码实现 3.1 HTML 3.2 CSS 3.3 JSON 3.4 JS 1.横 ...
android 手写签批_Android自定义实现手写签名功能
一.Android自定义View步骤 : 自定义属性: 选择和设置构造方法: 重写onMeasure()方法: 重写onDraw()方法: 重写onLayout()方法: 重写其他事件的方法(滑动监听 ...
android 电子签名手写签名功能实现
android 电子签名手写签名功能实现这个手写的效果就是一个重写的的自定义的view 代码如下: package com.example.hand.views;import java. ...
html5 移动端手写签名,H5移动端项目实现手写签名功能 vue实现手写签名
vue 移动端实现手写签名效果,功能很完美,保存时保存为base64格式. 刚好项目用到此功能,就网上找了一下,清理了无用代码,简单方便,因为项目中多个地方需要使用,所以我将它整理为组件,通过ref和 ...
Android手写签名功能（包含画米字格，人名和书写轨迹）
本文主要介绍Android手写签名的功能实现,效果如下图 1.根据人名的个数绘制人的名称这个逻辑分几个步骤:首先创建画笔,然后根据一个字,创建一个字的矩形框,然后根据矩形框获取到画这个字的宽高. / ...
H5移动端项目实现手写签名功能 vue实现手写签名
vue 移动端实现手写签名效果,功能很完美,保存时保存为base64格式. base64转file文件格式 vue中将base64转file文件格式刚好项目用到此功能,就网上找了一下,清理了无用代码 ...
微信小程序手写签名_微信小程序实现手写签字
无纸化办公,这是老板对我的要求,然而有人现场执法文件全部电子化,只有签字部分让一个搞web的人有点儿头疼,不能为了这个找个人来开发app吧于是想到了小程序,对于一个新接触小程序的人来说还是有挑战性的, ...
AI识别图片识别微信小程序（手写OCR）
使用腾讯云手写OCR API的微信小程序 GitHub地址主要功能:识别图片形式的手写笔记并展示 //appid等作为全局变量定义在了app.js里//使用时需将相应字段添加到app.js文件中gl ...

小程序实现手写签名功能

设置小程序横屏

手写签名

小程序实现手写签名功能相关推荐

最新文章

热门文章

小程序 实现手写签名功能

设置小程序横屏

手写签名

小程序 实现手写签名功能相关推荐

最新文章

热门文章

小程序实现手写签名功能

小程序实现手写签名功能相关推荐