如何在React Native应用程序中压缩后台图像并添加水印?

问题描述 投票:0回答:1

我的应用程序构建在 React-native 框架上。 在我的应用程序中,当前流程是:

  1. 捕捉图像。

  2. 压缩图像。

  3. 为图像添加水印。

  4. 向用户显示处理后的图像。

您可以在随附的视频中看到此流程。

问题是压缩图片和添加水印大约需要3到4秒,导致用户体验很差。

使用的库

图像压缩:react-native-image-resizer:“3.0.1”

添加水印:react-native-image-marker:1.2.5

图像捕获:react-native-vision-camera:“4.5.2”

我的React Native版本是0.74.3,React版本是18.2.0。

我想将图像处理(压缩和水印)移至后台进程,并且它不会影响 UI 或阻塞主线程。

我尝试使用 react-native-background-actions 压缩并在图像中添加水印,但它导致 UI 在处理过程中冻结。

我需要什么

  1. 一种在后台进程中执行图像压缩和水印而不阻塞主线程或影响 UI 的方法。

  2. 支持在后台同时处理多个图像。

  3. 适用于 Android 和 iOS 的跨平台解决方案。

有人可以建议两个平台的库或其他解决方案来实现这一目标吗?我们可以在后台同时压缩多个图像吗?

android react-native background-process watermark image-compression
1个回答
0
投票

要在 React Native 应用程序的后台压缩图像并添加水印,您可以按照以下步骤操作:

图像压缩:使用react-native-image-crop-picker或react-native-image-resizer等库在显示图像之前对其进行压缩。

添加水印:要添加水印,请使用像react-native-canvas或react-native-skia这样的库将水印覆盖在图像顶部。

实施:

首先,加载图像并压缩它。 使用 Canvas 或 Skia 在图像上绘制水印。 在您的应用程序中保存或显示修改后的图像。

© www.soinside.com 2019 - 2024. All rights reserved.