微信开发者工具Canvas2D渲染报错解决方案

微信开发者工具Canvas2D渲染报错解决方案

引用

CSDN

1.

https://blog.csdn.net/carfge/article/details/139004729

注：本文具有时效性

背景

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

问题

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

定位排查

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

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

解决方案

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

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

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>

  width: Math.floor(width * scale),  height: Math.floor(height * scale),

最终效果