在本机反应中裁剪多个图像

Question

在 React Native 中裁剪多个图像的正确方法是什么？我正在开发一个用户选择许多照片的应用程序，但在将它们上传到服务器之前，每张照片都应该具有正确的纵横比 - 1:1、2:3 等。

我使用react-native-image-crop-picker 允许用户在一张照片中选择多张照片。最初我使用同一个库来允许用户一次裁剪一张照片，但这是一个糟糕的用户体验，因为人们一次上传 10-20 张照片。所以我想到了使用ImageEditor.cropImage()在幕后自动裁剪图像

现在我得到了裁剪后的图像，但它几乎冻结了应用程序，直到图像被裁剪，导致用户体验不佳。 关于如何解决这个问题的任何线索？

Answer 1

在我看来，这似乎是一个很难仅通过使用 react-native-image-picker 库来涵盖的范围。在接收图像时，我也会重新考虑服务器端缺乏灵活性。基本上我认为要求用户在移动设备上上传多个具有受限纵横比的图像并不是一个好的用户体验。

但如果这不可能，您可以尝试使用以下选项来解决此问题，以获得更好的用户体验：

• 选项 1：导入图像后，在应用程序的网格视图中显示它们，允许用户在上传前裁剪每一张（这样用户可以手动完成，而不会感到不知所措，稍微好一点手动裁剪的方法）
• 选项 2：尝试按顺序运行自动裁剪图像（非异步），并在应用忙于处理这些图像并上传它们时向用户显示 ActivityIndi​​cator（如果需要，锁定应用的导航，从用户认为上传多张图片的过程较慢）。
• 选项 3：将自动裁剪功能移动到服务器端如果可能，这样应用程序就不会因处理图像而不堪重负，并且后端将通过处理所有它接收到的图像。不过不确定是否可以实现。