微信小程序 canvasToTempFilePath问题。

Question

微信小程序

canvasToTempFilePath问题

程序描述：用户可在画布上自由绘制黑色笔迹，点击确定后用canvasToTempFilePath保存！
问题描述：在开发工具上可以正常运行，墨迹保存完好，当使用真机调试或体验版本中没有墨迹，只是一张透明图。

// 画布的触摸移动开始手势响应
    start: function (event) {
      // console.log("触摸开始" + event.changedTouches[0].x)
      // console.log("触摸开始" + event.changedTouches[0].y)
      //获取触摸开始的 x,y
      let point = { x: event.changedTouches[0].x, y: event.changedTouches[0].y }
      touchs.push(point)
    },

    // 画布的触摸移动手势响应
    move: function (e) {
      let point = { x: e.touches[0].x, y: e.touches[0].y }
      touchs.push(point)
      if (touchs.length >= 2) {
        this.draw(touchs)
      }
      is_touch = false;
    },

    // 画布的触摸移动结束手势响应
    end: function (e) {
      console.log("触摸结束" + e)
      //清空轨迹数组
      for (let i = 0; i < touchs.length; i++) {
        touchs.pop()
      }
      is_touch = true;
      can_pass = true
    },

    // 画布的触摸取消响应
    cancel: function (e) {
      console.log("触摸取消" + e)
    },

    // 画布的长按手势响应
    tap: function (e) {
      console.log("长按手势" + e)
    },

    error: function (e) {
      console.log("画布触摸错误" + e)
    },
    /**
    * 生命周期函数--监听页面加载
    */
    onLoad: function (options) {
      //获得Canvas的上下文
      content = wx.createCanvasContext('firstCanvas')
      //设置线的颜色
      content.setStrokeStyle("#000")
      //设置线的宽度
      content.setLineWidth(15)
      //设置线两端端点样式更加圆润
      content.setLineCap('round')
      //设置两条线连接处更加圆润
      content.setLineJoin('round')

      var r = Math.floor(Math.random()*9)
      var a = r+1
      this.setData({
        random:a,
        randoms: a,
        //signImage:"https://mhes.sxu.net.cn/Files/20190522/20190522163655299684.jpg"
      })
    },

    /**
    * 生命周期函数--监听页面初次渲染完成
    */
    onReady: function () {
    },

    //绘制
    draw: function (touchs) {
      let point1 = touchs[0]
      let point2 = touchs[1]
      touchs.shift()
      content.moveTo(point1.x, point1.y)
      content.lineTo(point2.x, point2.y)
      content.stroke()
      content.draw(true)
    },
    //清除操作
    clearClick: function () {
      //清除画布
      content.clearRect(0, 0, canvasw, canvash)
      // content.clearRect(0, 0, 500, 500)
      content.draw(true)
      is_touch = false
      can_pass = false
    },
    //保存图片
    saveClick: function () {
      is_touch = true
      if(can_pass == false)
      {

        wx.showModal({
          title: 'MHE',
          content: '请完成绘制',
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定')
              is_touch = false
            }
          }
        })
        return
      }
      var that = this
      that.setData({
        random: "-",
      })
      can_pass = false
      var that = this
        wx.canvasToTempFilePath({
          x:0,
          y:0,
          width: canvasw,
          height: canvash,
          destWidth: canvasw,
          destHeight: canvash,
          fileType: 'png',
          canvasId: 'firstCanvas',
          quality : 0.5,
          success: function (res) {
            console.log(res.tempFilePath)
            that.setData({
              signImage: res.tempFilePath
            })
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success(result) {
                console.log(result)
              }
            })
            wx.uploadFile({
              url: '。。。。。。。。。。。。。',
              filePath: res.tempFilePath,
              name: 'uploadFile',
              success: function(res) {
                var datas = JSON.parse(res.data)
                console.log(datas)
                if(datas.rlt == 0){
                  console.log(that.data.randoms)
                  wx.request({
                    url: app.weburl,
                    data: {
                      。。。
                    },
                    header: {},
                    method: 'GET',
                    dataType: 'json',
                    responseType: 'text',
                    success: function(res) {
                      。。。
                    },
                    fail: function(res) {},
                    complete: function(res) {
                      console.log(that.data.num)
                    },
                  })
                }
              },
              fail: function(res) {},
              complete: function(res) {},
            })
          },
          fail: function (res) {
          console.log(res)
          },
        })
      content.clearRect(0, 0, canvasw, canvash)
      content.draw(true)

    }

Answer 1

https://blog.csdn.net/quankecai/article/details/79167469