Question

使用该设备拍摄的照片很大。我想在将它们（缩放它们）调整为更合理的尺寸（小于800x800）之后将它们上传到我的后端服务器。我希望使用ImageEditor模块的coprImage()函数，但使用大图像运行会导致OutOfMemory异常。我假设由于模块试图解码大图像并将其存储在内存中，因此应用程序崩溃。

我需要的是以下内容：

输入

{
  width: 3100,
  height: 2500,
  uri: content://android/1 (some location in Android device)
}

输出

{
  width: 800,
  height: 650,
  uri: content://android/1/resized (some location in Android device)
}

然后我可以抓住这个uri将图片发送到我的后端服务器，并从设备中删除已调整大小的照片。

我假设我必须写一个NativeModule，这样我就可以调整图像大小，而无需将大的解码图像加载到内存中。 React Native的Image组件在渲染之前使用Fresco来处理调整大小，但我不认为它提供了一种调整图像大小并暂时将其保存在fs中的方法。

任何帮助都将不胜感激。

参考文献：

Answer 1

在我的应用中，我使用react-native-image-picker，效果非常好。

如果您不想使用它，请查看this function source以了解如何调整大小。欢呼声。

Answer 2

你试过react-native-image-resizer了吗？对我来说它运作得很好，我正在使用它react-native-camera，它看起来像这样：

  fromCamera() {
    let newWidth = 800;
    let newHeight = 650;
    this.refs.camera.capture()
    .then((data) => {
      ImageResizer.createResizedImage(data.path, newWidth, newHeight, 'JPEG', 100, rotation)
      .then(uri => {
        // send to backend
      }
    })
  }

原始图像保存在uri: data.path的设备上，因此内存没有问题。

Answer 3

Expo图书馆有一个可以调整大小的图像操纵器：

import { ImageManipulator } from 'expo';

...

const manipResult = await ImageManipulator.manipulate(
    imageUri,
    [{ resize: { width: 640, height: 480 } }],
    { format: 'jpg' }
);

manipResult将返回一个具有新uri，width和height的对象。

在此处找到它： https://docs.expo.io/versions/latest/sdk/imagemanipulator.html

Answer 4

让我们签出this。它将为您提供有关调整大小并上传到后端服务器的问题的详细说明。

Answer 5

如果要发送Base64字符串，可以检查下面的代码

如何安装并与android链接，请检查此链接

https://github.com/TBouder/react-native-asset-resize-to-base64

//此代码仅用于调整大小并推入数组

let images = [];
NativeModules.RNAssetResizeToBase64.assetToResizedBase64(
            response.uri,
            newWidth,
            newHeight,
            (err, base64) => {
              if (base64 != null) {
                const imgSources = { uri: base64 };
                this.setState({
                  image: this.state.image.concat(imgSources)
                });
                 this.state.image.map((item, index) => {
                  images.push(item);
                });
                if (err) {
                  console.log(err, "errors");
                }
              }
            }
          );

React Native Android]调整图片大小并上传到后端服务器

5 个答案: