页面中使用uview的u-upload组件，u-upload组件中添加hpy-watermark插件，uview-ui版本1.8.3。页面的u-upload组件在打开页面时预加载了图片，用u-upload自带的deleteItem方法删除图片，再次通过组件选择图片，则报错。
7***@qq.com
- 发布：2024-09-19 16:53
- 更新：2024-09-19 16:53
- 阅读：134
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win11
HBuilderX类型： 正式
HBuilderX版本号： 4.24
手机系统： Android
手机系统版本号： Android 14
手机厂商： 荣耀
手机机型： HONOR 70Pro+
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
预期是再次选择图片也能正确加载，并且能通过hpy-watermark插件得到水印。
预期是再次选择图片也能正确加载，并且能通过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.
实际代码报错：[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
