uniApp_canvas电子签字

使用canvas实现手写电子签名功能，签字完成后将其转换为图片上传

组件实现完整代码

 <!-- 电子签名 --><template><view class="electronicSignature" ><u-popup v-model="show" mode="center" :borderRadius="12"><view class="eSign_popup">请在下方区域签字：<view class="" @touchmove.stop.prevent="moveHandle"><canvas class="mycanvas" canvas-id="mycanvas" @touchstart.stop="touchstart" @touchmove.stop="touchmove"@touchend.stop="touchend"></canvas></view><view class="foot"><u-button class="footBtn footBtn1" type="primary" @tap="resetSign"> 重 签 </u-button><u-button class="footBtn" type="primary" @tap="signConfirm"> 确 认 </u-button></view></view></u-popup></view></template>

 <script>export default {name: "electronicSign",data() {return {show: false,ctx: null,points: [],headerStyleHeight: 0,headerStyleTop: 0,signature:'',path: '',image: '',};},created() {this.ctx = uni.createCanvasContext("mycanvas", this); //创建绘图对象// console.log('canvas对象',this.ctx)//设置画笔样式this.ctx.lineWidth = 3;this.ctx.lineCap = "round";this.ctx.lineJoin = "round";// 画笔颜色this.ctx.setStrokeStyle('#000');},methods: {// 当手指触摸Canvas时禁止页面滚动moveHandle(){return;},//触摸开始，获取到起点touchstart(e) {let startX = e.changedTouches[0].x;let startY = e.changedTouches[0].y;let startPoint = {X: startX,Y: startY};this.points.push(startPoint);//每次触摸开始，开启新的路径this.ctx.beginPath();},//触摸移动，获取到路径点touchmove(e) {let moveX = e.changedTouches[0].x;let moveY = e.changedTouches[0].y;let movePoint = {X: moveX,Y: moveY};this.points.push(movePoint); //存点let len = this.points.length;if (len >= 2) {this.draw(); //绘制路径}},//触摸结束，清除points中的点touchend() {// console.log('结束')this.points = [];},// canvas绘制路径draw() {let point1 = this.points[0]let point2 = this.points[1]this.points.shift()this.ctx.moveTo(point1.X, point1.Y)this.ctx.lineTo(point2.X, point2.Y)this.ctx.stroke()this.ctx.draw(true)},//签字确认 signConfirm(){const that = this;this.$emit('confirm')// 将canvas中的签字转为临时文件（图片）uni.canvasToTempFilePath({canvasId: 'mycanvas',fileType: 'png',// destWidth: 100,// destHeight: 100,quality: 1,success: function(res) {// 重新设置画笔宽度，以防二次签字画笔变细that.ctx.lineWidth = 3;// 将图片上传到文件服务器uni.uploadFile({url: that.URL + '/api/open/upload/',filePath: res.tempFilePath,name:　'file',success: file=>{// 签字图片上传成功，将图片路径传给父级组件that.$emit('confirm',file.data)that.show = false;}})}})},// 重新签字resetSign(){this.clear();},//清空画布clear() {let that = this;uni.getSystemInfo({success(res) {let canvasw = res.windowWidth;let canvash = res.windowHeight;that.ctx.clearRect(0, 0, canvasw, canvash);that.ctx.draw(true);},})}}}</script>

<style lang="scss" scoped>.electronicSignature{.mycanvas{outline: 1rpx solid #999999;border-radius: 6rpx;width: 710rpx;height: 440rpx;}.eSign_popup{padding: 20rpx 6rpx;.foot{margin-top: 10rpx;display: flex;}.footBtn{width: 140rpx;height: 60rpx;border-radius: 14rpx;margin: auto;background-color: #24BBC5;}.footBtn1{background-color: #FFFFFF;color: red;border: 1rpx solid red;}}}</style>

uniApp_canvas电子签字相关推荐

uni-app - 电子签字板组件（签名专用写字画板，支持调整写字板 “横纵“ 方向，可调整线条粗细颜色等，Canvas 绘制非常丝滑流畅）完美兼容 H5 APP 小程序，最好用的画板签字教程插件源码
前言网上的教程代码非常乱且都有 BUG 存在,非常难移植到自己的项目中,本文代码干净整洁注释详细. 本文实现了全端兼容,签名专用的写字板组件,真机流畅丝滑且无 BUG, 您直接复制组件源码,按照详 ...
1024程序员节|历经一个月总结使用java实现pdf文件的电子签字+盖章+防伪二维码+水印+PDF文件加密的全套解决方案
java 制作签名版电子合同pdf版本
一.需求描述实现合同模板自动生成合同,再添加电子签名.如图: 二.实现步骤使用java开源itext库对pdf进行操作,主要分为: 1 html模板+model数据,通过freemarker进行渲 ...
解读：电子合同、电子签名、电子印章、数字认证之间的关系
近年来,电子合同应用以极快的速度在国内发展与普及.凭借其签署效率高.管理成本高等优势,电子合同成为越来越多企业组织进行合同管理的新选择. 为了进一步提升企业组织与个人对电子合同应用的认识与理解,契约锁 ...
Itext7在PDF指定位置添加电子公章
目录 1. 电子公章的制作 2. java工具keytool生成p12数字证书文件 3. pom依赖 4. 实体类 5. 工具类及测试示例 6. 效果 1. 电子公章的制作做章网站:http://s ...
SAP S/4HANA Service Management和SAP FSM基于CPI的集成场景介绍
本文作者是我的同事,Song Hao(宋浩),SAP成都研究院S/4HANA Service Management的开发人员. 项目背景相信大家已经知道,2018年6月份,SAP收购了一家专注于Fi ...
云付认证已通过可以支付吗_海科融通丨刷新支付日常问题【附交易操作步奏】...
01 常见问题汇总 QPIN秘钥检验出错 A:认证时不要频繁点击,点完后等一等系统反应,可联系客服处理. Q报错99,该小商户已入网 A:提供商户编号给服务经理处理. Q终端屏幕无法签字 A:待机界面 ...
“智能报表系统”的建设经验--东北证券
证券行业是中国计算机应用高度密集的行业之一,如何利用好各项数据是券商摆脱低层次的同质化竞争,走向差异化服务优势的重要途径.那么以数据为基础,通过数据分析指导服务和决策就显得尤为重要. 在东北证券的数据 ...
如何删除PDF空白签名域？
使用Acrobat给PDF文档加上电子签名已经非常普遍.有时候想把电子签字删除.操作方法:在电子签名处点击鼠标右键,选择"删除签名"即可. 但是删除签名后,文档中还有一个蓝框,这就 ...
行政人员与固定资产管理的爱恨情仇
固定资产的管理,作为行政人员的工作之一,往往让行政人员又爱又恨.众多行政人员认定固定资产管理的工作是"烫手的山芋".如果管理的得当,做起工作来犹如行云流水,一切水到渠成.相反,如果 ...

uniApp_canvas电子签字

uniApp_canvas电子签字

组件实现完整代码

uniApp_canvas电子签字相关推荐

最新文章

热门文章