微信小程序在线签名-支持-上传-图片base64-旋转图片

// drc/storelearn/storelearn.js const app = getApp() const utils = require('../../utils/util.js') Page({ /** * 页面的初始数据 */ data: { context: null, index: 0, height: 0, width: 0, writeTips: '', writeTipsTrue: true, src: '', sureBtn: false, saveContext: null, buildingid: wx.getStorageSync('currentBuildingid'), isLoading:0, }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { }, /** * 生命周期函数--监听页面显示 */ onShow() { // 进入页面渲染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 - context.measureText(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() }); }, onUnload() { }, /**记录开始点 */ 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; if(that.data.isLoading==1){ wx.showToast({ title: '亲，请求太频繁了，请稍后再试', }) return; } that.data.isLoading=1; 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) } } }) } }) }, saveImg(signImg) { if (!this.data.sureBtn) { app.toast(this, { type: 'text', text: '请清晰书写您的签名' }) return } // 旋转图 var 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 }) //上传图片 that.uploadimg(tempFilePath); }, fail: function (res) { console.log(res); } }); }) }, /** * 图片上传 */ uploadimg: function (filepath) { let that = this; wx.uploadFile({ url: `${app.globalData.api.gateway}ApiDownLoad/${that.data.buildingid}/api/upload/${app.globalData.fileappid}`, filePath: filepath, name: "file", //这里根据自己的实际情况改 formData: null, //这里是上传图片时一起上传的数据 success: (resp) => { let res = JSON.parse(resp.data); //返回的数据没有使用json序列化 这里需要在处理一下 if (res.success) { that.data.isLoading==0; that.savePath(res.data); } }, fail: (res) => {}, complete: () => { }, }); }, //保存上传地址 savePath(path){ const that = this let data = { accounttype:'tenant', signcontent:path, } wx.showLoading({ title: '请求中', mask: true }) that.data.isLoading=1; utils.authpostresuest(`${app.globalData.api.gateway}ApiTenant/${that.data.buildingid}/api/AccountSign/Standard/Save`,data, function (res) { wx.showToast({ title: '亲，签名成功', }) // 生成图片 并返回上一页 赋值 let curPages = getCurrentPages(); var prevPage = curPages[curPages.length - 2] prevPage.setData({ backPic:'ok', }) setTimeout(()=>{ that.data.isLoading=0; wx.navigateBack({ delta: 1 }); },1500); }, function (res) { that.data.isLoading=0; console.error(res) utils.showmessage(res.data?.msg || '服务器异常，请稍后再试') }, function () { that.data.isLoading=0; wx.hideLoading() }) }, myCourse() { wx.navigateTo({ url: `/drc/myCourse/myCourse`, }) }, })