uniapp+canvas实现app在线电子签名

项目基于uniapp做的app端，需要实现在线签名功能，找了很多文档学习参考，特此记录。

template中，

<view class="onevalue">// 展示签好的图片<view class="clickimg" v-for="(item, index) in samplerSignList"><image :src="item" class="qmimg" @click="previewImage(item)"></image><image src="../../static/images/delimg.png" class="delimg" @click="delQmimg(1, index)"></image></view>//点击签名部分<view class="clickQm" @click="createCanvas(1)"><image src="../../static/images/qm.png"></image><text class="clickQm_text">点击签名</text></view></view><!-- 签名弹窗 --><uni-popup ref="qmPopup" background-color="#fff" type="bottom"><view class="popupheight"><view class="qmpopup_title">签字<image src="/static/images/false.png" class="qmpopup_false" @click="closeQmPopup"></image></view><view class="qmpopup_cont"><canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas></view><!-- 底部操作按钮 --><view class="qmpopup_footer"><view class="left" @click="clear">重置</view><view class="right" @click="finish">确定</view></view></view></uni-popup>

script中，需要引入base64位图像路径转换方法

<script>const api = require('@/utils/api.js');const util = require("@/utils/util.js");// 需要引入图片路径base64转换方法，方法可以直接网上搜import { pathToBase64, base64ToPath } from '@/js_sdk/mmmm-image-tools/index.js'export default {data() {return {//绘图图像ctx: '', //路径点集合points: [], hasSign: false,signType: 1,samplerSignList: [],showOrNot: true, // 判断查看图片等事件触发onshow}},methods: {// 签名createCanvas(type) {this.signType = type;this.$refs.qmPopup.open();//创建绘图对象this.ctx = uni.createCanvasContext('mycanvas', this);//设置画笔样式this.ctx.lineWidth = 4;this.ctx.lineCap = 'round';this.ctx.lineJoin = 'round';/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */this.$nextTick(() => {uni.createSelectorQuery().select('.qmpopup_cont').boundingClientRect((rect) => {this.ctx.rect(0, 0, rect.width, rect.height - 4);this.ctx.setFillStyle('#fff');this.ctx.fill(); //设置填充this.ctx.draw(); //开画}).exec()})},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(); //绘制路径}},touchend() {this.points = [];},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.setFillStyle('#ffffff');this.ctx.draw(true);this.hasSign = true;},clear() {this.hasSign = false;let that = this;uni.getSystemInfo({success: function(res) {let canvasw = res.windowWidth;let canvash = res.windowHeight;that.ctx.clearRect(0, 0, canvasw, canvash);/* 清除后重新设置m将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */that.$nextTick(() => {uni.createSelectorQuery().select('.qmpopup_cont').boundingClientRect((rect) => {that.ctx.rect(0, 0, rect.width, rect.height - 4);that.ctx.setFillStyle('#fff');that.ctx.fill(); //设置填充that.ctx.draw(); //开画}).exec()})}});},finish() {if (!this.hasSign) {uni.showToast({title: '签名为空不能保存',icon: 'none',duration: 2000})return}let that = this;uni.canvasToTempFilePath({canvasId: 'mycanvas',success: function(res) {if(!res || !res.tempFilePath) {//这里的res.tempFilePath就是生成的签字图片if(that.signType == 1) {that.samplerSignList.push(res.tempFilePath);} else {that.companySignList.push(res.tempFilePath);}that.closeQmPopup();}else{//用来解决安卓真机获取到的是canvas图片的临时路径，转成base64格式pathToBase64(res.tempFilePath).then(re => {if(that.signType == 1) {that.samplerSignList.push(re);} else {that.companySignList.push(re);}that.closeQmPopup();})}}});},closeQmPopup() {this.clear();this.$refs.qmPopup.close();},previewImage(url) {uni.previewImage({urls: [url],  current: 0  });},delQmimg(type, num) {if(type == 1) {this.samplerSignList.splice(num, 1);} else {this.companySignList.splice(num, 1);}},}

效果：签名的时候和查看的时候，注意要设置画布背景为白色，不然签名是黑色的看不见

uniapp+canvas实现app在线电子签名相关推荐

uniapp使用canvas完成手写电子签名
uniapp使用canvas完成手写电子签名效果 <template><view ><canvas class="mycanvas" canvas- ...
uniapp h5、app引用外部在线js
uniapp h5.app引用外部在线js 1. H5 在app.vue var script = document.createElement('script'); script.src = &qu ...
uniapp 小程序 APP 实现手写板签名画图 canvas 保存为图片格式
文章目录 uniapp 小程序 APP 实现手写板签名画图 canvas 保存为图片格式一.手写板 1.H5代码 2.JS代码总结 uniapp 小程序 APP 实现手写板签名画图 can ...
在线签名、canvas手写在线签名——小程序端实现在线签名，手写电子签名canvas
在线签名.canvas手写在线签名--小程序端实现在线签名,手写电子签名canvas 近期公司准备接一个政府的小项目,里头有一个在线签名的需求,老板让我研究一下.于是就...开始思考: 在线手写签名, ...
五款移动APP在线原型设计工具，值得收藏
今天已到2014年的最后一天了,25学堂还是一无既往的为大家提供最优质最简单通俗的移动APP设计资源和移动APP设计干货. 25学堂整理了国内外4个比较操作易上手的移动APP在线原型设计工具推荐给大家 ...
uni-app微信小程序登录；uni-app微信登录小程序；uni-app微信登录app；
思路: 通过uni-app文档可知:实现微信登录,无论是app还是小程序,都需要唯一标识openid,然后通过openid取掉后端的登录接口,获取cookie然后做登录跳转: [-[-[必须先调用微信 ...
uniapp打包的app上架应用商店隐私政策：您的应用在用户同意隐私政策前申请获取用户个人信息
uniapp打包的app上架应用商店需要在进入app前弹出隐私政策框 app在上架应用商店的时候要验证是否在进入应用前有隐私政策的弹窗,因为最近自己app在华为应用商店,由于没有这个隐私政策弹窗导致下 ...
在线APP设计平台，APP在线开发工具有哪些？
在移动互联网时代,我们需要为自己的产品或服务创建一个APP.但是在人力,时间和金钱成本上面临许多障碍.这时我们该怎么办呢?在线APP设计平台解决你这些困扰!!现在进入移动市场不再需要成千上万的资金,也 ...
高效的APP在线制作平台，让梦想轻松孵化器
高效的APP在线制作平台,让梦想轻松孵化器似乎是在一夜之间,移动互联网时代已经悄然而至.借着时代的东风,国家吹响大众创业.万众创新的号角.有人在淘宝开店,有人兼职做了微商,可是要在数以百万计的竞争对 ...

uniapp+canvas实现app在线电子签名

uniapp+canvas实现app在线电子签名相关推荐

最新文章

热门文章