微信开发者工具Canvas2D渲染报错Uncaught TypeError: this._getData is not a function

注：本文具有时效性

背景：

        最近发现之前用canvas绘制的背景图，在最新版微信开发者工具控制台会报错：[渲染层错误] Uncaught TypeError: this._getData is not a function

问题：

        现在微信开发者工具渲染不出背景图，大部分真机中渲染正常无报错，小部分安卓机（如华为Android12）渲染成功但过几秒就会引起微信闪退，小程序没有抓到任何报错。

定位排查：

        代码一步步屏蔽排查后，发现是setData方法在设置canvas宽高时导致报错。

<!-- wxml代码 -->
<view class="preview" id="preImage">
    <canvas type="2d" id="foodCanvas" style="width: {{canvasWidth}}px;height: {{canvasHeight}}px;"></canvas>
</view>

this.setData({  
    canvasWidth, 
    canvasHeight 
}, () => {
    this.drawImage();
})

解决方案：

        1、若知道canvas标签的父元素宽高，则可通过css设置canvas宽高均为100%，自动撑开继承父级宽高。本人在此处采用了该方案，父元素（id="preview"）是flex布局计算得到的区域，不同机型宽高不同，但父元素渲染计算结果是动态固定的。修改后的代码如下：

<view class="preview" id="preImage">
    <canvas type="2d" id="foodCanvas" class="canvas"></canvas>
</view>

.preview {
    height: 100%;
    .canvas {
        width: 100%;
        height: 100%;
    }
}

        2、若不知道canvas标签及其父元素宽高，必须动态设置宽高，则可以通过wx:if命令来动态渲染。在另一处代码，本人的修改如下：

<canvas type="2d" id="clipCanvas" class="clip-canvas" wx:if="{{imgData.canvas}}" style="width: {{imgData.canvas.width}}px;height: {{imgData.canvas.height}}px;"></canvas>

imgData.canvas = {
  scale: scale,
  width: Math.floor(width * scale),
  height: Math.floor(height * scale),
};

this.setData({
    imgData,
},() => {
    // 裁剪并上传单个食物图片
    this.clipImages();
});

最终效果：