uni |
您所在的位置：网站首页 › 微信文件怎样签名 › uni |
uni
|
一、实际应用场景 电子签名软件应用场景：电子签名在金融、银行、贷款行业中可以用于对内日常办公流转的文档的盖章签字，对外涉及业务合作协议，采购合同，贷款申请、信用评估、贷款合同、贷款文件表、说明函等等。 可以说，只要是涉及纸质文档签字盖章的场景，都能够使用电子印章，电子签名。 二、实现方式 利用 canvas 画布，模拟人工在纸张上手写的笔迹。原理其实很简单，就是你在画布上任意涂写即可，最后保存整个画布区域的内容为图片。 三、案例 demo 分享 这里我加了几个操作按钮，应该能满足您基本的数字签名需要了，最后我也会贴上我的源码。 ps：微信小程序关于画布的官方文档 developers.weixin.qq.com/miniprogram… 1、先在 view 视图中添加 canvas 组件。 复制代码canvas-id="handWriting" 是唯一标识一个 canvas，用于后续获取 Canvas 对象。 2、页面加载时，初始化 canvas onLoad() { let canvasName = this.canvasName; let ctx = wx.createCanvasContext(canvasName); this.ctx = ctx; var query = wx.createSelectorQuery(); query .select('.handCenter') .boundingClientRect(rect => { this.canvasWidth = rect.width; this.canvasHeight = rect.height; /* 将canvas背景设置为 白底，不设置 导出的canvas的背景为透明 */ this.setCanvasBg('rgba(0,0,0,0)'); }) .exec(); }, 复制代码3、笔迹开始，移动，结束，还有底部预览，重写，保存，上传等附加操作按钮。 完成页面代码如下，包含我的效果图样式。 重写 保存 预览 上传 完成 返回 请签名 export default { data() { return { canvasName: 'handWriting', ctx: '', canvasWidth: 0, canvasHeight: 0, transparent: 1, // 透明度 selectColor: 'black', lineColor: '#1A1A1A', // 颜色 lineSize: 1.5, // 笔记倍数 lineMin: 0.5, // 最小笔画半径 lineMax: 4, // 最大笔画半径 pressure: 1, // 默认压力 smoothness: 60, //顺滑度，用60的距离来计算速度 currentPoint: {}, currentLine: [], // 当前线条 firstTouch: true, // 第一次触发 radius: 1, //画圆的半径 cutArea: { top: 0, right: 0, bottom: 0, left: 0 }, //裁剪区域 bethelPoint: [], //保存所有线条 生成的贝塞尔点； lastPoint: 0, chirography: [], //笔迹 currentChirography: {}, //当前笔迹 linePrack: [] //划线轨迹 , 生成线条的实际点 }; }, onLoad() { let canvasName = this.canvasName; let ctx = wx.createCanvasContext(canvasName); this.ctx = ctx; var query = wx.createSelectorQuery(); query .select('.handCenter') .boundingClientRect(rect => { this.canvasWidth = rect.width; this.canvasHeight = rect.height; /* 将canvas背景设置为 白底，不设置 导出的canvas的背景为透明 */ this.setCanvasBg('rgba(0,0,0,0)'); }) .exec(); }, methods: { // 笔迹开始 uploadScaleStart(e) { if (e.type != 'touchstart') return false; let ctx = this.ctx; ctx.setFillStyle(this.lineColor); // 初始线条设置颜色 ctx.setGlobalAlpha(this.transparent); // 设置半透明 let currentPoint = { x: e.touches[0].x, y: e.touches[0].y }; let currentLine = this.currentLine; currentLine.unshift({ time: new Date().getTime(), dis: 0, x: currentPoint.x, y: currentPoint.y }); this.currentPoint = currentPoint; // currentLine if (this.firstTouch) { this.cutArea = { top: currentPoint.y, right: currentPoint.x, bottom: currentPoint.y, left: currentPoint.x }; this.firstTouch = false; } this.pointToLine(currentLine); }, // 笔迹移动 uploadScaleMove(e) { if (e.type != 'touchmove') return false; if (e.cancelable) { // 判断默认行为是否已经被禁用 if (!e.defaultPrevented) { e.preventDefault(); } } let point = { x: e.touches[0].x, y: e.touches[0].y }; //测试裁剪 if (point.y < this.cutArea.top) { this.cutArea.top = point.y; } if (point.y < 0) this.cutArea.top = 0; if (point.x > this.cutArea.right) { this.cutArea.right = point.x; } if (this.canvasWidth - point.x this.cutArea.bottom) { this.cutArea.bottom = point.y; } if (this.canvasHeight - point.y 2) { var info = (currentLine[0].time - currentLine[currentLine.length - 1].time) / currentLine.length; //$("#info").text(info.toFixed(2)); } //一笔结束，保存笔迹的坐标点，清空，当前笔迹 //增加判断是否在手写区域； this.pointToLine(currentLine); var currentChirography = { lineSize: this.lineSize, lineColor: this.lineColor }; var chirography = this.chirography; chirography.unshift(currentChirography); this.chirography = chirography; var linePrack = this.linePrack; linePrack.unshift(this.currentLine); this.linePrack = linePrack; this.currentLine = []; }, retDraw() { this.ctx.clearRect(0, 0, 700, 730); this.ctx.draw(); //设置canvas背景 this.setCanvasBg('rgba(0,0,0,0)'); }, //画两点之间的线条；参数为:line，会绘制最近的开始的两个点； pointToLine(line) { this.calcBethelLine(line); return; }, //计算插值的方式； calcBethelLine(line) { if (line.length { wx.canvasToTempFilePath({ canvasId: 'handWriting', fileType: 'png', quality: 1, //图片质量 success(res) { // console.log(res.tempFilePath, 'canvas生成图片地址'); wx.showToast({ title: '执行了吗？' }); cb(res.tempFilePath); } }); }); }, //完成 subCanvas() { this.ctx.draw(true, () => { wx.canvasToTempFilePath({ canvasId: 'handWriting', fileType: 'png', quality: 1, //图片质量 success(res) { // console.log(res.tempFilePath, '已完成，canvas生成图片地址'); // wx.showToast({ // title: '已保存' // }); //保存到系统相册 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success(res) { console.log("已完成并保存到相册"); wx.showToast({ title: '已成功保存到相册', duration: 2000 }); } }); } }); }); }, //保存到相册 saveCanvasAsImg() { /* this.canvasToImg( tempImgPath=>{ // console.log(tempImgPath, '临时路径'); wx.saveImageToPhotosAlbum({ filePath: tempImgPath, success(res) { wx.showToast({ title: '已保存到相册', duration: 2000 }); } }) } ); */ wx.canvasToTempFilePath({ canvasId: 'handWriting', fileType: 'png', quality: 1, //图片质量 success(res) { // console.log(res.tempFilePath, 'canvas生成图片地址'); wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success(res) { wx.showToast({ title: '已保存到相册', duration: 2000 }); } }); } }); }, //预览 previewCanvasImg() { wx.canvasToTempFilePath({ canvasId: 'handWriting', fileType: 'jpg', quality: 1, //图片质量 success(res) { // console.log(res.tempFilePath, 'canvas生成图片地址'); wx.previewImage({ urls: [res.tempFilePath] //预览图片 数组 }); } }); /* //移动端出不来 ^~^！！ this.canvasToImg( tempImgPath=>{ wx.previewImage({ urls: [tempImgPath], //预览图片 数组 }) } ); */ }, //上传 uploadCanvasImg() { wx.canvasToTempFilePath({ canvasId: 'handWriting', fileType: 'png', quality: 1, //图片质量 success(res) { console.log(res.tempFilePath, '待上传服务器canvas生成图片地址'); //上传 wx.uploadFile({ url: 'https://xxx/uploadSignFile', // 仅为示例，非真实的接口地址 filePath: res.tempFilePath, name: 'file_signature', formData: { user: 'test' }, success(res) { if (res.code == 1 ) { wx.showToast({ title: '上传成功', duration: 2000 }); }else{ uni.showToast({ title: res.message, icon: "none", position: 'bottom', duration: 3000 }); } } }); } }); }, //设置canvas背景色 不设置 导出的canvas的背景为黑色 //@params：字符串 color setCanvasBg(color) { /* 将canvas背景设置为 白底，不设置 导出的canvas的背景默认为黑色 */ //rect() 参数说明 矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度 //这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写 this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4); this.ctx.setFillStyle(color); this.ctx.fill(); //设置填充 this.ctx.draw(); //开画 }, //返回 back(){ uni.reLaunch({ url:'/pages/ucenter/ucenter' }) } } }; page { background: #fbfbfb; height: auto; overflow: hidden; } .wrapper { width: 100%; height: 95vh; margin: 30rpx 0; overflow: hidden; display: flex; align-content: center; flex-direction: row; justify-content: center; font-size: 28rpx; } .handWriting { background: #fff; width: 100%; height: 95vh; } .handRight { display: inline-flex; align-items: center; } .handCenter { border: 4rpx dashed #e9e9e9; flex: 5; overflow: hidden; box-sizing: border-box; } .handTitle { transform: rotate(90deg); flex: 1; color: #666; } .handBtn button { font-size: 28rpx; } .handBtn { height: 95vh; display: inline-flex; flex-direction: column; justify-content: space-between; align-content: space-between; flex: 1; } .delBtn { position: absolute; top: 250rpx; left: 0rpx; transform: rotate(90deg); color: #666; } .delBtn image { position: absolute; top: 13rpx; left: 25rpx; } .subBtn { position: absolute; bottom: 52rpx; left: -3rpx; display: inline-flex; transform: rotate(90deg); background: #008ef6; color: #fff; margin-bottom: 30rpx; text-align: center; justify-content: center; } /*Peach - 新增 - 保存*/ .saveBtn { position: absolute; top: 375rpx; left: 0rpx; transform: rotate(90deg); color: #666; } .previewBtn { position: absolute; top: 500rpx; left: 0rpx; transform: rotate(90deg); color: #666; } .uploadBtn { position: absolute; top: 625rpx; left: 0rpx; transform: rotate(90deg); color: #666; } /*Peach - 新增 - 保存*/ .black-select { width: 60rpx; height: 60rpx; position: absolute; top: 30rpx; left: 25rpx; } .black-select.color_select { width: 90rpx; height: 90rpx; top: 100rpx; left: 10rpx; } .red-select { width: 60rpx; height: 60rpx; position: absolute; top: 140rpx; left: 25rpx; } .red-select.color_select { width: 90rpx; height: 90rpx; top: 120rpx; left: 10rpx; } 复制代码代码中都有注释说明，希望能帮助到需要的小伙伴。具体api细节 不懂的还请自行查阅官方文档说明。 写在最后，小编是一个注重解决实际问题的博主，日常分享案例皆是工作中的实际项目背景。喜欢博主案例分享的可以给博主的文章来个点赞、收藏、加关注。 |
【本文地址】