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..

如果我在 URI 函数中执行 imgRef.put(uri);，那么图像上传就可以了。但我需要在该功能之外执行此操作。

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

Answer 1

您正在使用的库不会调整文件上传的图像大小。

它 returns 新图像的 base64 URI 或 Blob。 URI 可以用作组件的来源。

要调整图片大小：可以参考脚本here

或工作代码示例演示 here

Answer 2

好的，我使用 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;
  }

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

Answer 3

首先，包装这个调整器：

const resizeFile = (file) => new Promise(resolve => {
    Resizer.imageFileResizer(file, 300, 300, 'JPEG', 100, 0,
    uri => {
      resolve(uri);
    }, 'base64' );
});

然后在你的异步函数中使用它：

const onChange = async (event) => {
  const file = event.target.files[0];
  const image = await resizeFile(file);
  console.log(image);
}

Answer 4

在浏览器中调整图像大小应该是无痛的，但事实并非如此。你可以使用一个包，但它们通常写得不好而且维护得不好。

出于这个原因，我使用几个 Javascript API 编写了自己的代码：FileReader, Image, canvas, and context. However, this code produces resizes with some pixelation. If you want even higher quality resizes, I would recommend the Pica 包，它使用网络工作者。

Javascript

const uploadImage = (event) => {
  const [ imageFile ] = event.target.files;
  const { type: mimeType } = imageFile;

  const fileReader = new FileReader();
  fileReader.readAsDataURL(imageFile);
  fileReader.onload = (fileReaderEvent) => {

    const imageAsBase64 = fileReaderEvent.target.result;
    const image = document.createElement("img");
    image.src = imageAsBase64;

    const imageResizeWidth = 100;
    // if (image.width <= imageResizeWidth) {
    //  return;
    // }

    const canvas = document.createElement('canvas');
    canvas.width = imageResizeWidth;
    canvas.height = ~~(image.height * (imageResizeWidth / image.width));
    const context = canvas.getContext('2d', { alpha: false });
    // if (!context) {
    //  return;
    // }
    context.drawImage(image, 0, 0, canvas.width, canvas.height);

    // const resizedImageBinary = canvas.toBlob();
    const resizedImageAsBase64 = canvas.toDataURL(mimeType);
  };
};

HTML

<form>
  <input type="file" accept="image/jpeg"
    onchange="uploadImage()"/>
</form>

ReactJS：上传前调整图像大小

ReactJS: Resize image before upload

image-resizing

reactjs