uni-app canvas渲染的奇怪bug

uni-app canvas渲染的奇怪bug

操作步骤：

  • 页面中使用uview的u-upload组件，u-upload组件中添加hpy-watermark插件，uview-ui版本1.8.3。页面的u-upload组件在打开页面时预加载了图片，用u-upload自带的deleteItem方法删除图片，再次通过组件选择图片，则报错。

预期结果：

  • 预期是再次选择图片也能正确加载，并且能通过hpy-watermark插件得到水印。

实际结果：

  • 实际代码报错：[object DOMException] at view.umd.min.js:1。
  • 利用edge查看页面元素，edge报错：Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The image argument is a canvas element with a width or height of 0。

bug描述：

  • 这个bug情景比较特殊，我的页面使用了uview中的u-upload组件，并于u-upload组件中添加了hpy-watermark水印插件。如果页面在打开时已经预先于u-upload中加载了图片，那么如果用remove方法删去图片，则hpy-watermark水印会提示报错。如果u-upload中没有图片则一切正常。
  • hpy-watermark插件的原理是利用一个不可见的canvas加载图片并画上水印，然后保存为临时图片返回给u-upload。其内容很简单：
    <template>  
    <view class="watermark-content">  
        <canvas :canvas-id="canvasId" id="watermarkCanvas" :style="{ width: `${computedWidth}px`, height: `${computedHeight}px` }"></canvas>  
    </view>  
</template>
  • 利用edge浏览器的edge://inspect/命令查看页面元素，会发现canvas元素经过渲染变成了uni-canvas元素，uni-canvas元素的子元素则是一个canvas，hpy-watermark插件实际是在这个子元素内进行绘制。当页面加载的u-upload中存在图片时，删去图片，uni-canvas元素的宽高改变不再能传导到canvas中，即便使用了this.$forceUpdate()也无济于事。
  • 在Hbuilder中的报错非常笼统，只有：[object DOMException] at view.umd.min.js:1。
  • 而在利用edge浏览器的edge://inspect/命令查看页面元素，则能看到报错的一些详情如图所示。
  • hpy-watermark插件于u-upload组件中的使用方法参看：https://blog.csdn.net/qq_34378032/article/details/124025348

Image


更多关于uni-app canvas渲染的奇怪bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app canvas渲染的奇怪bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在处理uni-app中canvas渲染的奇怪bug时，通常我们需要先确认几个关键点：canvas的版本兼容性、绘图的代码逻辑、以及可能的性能瓶颈。以下是一个简化的代码案例，旨在展示如何在uni-app中使用canvas，并附带一些调试技巧，帮助你定位和解决可能的渲染问题。

代码示例

<template>
  <view>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
  </view>
</template>

<script>
export default {
  onLoad() {
    this.drawCanvas();
  },
  methods: {
    drawCanvas() {
      const ctx = uni.createCanvasContext('myCanvas');
      
      // 绘制矩形
      ctx.setFillStyle('red');
      ctx.fillRect(10, 10, 150, 75);
      
      // 绘制圆形
      ctx.beginPath();
      ctx.arc(100, 100, 50, 0, 2 * Math.PI);
      ctx.setFillStyle('blue');
      ctx.fill();
      
      // 绘制文本
      ctx.setFontSize(20);
      ctx.setFillStyle('black');
      ctx.fillText('Hello, Canvas!', 50, 200);
      
      // 绘制图像（假设有一张base64图片）
      // 注意：实际开发中，图片需要确保已加载完成，可以使用uni.getImageInfo先获取图片信息
      // const imgSrc = 'data:image/png;base64,...'; // 替换为实际的base64数据
      // ctx.drawImage(imgSrc, 20, 20, 50, 50);
      
      ctx.draw(false, () => {
        console.log('Canvas drawing completed.');
      });
    }
  }
}
</script>

<style>
/* 样式可根据需要调整 */
</style>

调试技巧

  1. 控制台日志：使用console.log在绘图的关键步骤打印信息，帮助确认代码执行流程。
  2. 版本兼容性：检查uni-app和底层canvas库的版本，确保没有已知的bug影响。
  3. 性能分析：如果渲染缓慢或出现卡顿，考虑使用性能分析工具（如Chrome DevTools的性能面板）检查渲染帧率和内存使用情况。
  4. 错误捕捉：在ctx.draw()的回调中添加try...catch块，捕捉并处理可能的异常。
  5. 简化测试：逐步简化绘图代码，从最简单的图形开始，逐步添加复杂性，以确定问题出现的具体位置。

通过上述代码和调试技巧，你应该能够更有效地定位和解决uni-app中canvas渲染的奇怪bug。如果问题依旧存在，建议查阅官方文档或社区论坛，看看是否有其他开发者遇到并解决了类似的问题。

回到顶部