uni-app在线签名功能，签名生成图片，转base64工具

废话不多说啊，直接上代码，代码我也是看的一个大佬的，但是不知道在哪看的了，就不写转载了

这个我简单研究了一个，能直接用，样式可以自己修改。需要配合base64转换的，工具也放在这这里。

base64图片转换（这个是一个工具，给大家写上原地址）

说明网址：“https://www.npmjs.com/package/image-tools”

<template><view class="container"><view class="sigh-btns"><button class="btn" @tap="handleCancel">取消</button><button class="btn" @tap="handleReset">重写</button><button class="btn" @tap="handleConfirm">确认</button></view><view class="sign-box"><canvas class="mycanvas" :style="{width:width +'px',height:height +'px'}" canvas-id="mycanvas"@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas><canvas canvas-id="camCacnvs" :style="{width:height +'px',height:width +'px'}" class="canvsborder"></canvas></view></view></template>
<script>var x = 20;var y = 20;var tempPoint = []; //用来存放当前画纸上的轨迹点var id = 0;var type = '';let that;let canvasw;let canvash;export default {data() {return {ctx: '', //绘图图像points: [], //路径点集合,width: 0,height: 0};},mounted() {},onLoad(option) {that = this;console.log(option);id = option.id;type = option.type;this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象//设置画笔样式this.ctx.lineWidth = 4;this.ctx.lineCap = 'round';this.ctx.lineJoin = 'round';uni.getSystemInfo({success: function(res) {console.log(res);that.width = res.windowWidth * 0.8;that.height = res.windowHeight * 0.85;}});},methods: {//触摸开始，获取到起点touchstart: function(e) {let startX = e.changedTouches[0].x;let startY = e.changedTouches[0].y;let startPoint = {X: startX,Y: startY};/* **************************************************#由于uni对canvas的实现有所不同，这里需要把起点存起来* **************************************************/this.points.push(startPoint);//每次触摸开始，开启新的路径this.ctx.beginPath();},//触摸移动，获取到路径点touchmove: function(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(); //绘制路径}tempPoint.push(movePoint);},// 触摸结束，将未绘制的点清空防止对后续路径产生干扰touchend: function() {this.points = [];},/* *********************************************** #   绘制笔迹#   1.为保证笔迹实时显示，必须在移动的同时绘制笔迹#   2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)#   3.将上一次的终点作为下一次绘制的起点（即清除第一个点）************************************************ */draw: function() {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);},handleCancel() {uni.navigateBack({delta: 1});},//清空画布handleReset: function() {console.log('handleReset');that.ctx.clearRect(0, 0, that.width, that.height);that.ctx.draw(true);tempPoint = [];},//将签名笔迹上传到服务器，并将返回来的地址存到本地handleConfirm: function() {if (tempPoint.length == 0) {uni.showToast({title: '请先签名',icon: 'none',duration: 2000});return;}uni.canvasToTempFilePath({canvasId: 'mycanvas',success: function(res) {let tempPath = res.tempFilePath;const ctx = uni.createCanvasContext('camCacnvs', that);ctx.translate(0, that.width);ctx.rotate((-90 * Math.PI) / 180);ctx.drawImage(tempPath, 0, 0, that.width, that.height);ctx.draw();setTimeout(() => {//保存签名图片到本地uni.canvasToTempFilePath({canvasId: 'camCacnvs',success: function(res) {//这是签名图片文件的本地临时地址let path = res.tempFilePath;console.log("11", path);},fail: err => {console.log('fail', err);}},this);}, 200);}});}}};
</script><style lang="scss" scoped>.container {display: flex;flex-direction: row;}.sign-box {width: 80%;height: 90%;margin: auto;display: flex;flex-direction: column;text-align: center;}.sign-view {height: 100%;}.sigh-btns {height: 100%;margin: auto;display: flex;flex-direction: column;justify-content: space-around;}.btn {margin: auto;padding: 8rpx;transform: rotate(90deg);border: grey 1rpx solid;}.mycanvas {margin: auto 0rpx;background-color: #ececec;}.canvsborder {border: 1rpx solid #333;position: fixed;top: 0;left: 10000rpx;}
</style>

uni-app在线签名功能，签名生成图片，转base64工具相关推荐

uni app实现WIFI功能(只支持安卓APP)
uni app实现WIFI功能一.前言二.使用 uni-WIFI 三.使用h5+ api 一.前言最近需要在uniapp上实现WiFi功能,将个人的研究结果记录如下(都只支持安卓APP) 使用 ...
uni - app的 nfc功能使用鱼住未来第三方插件完成
1.鱼住未来注册 https://console.aidoing.com.cn/home/workplace 2.注册好,创建应用 3.manifest.json中源码视图 "plugins ...
vue canvas 方法无效_vue实现手机app手写签名功能
我曾经在一个文书交互相关的项目中遇到过这样的一个需求,当用户接收到管理员发送的文书时,用户需要在这个文书上签字签收,签名需要跟原有的文书进行合并,做到模仿线下真实签收的电子签名.这签收没有调用APP特 ...
【IOS实用玩机技巧】爱思助手 IPA 签名功能常见问题汇总（iOS上架）
爱思助手 IPA 签名功能常见问题汇总使用 Apple ID 签名 IPA 文件也就是常说的"个人签",很多小伙伴在使用Apple ID签名时,有时候会出现证书申请失败,或者签名 ...
微信小程序canvas实现签名功能
微信小程序canvas实现签名功能在微信小程序项目中,开发模块涉及到手写签名功能,微信小程序canvas闪亮登场文章目录微信小程序canvas实现签名功能前言一.微信小程序canvas实现签 ...
Android APP签名和签名等信息查看
最近在写学校的创新项目,是一个基于定位的签到系统,需要用到百度地图,百度地图SDK的使用需要申请身份,获取key值等,过程中需要提供应用的签名,下面介绍一下签名的使用. 1. 为什么要签名? 发送者的 ...
android 手写签批_Android自定义实现手写签名功能
一.Android自定义View步骤 : 自定义属性: 选择和设置构造方法: 重写onMeasure()方法: 重写onDraw()方法: 重写onLayout()方法: 重写其他事件的方法(滑动监听 ...
微信小程序JSAPI支付和微信APP支付二次签名
如果之前开发过微信的东西,你能看明白微信官方提供的文档,其实实现这两个功能真的并不难! 难就难在,明明已经按照官方提供的文档写好程序,为什么就会提示这样那样的错误呢? 百度了一下,很多人都说这是微信官 ...
在app端手写签名并保存下来（以文件形式或者是base64编码）
最近做的项目有个需求,在app端手写签名的并保存为文件或者base64编码.所以就刚好有时间写了一下并记录下来: 先上效果图: 分析思路:因为这里是要获取手势轨迹并画出来,所以肯定是有个Touch事件 ...

uni-app在线签名功能，签名生成图片，转base64工具

uni-app在线签名功能，签名生成图片，转base64工具相关推荐

最新文章

热门文章