OffscreenCanvas修改图片添加水印，内存爆增直接卡死 HarmonyOS 鸿蒙Next

OffscreenCanvas修改图片添加水印，内存爆增直接卡死 HarmonyOS 鸿蒙Next 【设备信息】Mate60

【API版本】Api13

【DevEco Studio版本】5.0.7.200

【问题描述】

目前我们使用imageknife来加载第三方网络图片，该库支持配置图形变换Transformation，我们编写了一个自定义的添加水印的Transformation，参考了帖子 https://developer.huawei.com/consumer/cn/forum/topic/0207151268119912225?fid=0109140870620153026 的方法使用OffscreenCanvas给图片添加水印，单个图片时还好，如果批量加载图片时会发现内存爆满卡死。经过我的测试发现，通过OffscreenCanvas处理后，调用offScreenContext.getPixelMap获取到的PixelMap尺寸和大小爆增，导致批量图片加载页面直接卡死。请问这个是不是系统api OffscreenCanvas的bug？为何会爆增体积？有什么其它代替的图片添加水印解决方案（需要修改原图方式，因为后续还有保存图片和分享图片功能都是用到带水印的图片）？


更多关于OffscreenCanvas修改图片添加水印，内存爆增直接卡死 HarmonyOS 鸿蒙Next的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

imageSource.getImageInfo 此函数回调，ImageInfo ，size是像素。

  1. imagePacker.packing并不会改变图片尺寸大小，图片尺寸变大发生在OffscreenCanvas阶段。

  2. OffscreenCanvas默认单位是vp，而pixmap宽高是px，这是图片尺寸变大的原因。

修改代码 const offScreenCanvas = new OffscreenCanvas(px2vp(data.size.width), px2vp(data.size.height))

图片添加水印可以参考下文档：https://gitee.com/harmonyos_samples/watermark

OffscreenCanvas支持并发线程绘制，参考链接 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-components-offscreencanvas-V5

更多关于OffscreenCanvas修改图片添加水印，内存爆增直接卡死 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


使用pixelmap之后有没有释放掉，

在鸿蒙Next中使用OffscreenCanvas处理图片并添加水印时，如果遇到内存爆增导致卡死的问题，可能是由于以下几个原因：

  1. 图片分辨率过高：处理高分辨率图片时，OffscreenCanvas会占用大量内存。建议在处理前对图片进行适当压缩或降低分辨率。

  2. 频繁创建OffscreenCanvas实例：每次处理图片都创建新的OffscreenCanvas实例会导致内存累积。应复用OffscreenCanvas实例，或在处理完成后及时释放资源。

  3. 水印处理逻辑复杂：水印处理过程中可能涉及多次绘制操作，导致内存占用增加。建议优化水印处理逻辑，减少不必要的绘制操作。

  4. 未及时释放资源：处理完图片后，未及时释放OffscreenCanvas及相关资源，导致内存泄漏。应在处理完成后手动释放资源。

  5. 系统内存管理限制：鸿蒙Next系统对内存使用有一定限制，处理大图片时容易触发内存限制。建议分块处理图片，避免一次性加载过多数据。

通过优化图片处理流程、复用OffscreenCanvas实例、及时释放资源等措施，可以有效缓解内存爆增问题。

回到顶部