我的应用程序构建在 React-native 框架上。 在我的应用程序中,当前流程是:
捕捉图像。
压缩图像。
为图像添加水印。
向用户显示处理后的图像。
您可以在随附的视频中看到此流程。
问题是压缩图片和添加水印大约需要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 在处理过程中冻结。
我需要什么
一种在后台进程中执行图像压缩和水印而不阻塞主线程或影响 UI 的方法。
支持在后台同时处理多个图像。
适用于 Android 和 iOS 的跨平台解决方案。
有人可以建议两个平台的库或其他解决方案来实现这一目标吗?我们可以在后台同时压缩多个图像吗?
要在 React Native 应用程序的后台压缩图像并添加水印,您可以按照以下步骤操作:
图像压缩:使用react-native-image-crop-picker或react-native-image-resizer等库在显示图像之前对其进行压缩。
添加水印:要添加水印,请使用像react-native-canvas或react-native-skia这样的库将水印覆盖在图像顶部。
实施:
首先,加载图像并压缩它。 使用 Canvas 或 Skia 在图像上绘制水印。 在您的应用程序中保存或显示修改后的图像。