Taro: 组件中canvasGetImageData时出现canvasGetImageData: fail canvas is empty

[minzojian]

问题描述
在组件中使用类似Taro.canvasGetImageData方法时,即使画布上有内容,也会出现"canvasGetImageData: fail canvas is empty"的错误提示
其它的方法没测试,不过估计情况一样.Taro.canvasToTempFilePath
复现步骤

testDraw(){
      var ctx = Taro.createCanvasContext('draw-canvas', this);
      ctx.setFillStyle('red');
      ctx.fillRect(0, 0, 100, 100)
      ctx.draw();

      Taro.canvasGetImageData({
        canvasId: 'draw-canvas', x: 5, y: 5, width: 10, height: 10,
        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
        }
      }, this)
}
render()
{
return (<View>
 <Canvas canvas-id='draw-canvas' disable-scroll="true" style="width: 512px; height: 512px;" ></Canvas>
</View>)
}

期望行为
canvasGetImageData正常工作

报错信息

系统信息
System:
OS: Windows 10
Binaries:
Node: 10.15.3
Yarn: 1.16.0
npm: 6.4.1

补充信息
经过一定时间的分析搜索,最后通过对比原生微信开发者工具中的编译结果,发现问题是出在canvasGetImageData的第二个参数的引用错误导致.
把this换成this.$scope,问题得以解决
在Taro.createCanvasContext的时候,第二个参数是this的时候,能够正常工作.
而Taro.canvasGetImageData第二个参数是this却不能正常工作.很容易困惑不解.
希望官方能做一下自动纠正

[taro-bot[bot]]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[Garfield550]

但是一般我们需要获取 Taro 的页面和组件所对应的小程序原生页面和组件的实例，这个时候我们可以通过 this.$scope 就能访问到它们。

所以当调用一些 API 需要传入小程序的页面或者组件实例时，可以直接传入 this.$scope，例如 Taro.createCanvasContext(canvasId, this) 这个 API，第二个参数就是自定义组件实例 this，在 Taro 中就可以如下使用

https://nervjs.github.io/taro/docs/relations.html

[Garfield550]

我认为可以在 API 文档上补充需要传入 this.$scope ，你可以提个文档 PR。

[taichenglu]

用 canvasToTempFilePath 也是这个问题，传入 this.$scope 解决，确实应该在对应的文档页面增加这个 tip，不然还真是不容易找

[darkfiredarkhalo]

hooks怎么使用?