ImageStore.addImageFromBase64 的替代方案？

Question

在更新旧的 React Native 应用程序时，我运行遇到了遗留代码的问题。它在一种方法中使用 ImageStore addImageFromBase64() 来：

将Base64图片存入FS
在顶部和底部添加白色 space（通过调整大小）
再次从 FS 中以 Base64 格式检索它

我应该如何修改它以实现相同的所需功能？

问题是 addImageFromBase64() 在 Android 上不起作用。

Warning: react-native: ImageStore.addImageFromBase64() is not implemented on android

  // Resize photo (fill white space on top and bottom)
  static async addWhiteSpace(data) {
    const {
      height,
      width,
      base64Str
    } = data;
    const cropData = {
      offset: {
        x: 0,
        y: - height / 2,
      },
      size: {
        width,
        height: 2 * height
      },
      resizeMode: 'contain'
    };

    const uriResolver = await new Promise((resolve, reject) => {
      ImageStore.addImageFromBase64(base64Str, (uri) => {
        resolve(uri)
      }, (err) => {
        reject(err)
      })
    });
    const whitespaceURIResolver = await new Promise((resolve, reject) => {
      ImageEditor.cropImage(uriResolver, cropData, (whitespaceURI) => {
        resolve(whitespaceURI)
      }, (err) => {
        reject(err)
      })
    });
    const base64Resolver = await new Promise((resolve, reject) => {
      ImageStore.getBase64ForTag(whitespaceURIResolver, (base64) => {
        resolve(base64)
      }, (err) => {
        reject(err)
      })
    });
    return base64Resolver
  }

Answer 1

我没有这样做，但您可以通过在 base64 数据前加上 data:image/png;base64, 前缀，直接将图像加载到图像编辑器中。
在您的情况下，调用可能如下所示：

    ImageEditor.cropImage('data:image/png;base64,'+base64Str, cropData, (whitespaceURI) => etc..

Answer 2

这解决了问题，现在 Android 和 iOS 上都是运行:

  static async addWhiteSpace(data) {
    const {
      height,
      width,
      base64Str
    } = data;
    const cropData = {
      offset: {
        x: 0,
        y: Math.abs(- height / 2),
      },
      size: {
        width,
        height: 2 * height
      },
      resizeMode: 'contain'
    };

    const uriResolver = await RNFS.writeFile(RNFS.CachesDirectoryPath + "temp.png", base64Str, 'base64');
    const whitespaceURIResolver = await new Promise((resolve, reject) => {
      ImageEditor.cropImage("file:" + uriResolver, cropData, (whitespaceURI) => {
        resolve(whitespaceURI)
      }, (err) => {
        reject(err)
      })
    });
    const base64Resolver = await RNFS.readFile(whitespaceURIResolver, "base64");
    return base64Resolver
  }

ImageStore.addImageFromBase64 的替代方案？

Alternative for ImageStore.addImageFromBase64?

javascript

base64

crop

react-native

image-store