ReactJS:上传前调整图像大小

Question

在我的 reactJs 项目中，我需要在上传之前调整图像大小。

我正在使用 react-image-file-resizer图书馆有一个简单的例子但对我不起作用。

我试过这个，但它显示我空白的结果。我究竟做错了什么？

var imageURI = '';
const resizedImg = await Resizer.imageFileResizer(
  fileList.fileList[0].originFileObj,
  300,
  300,
  'JPEG',
  100,
  0,
  uri  => {
    imageURI = uri 
    console.log(uri )  // this show the correct result I want but outside of this function
  },
  'blob'
);
console.log(resizedImg)
console.log(imageURI)

// upload new image
...uploading image here.. 

如果我这样做 imgRef.put(uri);在 URI 函数中，然后图像上传工作。但我需要在该功能之外执行此操作。

如何在 imageURI 变量中获取结果并在以后重用它？

Answer 1

好的，我用 compres.js 弄明白了图书馆。

  async function resizeImageFn(file) {

    const resizedImage = await compress.compress([file], {
      size: 2, // the max size in MB, defaults to 2MB
      quality: 1, // the quality of the image, max is 1,
      maxWidth: 300, // the max width of the output image, defaults to 1920px
      maxHeight: 300, // the max height of the output image, defaults to 1920px
      resize: true // defaults to true, set false if you do not want to resize the image width and height
    })
    const img = resizedImage[0];
    const base64str = img.data
    const imgExt = img.ext
    const resizedFiile = Compress.convertBase64ToFile(base64str, imgExt)
    return resizedFiile;
  }

它返回一个要上传到服务器的文件。