<canvas :canvas-id="canvasName" @error="canvasIdErrorCallback" :style="{
width:
${realWidth}px,height:
${realHeight}px,position: 'absolute',
left: '-9999px',
top: '-9999px'
}"></canvas>
</view>
</template>
xiaokar
- 发布：2025-03-13 10:38
- 更新：2025-03-13 16:03
- 阅读：145
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 11 专业版 24H2
HBuilderX类型： 正式
HBuilderX版本号： 4.44
第三方开发者工具版本号： 1.06.2412050win32-x64
基础库版本号： 3.7.10
项目创建方式： HBuilderX
示例代码：
这是部分canvas组件代码：
<template>
<view>
<!-- 显示处理后的图片 -->
<image v-if="processedImage" :src="processedImage" mode="widthFix" v-show="isShow"
style="{width:cssWidth+'px',height:cssHeight+'px',...customStyle}" />
<!-- 隐藏的Canvas -->
<canvas :canvas-id="canvasName" @error="canvasIdErrorCallback" :style="{
width:
height:
position: 'absolute',
left: '-9999px',
top: '-9999px'
}"></canvas>
</view>
</template>
<canvas :canvas-id="canvasName" @error="canvasIdErrorCallback" :style="{
width:
height:
position: 'absolute',
left: '-9999px',
top: '-9999px'
}"></canvas>
</view>
</template>
操作步骤：
初始渲染A组件正常，v-if切换组件B，组件B内的组件只要涉及canvas都报错
初始渲染A组件正常，v-if切换组件B，组件B内的组件只要涉及canvas都报错
预期结果：
真机不报错，正常运行和显示
真机不报错，正常运行和显示
实际结果：
微信模拟器正常。
真机报错：canvas-id xx in this page has already existed
微信模拟器正常。
真机报错：canvas-id xx in this page has already existed
bug描述：
- 首页自己实现的底部导航，中间内容区使用v-if和v-show渲染对应的不同组件（第一次切换v-if，后续v-show）
- 首页组件A和B内使用了多个ColorIcon组件，用于实现png的换色，已确定canvas-id唯一
- 初始渲染组件A则切换B时B会报错canvas-id xx in this page has already existed
- 初始渲染组件B则切换A时A会报错
- 报错组件是所有canvas都报一次
大哥们有没有遇到类似的问题，以下方法试过都不行：
- 定时器延迟加载该canvas组件
- canvas-id加随机数
- 初始一起加载A和B组件
- 去除v-show
1 个回复
xiaokar (作者) - 一名对代码整洁度有强迫症的专业前端
旧版canvas有问题，整套换成type="2d"的格式就正常了！