[微信小程序&Taro]自定义组件使用canvas绘图,无法绘制以及fail canvas is empty问题

情况1:普通页面,canvas绘制,正常,生成图片正常;

情况2:自定义组件引用canvas绘制,空白;
原因:查看文档,在自定义组件内需要手动传入当前实例的this,否则canvas指向的this为父组件所以无法找到正确canvas;


微信官方文档

情况3:自定义组件内,canvas绘制好了,但是canvasToTempFilePathfail canvas is empty错误;
原因:同上,但是canvasToTempFilePath({}, this)添加this可能无法解决,因为我使用的小程序框架是Taro,在 Taro 的页面和组件类中,this 指向的是 Taro页面或组件实例。
所以一般我们需要获取 Taro的页面和组件所对应的小程序原生页面和组件实例,这个时候我们可以通过 this.$scope 访问到它们;
所以最后写成:

Taro.createCanvasContext("canvas-id", this.$scope);
Taro.canvasToTempFilePath({}, this.$scope);

你可能感兴趣的:([微信小程序&Taro]自定义组件使用canvas绘图,无法绘制以及fail canvas is empty问题)