微信小程序电子签名实现 |
您所在的位置：网站首页 › 微信pdf签字 › 微信小程序电子签名实现 |
微信小程序电子签名实现
|
实现签名方法就是使用canvas 重新签名 完成在canvas上绑定手指点击事件和移动事件: 上图是想要实现的效果， 有几个考虑的点: 1、签字区域和按钮都是横屏显示的,这个首先想到的使用微信小程序的方法直接在json文件设置"pageOrientation":"landscape"，但效果是整个屏幕横屏，标题也横，效果不同。只能通过css方法旋转实现按钮横屏展示 2、签字区域有个占位符，签字的时候需要去除，首先想到的是用个view去占位，然后点击切换为canvas，但是个人觉的略显刻意，就用canvas来旋转实现，bindtouchstart时让文字为空，这样也多了一个设置默认文字的函数 3、生成图片，在使用wx.canvasToTempFilePath({})的时候发现生成的图片也是反着的，这里用了一个笨方法，添加一个canvas来单独处理图片旋转 //index.js //获取应用实例 const app = getApp() Page({ data: { context: null, index: 0, height: 0, width: 0, writeTips: '请清晰书写您的英文签名', writeTipsTrue: true, src:'', sureBtn:false, saveContext:null }, /**记录开始点 */ bindtouchstart: function (e) { let { writeTipsTrue } = this.data if (writeTipsTrue) { this.data.context.clearRect(0, 0, this.data.width, this.data.height); this.setData({ writeTipsTrue: false, sureBtn:true }) } this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y) }, /**记录移动点，刷新绘制 */ bindtouchmove: function (e) { this.data.context.setLineWidth(2) // 设置线条宽度 this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y); this.data.context.stroke(); this.data.context.draw(true); this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y); }, /**清空画布 */ clear () { let context = this.data.context this.setData({ writeTipsTrue: true, sureBtn:false }) context.clearRect(0, 0, this.data.width, this.data.height); // this.data.saveContext.clearRect(0, 0, this.data.height, this.data.width); context.save(); context.setTransform(1, 0, 0, 1, Math.ceil(this.data.width / 2), 155); // 旋转画布 默认文字区域 context.rotate(Math.PI / 2); let str = this.data.writeTips; context.setFontSize(24) context.setFillStyle('#ADADB2'); context.fillText(str, 0, 0) context.restore(); context.draw() }, /**导出图片 */ export () { const that = this; let signImg; wx.canvasToTempFilePath({ x: 0, y: 0, width: that.data.width, height: that.data.height, destWidth: that.data.width, destHeight: that.data.height, canvasId: 'firstCanvas', success (res) { console.log(res.tempFilePath) signImg = res.tempFilePath that.setData({ src1: signImg}) //下载图片 wx.getImageInfo({ src: signImg, // 签字画布生成的暂存地址 success (res) { // canvas绘制图片需要下载图片或者getImageInfo console.log(res,'res'); let rototalImg = res.path that.setData({ src: rototalImg}) if (rototalImg) { // 单独处理图片旋转 that.saveImg(rototalImg) } } }) } }) }, // drew img saveImg (signImg){ if (!this.data.sureBtn){ app.toast(this, { type: 'text', text: '请清晰书写您的英文签名' }) return } // 旋转图 let that = this const context = wx.createCanvasContext('saveImg'); this.setData({saveContext:context}) context.translate(that.data.width / 2, that.data.height / 2) context.setTransform(1, 0, 0, 1, 0, Math.ceil(that.data.height / 2) -20); context.rotate(-Math.PI / 2) // context.drawImage(signImg, -that.data.width / 2, -that.data.height / 2, that.data.width, that.data.height) context.drawImage(signImg, 0, 0, that.data.width, that.data.height) // context.fill() //绘制图片 生成图片函数写在draw（）的回调中，不然会出现还没有画图就生成图片的问题 context.draw(true,()=>{ wx.canvasToTempFilePath({ x: 0, y: 0, width: that.data.height, height: that.data.width, destWidth: that.data.height, destHeight: that.data.width, canvasId: 'saveImg', fileType: 'png', success: function (res) { var tempFilePath = res.tempFilePath; console.log(tempFilePath); that.setData({ src: tempFilePath }) // 生成图片 并返回上一页 赋值 let curPages = getCurrentPages(); var prevPage = curPages[curPages.length - 2] prevPage.setData({ signImg: tempFilePath, }) wx.navigateBack({ delta: 1 }); }, fail: function (res) { console.log(res); } }); }) }, onLoad: function (options) { }, onShow: function () { // 进入页面渲染canvas let query = wx.createSelectorQuery(); const that = this; let context query.select('#firstCanvas').boundingClientRect(); query.exec(function (rect) { let width = rect[0].width; let height = rect[0].height; that.setData({ width, height }); const context = wx.createCanvasContext('firstCanvas') that.setData({ context: context }) context.save(); // context.translate(Math.ceil(width / 2) - 20,0) context.setTransform(1, 0, 0, 1, Math.ceil(width / 2), 155); context.rotate(Math.PI / 2); let str = that.data.writeTips; // context.fillText(str, Math.ceil((width - contexasureText(str).width) / 2), Math.ceil(height / 2) - 20) context.setFontSize(24) context.setFillStyle('#ADADB2'); // context.fillRect(0, 0, that.data.height, that.data.width); context.fillText(str, 0, 0) context.restore(); context.draw() }); }, // 弹窗 onToast(){ app.toast(this, { type: 'text', text: '生成成功' }) }, onShareAppMessage: (res) => { } })相关注释代码中都有，也么有优化，有好的方法，还希望大佬们多多指点 |
【本文地址】
今日新闻 |
推荐新闻 |