ReactJS：上传前调整图像大小

IT技术 reactjs image-resizing
2021-04-12 06:55:46

在我的 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 变量中获取结果并在以后重用它？

4个回答

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

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

首先，包装这个 resizer：

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);
}

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

它返回新图像的 base64 URI 或 Blob。URI 可用作组件的源。

调整图像大小：您可以参考此处的脚本

或此处的工作代码示例演示

如果我使用该 blob 上传（在 URI 函数内），它就可以工作。所以我需要那个函数之外的转换值。
2021-05-31 06:55:46

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

出于这个原因，我用几个的JavaScript API写我自己的代码：FileReader，Image，canvas，和context。但是，此代码会产生一些像素化的调整大小。如果你想要更高质量的调整大小，我会推荐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>
其它你可能感兴趣的问题
上一篇如何从带有图像的 React.js 发送多部分/表单数据？ 下一篇react本机上下文和弃用的超级用法