canvasGetImageData获取的data长度为0

<template>  
  <view>  
    <image src="https://img0.baidu.com/it/u=1036643107,1728037774&fm=253&fmt=auto&app=138&f=JPEG?w=651&h=433" mode="widthFix" @tap="mounted"></image>  
    <view class="color-block" :style="{ backgroundColor: mainColor }"></view>  
    <canvas canvas-id="color-canvas" style="height: 2000px;width: 750px;"></canvas>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      mainColor: ''  
    }  
  },  
  methods: {  
    getImageColor(url) {  
      return new Promise((resolve, reject) => {  
        uni.getImageInfo({  
          src: url,  
          success: (res) => {  
            // 使用 canvas 获取图片主色调  
            var canvas = uni.createCanvasContext('color-canvas')  
            canvas.drawImage(res.path, 0, 0, res.width, res.height)  
            console.log(res)  

            canvas.draw(false, function() {  
              setTimeout(function(){  

                  uni.canvasGetImageData({  
                    canvasId: 'color-canvas',  
                    x: 0,  
                    y: 0,  
                    width: 100,  
                    height: 100,  
                    success(res) {  
                      console.log(res.width) // 100  
                      console.log(res.height) // 100  
                      console.log(res.data instanceof Uint8ClampedArray) // true  
                      console.log(res.data.length) // 100 * 100 * 4  
                    }  
                  })  
                  // uni.canvasGetImageData({  
                  //   canvasId: 'color-canvas',  
                  //   x: 0,  
                  //   y: 0,  
                  //   width: 20,  
                  //   height: 30,  
                  //   success: function(res) {  
                  //                    console.log(res);  
                  //     if (res.data.length === 0) { // 判断数据是否为空  
                  //       reject(new Error('获取图片数据失败，请检查图片是否正确或重新加载页面'))  
                  //       return  
                  //     }  
                  //     var color = getColor(res.data, res.width, res.height)  
                  //     resolve(hexToRgb(color)) // 将最终的颜色结果返回  
                  //   },  
                  //   fail: function(err) {  
                  //     reject(err) // 将错误信息返回  
                  //   }  
                  // })  
              },2000)  
            })  
          },  
          fail: (err) => {  
            reject(err)  
          }  
        })  
      })  
    },  
    async mounted() {  
      try {  
        const mainColor = await this.getImageColor('https://img0.baidu.com/it/u=1036643107,1728037774&fm=253&fmt=auto&app=138&f=JPEG?w=651&h=433')  
        this.mainColor = mainColor  
      } catch (err) {  
        console.error(err)  
        // 失败时给出友好的提示信息  
        uni.showToast({  
          title: '获取图片主色调失败，请刷新页面重新尝试',  
          icon: 'none',  
          duration: 3000  
        })  
      }  
    }  
    // ... getColor 和 hexToRgb 函数  
  }  
}  

// 获取图片主色调  
function getColor(data, width, height) {  
  var colorMap = {},  
    maxRGB = 0,  
    mainColor = ''  
  for (var i = 0; i < data.length; i += 4) {  
    var r = data[i],  
      g = data[i + 1],  
      b = data[i + 2]  
    if (r === 0 && g === 0 && b === 0) { // 排除黑色的像素点，部分图片黑色像素点可能过多，导致检测到黑色而无法获取主题色  
      continue  
    }  
    var key = r + ',' + g + ',' + b  
    colorMap[key] = (colorMap[key] || 0) + 1  
    if (colorMap[key] > maxRGB) {  
      maxRGB = colorMap[key]  
      mainColor = key  
    }  
  }  
  return mainColor  
}  

// 将 hex 颜色值转换为 RGB 格式  
function hexToRgb(color) {  
  var arr = color.split(',')  
  return 'rgb(' + arr[0] + ',' + arr[1] + ',' + arr[2] + ')'  
}  
</script>  

<style>  
.color-block {  
  width: 100rpx;  
  height: 100rpx;  
  margin-top: 20rpx;  
}  
</style>

返回data为空，不知道是什么原因