最终结果如图所示：
注意：这里使用了两个canvas，所以有关canvas的配置要配置两个。利用具体实现代码如下。利用wx.canvasToTempFilePath生成canvas图片时，记得fileType为'png',这样生成图片背景色为透明色，以适应安卓机生成图片背景色为黑色的问题。
<van-tabs active="{{ active }}" animated color="#007EFF" tab-active-class='tab-active' bind:disabled="onClickDisabled"> <van-tab title="拍照上传"></van-tab> <van-tab title="手动填写" disabled></van-tab> </van-tabs> <view class="box-top" wx:if='{{careData}}'> <view class="apply-detail-title"> <text class="apply-detail-title-status">订单状态：{{statusDisplay}}</text> <text bindtap="handleService">查看服务详情</text> </view> <view class="default-box care-header-box"> <view class="left-img"> <image src="{{careData.subOrderVo.serviceItemImg}}"></image> </view> <view class="right-text"> <text class="title">{{careData.subOrderVo.serviceNameDisplay}}</text> <text class="title-26">长护险居家</text> </view> </view> <view class="bottom-200" wx:if='{{status&&status==="LOG_WITH_EVALUATE"}}'> <uploads-img bind:getUploaderList="getUploaderList" uploaderNum="{{5-uploaderNowNum}}" uploaderList='{{uploaderList}}' title='居家护理日志上传' chooseSelf='{{false}}' desc='生命体征测量、生活护理、其他、家属评价等。'></uploads-img> <view class='container'> <view class="i-title justify-flex"><text class="title">护工签名</text><text class="clear-btn" bindtap="cleardraw" data-index='{{1}}'>清空</text></view> <canvas class="canvas" id="canvas" canvas-id="canvas1" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback" data-index='{{1}}'> </canvas> <view class="i-title justify-flex"><text class="title">家属签名</text><text class="clear-btn" bindtap="cleardraw" data-index='{{2}}'>清空</text></view> <canvas class="canvas" id="canvas" canvas-id="canvas2" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback" data-index='{{2}}'> </canvas> </view> </view> <view class="bottom-200" wx:if='{{status&&status!=="LOG_WITH_EVALUATE"}}'> <view class="title i-title">居家护理日志上传</view> <view class="log-img-box"> <i-caseImgs urls='{{uploaderList}}' type='{{false}}'></i-caseImgs> </view> <view class="title i-title">护工签名</view> <image class="canvas" src="{{nurserSignImg}}"></image> <view class="title i-title">家属签名</view> <image class="canvas" src="{{familySignImg}}"></image> </view> </view> <commit-btn title="完成" bind:commit='handleFinish' wx:if='{{status==="LOG_WITH_EVALUATE"}}'></commit-btn> <police></police> /* pages/inquiryDetail/index.wxss */ .box-top { height: 190rpx; position: relative; background: #007DFE; padding-top: 20rpx; margin-top: 2rpx; } .apply-detail-title { font-size: 26rpx; color: rgba(255, 255, 255, 1); margin: 0 20rpx 20rpx 20rpx; display: flex; justify-content: space-between; align-items: center; } .apply-detail-title-status { font-size: 34rpx; font-weight: 600; } .canvas { width: 690rpx; height: 300rpx; background: rgba(232, 232, 232, 1); box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.08); border-radius: 16px; margin: 0 30rpx; } .clear-btn { font-size: 26rpx; color: rgba(0, 126, 255, 1); } .left-img { width: 226rpx; height: 120rpx; margin-right: 20rpx; } .care-header-box { display: flex; justify-content: flex-start; } .right-text { display: flex; justify-content: space-evenly; flex-direction: column; flex: 1; } .log-img-box { margin: 0 20rpx; padding: 0 20rpx 20rpx 20rpx; border-radius: 16rpx; background: rgba(255, 255, 255, 1); box-shadow: 0 0 30rpx 0 rgba(0, 0, 0, 0.1); } var app = getApp() // canvas 全局配置 var isButtonDown = false; var nurseArrx = []; var nurseArry = []; var nurseArrz = []; var familyArrx = []; var familyArry = []; var familyArrz = []; var canvasw = 0; var canvash = 0; Page({ /** * 页面的初始数据 */ data: { role: '', active: 0, uploaderList: [], lciSubOrderLogInfoList: [], uploaderNowNum: 0, nurseSign: null, familySign: null, nurseArrx: [], nurseArry: [], nurseArrz: [], familyArrz: [], familyArrx: [], familyArrY: [], statusMap: { WATING_SURE: '待确定', WATING_VISIT: '待出诊', WATING_ARRIVE: '待到达', SERVICING: '服务中', LOG_WITH_EVALUATE: '日志与评价', FINISH: '已完成' }, status: '', statusDisplay: '', nurserSignImg: '', familySignImg: '', isNurseStart: false, isFamilyStart: false }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ role: wx.getStorageSync('role') }) let nurseSign = this.init('canvas1') let familySign = this.init('canvas2') this.setData({ nurseSign, familySign, hospitalDeptId: options.hospitalDeptId, subOrderId: options.subOrderId }) }, /** * 生命周期函数--监听页面显示 */ onShow: function () { this.handleDetail() }, // 点击保存图片 handleSaveSign() { let that = this this.setData({ lciSubOrderLogInfoList: [] }) let p1, p2 wx.canvasToTempFilePath({ canvasId: 'canvas1', fileType: 'png', success: function (res) { that.setData({ nurserSignImg: res.tempFilePath }), p1 = new Promise((res1, rej1) => { that.uploadImage(res.tempFilePath, res1, 'NURSE_SIGN') }) } }) wx.canvasToTempFilePath({ canvasId: 'canvas2', fileType: 'png', success: function (res) { that.setData({ familySignImg: res.tempFilePath }), p2 = new Promise((res1, rej1) => { that.uploadImage(res.tempFilePath, res1, 'FAMILY_MEMBER_SIGN') }) } }) return Promise.all([p1, p2]) }, uploadLocalImgs() { var uploaderList = this.data.uploaderList; //原数据 var proArr = [] for (let i = 0; i < uploaderList.length; i++) { var pro = new Promise((res1, rej1) => { this.uploadImage(uploaderList[i], res1, 'HOME_CARE_LOG') }) proArr.push(pro) } return Promise.all(proArr) }, handleFinish() { let that = this wx.showLoading({ title: '加载中...', mask: true }) that.handleSaveSign().then(() => { if (that.data.uploaderList.length && that.data.isNurseStart && that.data.isFamilyStart) { wx.hideLoading() wx.showModal({ content: '您确认完成吗？', confirmColor: '#007eff', mask:true, success(res) { if (res.confirm) { that.uploadLocalImgs().then(() => { that.handleChangeStatus() }) } else if (res.cancel) { console.log('用户点击取消') } } }) } else { wx.hideLoading() wx.showToast({ title: '请完善信息', icon: 'none' }) } }) }, handleChangeStatus() { let that = this wx.showLoading({ title: '加载中...', mask: true }) let data = { id: this.data.subOrderId, status: 'FINISH', lciSubOrderLogInfoList: this.data.lciSubOrderLogInfoList } console.log('data', data) app.http.post(`/cl-hospital-ihospital/ihospital/lci/sub/orders/records/record`, data).then(res => { wx.hideLoading() that.handleDetail() }) }, handleDetail() { wx.showLoading({ title: '加载中...', mask: true }) app.http.get(`/cl-hospital-ihospital/ihospital/lci/sub/orders/records/record?hospitalDeptId=${this.data.hospitalDeptId}&subOrderId=${this.data.subOrderId}`).then(res => { let status = res.data.subOrderVo.subOrder.serviceStatus this.setData({ careData: res.data, status, statusDisplay: this.data.statusMap[status] }) let imgJson = res.data.subOrderVo.subOrder.imgJson let nurserSignImg = imgJson.filter(it => it.imageType === 'NURSE_SIGN').map(item => item.imgUrl) let familySignImg = imgJson.filter(it => it.imageType === 'FAMILY_MEMBER_SIGN').map(item => item.imgUrl) if (imgJson.length) { this.setData({ uploaderList: imgJson.filter(it => it.imageType === 'HOME_CARE_LOG').map(item => item.imgUrl), nurserSignImg: nurserSignImg.join(','), familySignImg: familySignImg.join(',') }) } wx.hideLoading() wx.stopPullDownRefresh() }) }, handleService() { wx.redirectTo({ url: `/pages/care/careDetail/index?hospitalDeptId=${this.data.hospitalDeptId}&subOrderId=${this.data.subOrderId}` }) }, //获取上传图片 getUploaderList(e) { this.setData({ uploaderList: e.detail.uploaderList, uploaderNowNum: e.detail.uploaderNowNum }) }, /** * 上传图片获取地址 */ uploadImage(tempFilePath, callBack, type) { var that = this wx.showLoading({ title: '加载中...', mask: true }) console.log('tempFilePath', tempFilePath) app.http.get(`/cl-system/medias/uploadToken?mimeType=image/jpeg&type=IMAGE`).then(result => { wx.uploadFile({ url: 'https://up.qbox.me/', filePath: tempFilePath, name: 'file', formData: { 'token': result.data.token, 'key': result.data.fileName }, success: function (res) { var data = res.data that.data.lciSubOrderLogInfoList.push({ imageType: type, imgUrl: result.data.fileUrl }) callBack() }, complete: function (res) { console.log('res', res) wx.hideLoading() } }) }).catch(res=>{ wx.hideLoading() }) }, onClickDisabled() { wx.showToast({ title: '暂未开放', }) }, init(canvas) { // 使用 wx.createContext 获取绘图上下文 context let context = wx.createCanvasContext(canvas); context.beginPath() context.setStrokeStyle('#000000'); context.setLineWidth(4); context.setLineCap('round'); context.setLineJoin('round'); context.draw(); return context }, canvasIdErrorCallback: function (e) { console.error(e.detail.errMsg) }, //开始 canvasStart: function (e) { isButtonDown = true let index = e.target.dataset.index if (index === 1) { nurseArrz.push(0) nurseArrx.push(e.changedTouches[0].x) nurseArry.push(e.changedTouches[0].y) this.setData({ isNurseStart: true }) } else { familyArrz.push(0) familyArrx.push(e.changedTouches[0].x) familyArry.push(e.changedTouches[0].y) this.setData({ isFamilyStart: true }) } }, //过程 canvasMove: function (e) { let index = e.target.dataset.index let context = index === 1 ? this.data.nurseSign : this.data.familySign if (index === 1) { if (isButtonDown) { nurseArrz.push(1); nurseArrx.push(e.changedTouches[0].x); nurseArry.push(e.changedTouches[0].y); } for (var i = 0; i < nurseArrx.length; i++) { if (nurseArrz[i] == 0) { context.moveTo(nurseArrx[i], nurseArry[i]) } else { context.lineTo(nurseArrx[i], nurseArry[i]) } } } else { if (isButtonDown) { familyArrz.push(1); familyArrx.push(e.changedTouches[0].x); familyArry.push(e.changedTouches[0].y); } for (var i = 0; i < familyArrx.length; i++) { if (familyArrz[i] == 0) { context.moveTo(familyArrx[i], familyArry[i]) } else { context.lineTo(familyArrx[i], familyArry[i]) } } } context.clearRect(0, 0, canvasw, canvash); context.setStrokeStyle('#000000'); context.setLineWidth(4); context.setLineCap('round'); context.setLineJoin('round'); context.stroke(); context.draw(false); }, canvasEnd: function (e) { isButtonDown = false; }, cleardraw: function (e) { let index = e.target.dataset.index let context = index === 1 ? this.data.nurseSign : this.data.familySign if (index === 1) { //清除画布 nurseArrx = []; nurseArry = []; nurseArrz = []; context.draw(false); this.setData({ isNurseStart: false }) } else { //清除画布 familyArrx = []; familyArry = []; familyArrz = []; context.draw(false); this.setData({ isFamilyStart: false }) } }, onUnload() { isButtonDown = false nurseArrx = [] nurseArry = [] nurseArrz = [] familyArrx = [] familyArry = [] familyArrz = [] canvasw = 0 canvash = 0 }, onPullDownRefresh(){ this.handleDetail() } }) { "usingComponents": { "uploads-img": "/component/uploads-img/index", "commit-btn": "/component/commit-btn/index", "van-tab": "/miniprogram_npm/@vant/weapp/tab/index", "van-tabs": "/miniprogram_npm/@vant/weapp/tabs/index", "i-caseImgs": "/component/case-imgs/index" }, "navigationBarTitleText": "护理订单详情", "enablePullDownRefresh": true, "onReachBottomDistance": 50 }
