循环使用ctx.draw()出现空白图片, d单张图片处理能正常处理,为什么多张循环就会出现空白?
发布于 6 年前 作者 caijun 422 次浏览 来自 问答

在循环使用canvas 的ctx.draw 绘图时,canvasToTempFilePath 能成功获取到图片路径,但是<canvas>却显示空白图片


//wxml
<canvas canvas-id="photoCanvas" style="width:{{cWidth}}px;height:{{cHeight}}px;position: absolute;left:-1000px;top:-1000px;"></canvas>

//js
takePhoto() {
  var self = this;
  wx.chooseImage({
    success: (res) => {
      for(var index in res.tempFilePaths){
        wx.getImageInfo({
          src: res.tempFilePaths[index],
          success:(res) =>{
            if(res.width > 1024 || res.height > 768){
              self.compressImages(res);
            }else{
              self.data.images.push(res.path);
              self.data.files.push(res.path);
              self.setData({
                images: self.data.images,
                files: self.data.files
              });
            }
            
          },
          fail:(err) =>{
            console.log(err);
          }
        })
      }
      
    }
  })
},
compressImages(res) {
  var self = this;
  var ratio = 2;
  var canvasWidth = res.width //图片原始长宽
  var canvasHeight = res.height
  while (canvasWidth > 1024 || canvasHeight > 768){// 保证宽高在400以内
      canvasWidth = Math.trunc(res.width / ratio)
      canvasHeight = Math.trunc(res.height / ratio)
      ratio++;
  }
  //----------绘制图形并取出图片路径--------------
  self.setData({
    cWidth: canvasWidth,
    cHeight: canvasHeight
  });
  var ctx = wx.createCanvasContext('photoCanvas')
  ctx.drawImage(res.path, 00, canvasWidth, canvasHeight) 
  setTimeout(function () {
    ctx.draw(false,  function(){
      wx.showLoading({
        title: '努力生成中...'
      });
      wx.canvasToTempFilePath({
          x:0,
          y:0,
          canvasId: 'photoCanvas',
          success: function (res) {
              console.log(res);//最终图片路径
              self.data.images.push(res.tempFilePath);
              self.data.files.push(res.tempFilePath);
              self.setData({
                images: self.data.images,
                files: self.data.files
              });
              console.log(self.data.files);
              wx.hideLoading();
          },
          fail: function (res) {
              console.log(res.errMsg)
          }
      })
  }) 
  },500)
     //留一定的时间绘制canvas
},
回到顶部