uniapp+canvas实现app在线电子签名 |
您所在的位置：网站首页 › 制作电子签名app › uniapp+canvas实现app在线电子签名 |
uniapp+canvas实现app在线电子签名
|
项目基于uniapp做的app端，需要实现在线签名功能，找了很多文档学习参考，特此记录。 template中， // 展示签好的图片 //点击签名部分 点击签名 签字 重置 确定script中，需要引入base64位图像路径转换方法 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); } }, }效果：签名的时候和查看的时候，注意要设置画布背景为白色，不然签名是黑色的看不见
|
【本文地址】
今日新闻 |
推荐新闻 |