小程序使用canvas繪畫、簽名。wx.canvasToTempFilePath安卓機生成圖片背景色爲黑色

最終結果如圖所示： 

注意：這裏使用了兩個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
}