unniapp实现电子签名

先放效果图

主页面代码：

<!-- 这是签名 -->
<button type="primary" @tap="doss" style="margin: 10px;">点击签名</button>
<view class="imgs"><image class="img" :src="img1" mode="widthFix" style="margin: 0px 24px;"></image></view>
<catSignature canvasId="canvas1" @close="close" @save="save" :visible="isShow" />data() {return {isShow: false,}
}js代码
doss() {this.isShow = true;
},
close() {this.isShow = false;
},
save(val) {this.isShow = false;this.img1 = this.$refs.hello.signImage;// console.log('微信小程序产生的',this.img1);
}

实现电子签名的组件代码

<template><view class="uni-list list-pd"><view v-if="visibleSync" class="cat-signature" :class="{ visible: show }" @touchmove.stop.prevent="moveHandle"><view class="mask" @tap="close" /><view class="content"><canvasclass="firstCanvas":canvas-id="canvasId"name="autograph"@touchmove="move"@touchstart="start($event)"@touchend="end"@touchcancel="cancel"@longtap="tap"disable-scroll="true"@error="error"/><view class="btns"><view class="btn" @tap="clear">清除</view><view class="btn" @tap="save">保存</view></view></view></view></view>
</template><script>
var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;
//获取系统信息
uni.getSystemInfo({success: function(res) {canvasw = res.windowWidth;canvash = (canvasw * 9) / 16;}
});
export default {name: 'cat-signature',props: {visible: {type: Boolean,default: false},canvasId: {type: String,default: 'firstCanvas'}},data() {return {show: false,visibleSync: false,signImage: '',hasDh: false};},watch: {visible(val) {this.visibleSync = val;this.show = val;this.getInfo();}},created(options) {this.visibleSync = this.visible;this.getInfo();setTimeout(() => {this.show = this.visible;}, 100);},methods: {getInfo() {//获得Canvas的上下文content = uni.createCanvasContext(this.canvasId, this);//设置线的颜色content.setStrokeStyle('#000');//设置线的宽度content.setLineWidth(5);//设置线两端端点样式更加圆润content.setLineCap('round');//设置两条线连接处更加圆润content.setLineJoin('round');},//close() {this.show = false;this.hasDh = false;this.$emit('close');},moveHandle() {},// 画布的触摸移动开始手势响应start(e) {let point = {x: e.touches[0].x,y: e.touches[0].y};touchs.push(point);this.hasDh = true;},// 画布的触摸移动手势响应move: function(e) {let point = {x: e.touches[0].x,y: e.touches[0].y};touchs.push(point);if (touchs.length >= 2) {this.draw(touchs);}},// 画布的触摸移动结束手势响应end: function(e) {//清空轨迹数组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) {let point1 = touchs[0];let point2 = touchs[1];// console.log(JSON.stringify(touchs))content.moveTo(point1.x, point1.y);content.lineTo(point2.x, point2.y);content.stroke();content.draw(true);touchs.shift();},//清除操作clear: function() {//清除画布content.clearRect(0, 0, canvasw, canvash);content.draw(true);// this.close()this.hasDh = false;this.$emit('clear');},save() {var that = this;if (!this.hasDh) {uni.showToast({ title: '请先签字', icon: 'none' });return;}uni.showLoading({ title: '生成中...', mask: true });setTimeout(() => {uni.canvasToTempFilePath({canvasId: this.canvasId,success: function(res) {that.signImage = res.tempFilePath;that.$emit('save', res.tempFilePath);uni.hideLoading();that.hasDh = false;that.show = false;},fail: function(err) {console.log(err);uni.hideLoading();}},this);}, 100);}}
};
</script><style lang="scss">
.cat-signature.visible {visibility: visible;
}
.cat-signature {display: block;position: fixed;top: 0;left: 0;right: 0;bottom: 0;overflow: hidden;z-index: 11;height: 100vh;visibility: hidden;.mask {display: block;opacity: 0;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.4);transition: opacity 0.3s;}.content {display: block;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;width: 94%;height: 500upx;background: #fff;border-radius: 8upx;box-shadow: 0px 3px 3px #333;// canvas.firstCanvas {background-color: #fff;width: 100%;height: 400upx;}// canvas.btns {padding: 0 15px;height: 100upx;overflow: hidden;position: absolute;bottom: 10upx;left: 0;right: 0;margin: auto;display: flex;justify-content: space-between;.btn {width: 40%;text-align: center;font-size: 28upx;height: 60upx;line-height: 60upx;background-color: #999;color: #fff;border-radius: 6upx;}}}
}.visible .mask {display: block;opacity: 1;
}.uni-list:after {// 全局样式里面有一个，所以我们用白色把他隐藏起来background-color: #ffffff;
}
</style>

千万要记得引用电子签名代码哦

// 调用手写签名组件,路径记得修改
import catSignature from '@/common/cat-signature.vue';

export default {components: {catSignature},
}

unniapp实现电子签名相关推荐

2022-2028年中国电子签名行业深度调研及投资前景预测报告
[报告类型]产业研究 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版本报告介绍了电子签名行业相关概述.中国电子签名行业运行环境.分析了中国电子签名行 ...
【每日随笔】电子签名 ( 下载 “e 签保“ 应用 | 使用手机号 + 短信验证码登录 | 发起签署 | 签名 | 获取签名后的 PDF 文件及出证信息 )
文章目录一.下载 "e 签保" 应用二.使用手机号 + 短信验证码登录三.发起签署四.签名五.获取签名后的 PDF 文件及出证信息一.下载 "e 签保&q ...
tcm可信密码模块linux,基于可信密码模块的可信电子签名终端设计与实现
目前电子签名都是在普通PC上进行的,但普通PC的运行环境可能被恶意程序感染, 可信PC能够有效解决普通PC的安全问题,但是当前PC上可信计算的研究还面临许多瓶颈,特别是信任链难以通过PC上操作系统进 ...
docusign文档打不开_怎样查看 docusign pdf 电子签名
满意答案 knpdb4211 2017.09.26 采纳率:47% 等级:11 已帮助:3743人日前,在福昕软件(Foxit Corporation)发布的英文版Foxit Reader6. ...
Python骚操作！你还在用PS制作电子签名吗？
????加星标,不迷路哦! 前言在我们工作和生活中,你使用过电子签名吗? 众所周知,电子签名可以使用Photoshop制作,但是Photoshop安装过程复杂,占内存,杀鸡焉用牛刀?而且网上提供的在 ...
webcrypto库下载_使用WebCrypto API的电子签名
webcrypto库下载有时我们需要让用户进行电子签名. 通常,人们会理解为以某种方式将您的手写签名放置在屏幕上. 根据管辖范围,可能很好,或者仅存储图像可能还不够. 例如,在欧洲,有910/201 ...
将可见的电子签名添加到PDF
我知道这将是一个非常特殊的话题. 电子签名PDF远不是主流用例. 但是,我将其编写的原因有两个:第一,我认为它对真正需要它的人非常有用:第二,我认为随着eIDAS法规的普及,它将变得越来越普遍.电子签 ...
使用WebCrypto API的电子签名
有时我们需要让用户进行电子签名. 通常,人们会理解为将您的手写签名以某种方式放在屏幕上. 根据管辖范围,可能很好,或者仅存储图像可能还不够. 例如,在欧洲,有910/2014号法规 ,该法规定义了什么 ...
手机版wps怎么制作折线图_手机怎么制作电子签名？有没有手机电子签名软件或者APP？...
手机怎么制作电子签名?有没有手机电子签名软件或者APP? 手机制作电子签名非常简单,当然也有移动版的电子签名软件或者APP. 根据<电子签名法>第13条规定:电子签名同时符合下列条件的,视 ...

unniapp实现电子签名

unniapp实现电子签名相关推荐

最新文章

热门文章