javascript - 压缩图像 Javascript React Web App 的最佳方式

Question

我正在寻找最好的解决方案来压缩我收到并需要存储在我的数据库中的图像。

其实我是把一张图片转成base64然后发给服务器。

handleImage = e => {
    e.preventDefault();
    let reader = new FileReader();
    let file = e.target.files[0];

    reader.onloadend = () => {           
        this.setState({
            file: file,
            image: reader.result
        });
    }

    this.setState({ imgchange: true })
}

然后将当前状态的图片发送给服务器。但是低质量的图片没问题，但是当我尝试上传中高质量的图片时，我无法将其保存在服务器上，我需要一种压缩图片的方法。

您有实现此目标的想法吗？你能举个例子吗？

Answer 1

可用于图像压缩的最佳 npm 包是 browser-image-compression。在 React 和 Redux 中测试。

• 安装 npm install browser-image-compression --save

异步等待语法:

import React from "react";
import imageCompression from 'browser-image-compression';
function photoUpload() {
    async function handleImageUpload(event) {

        const imageFile = event.target.files[0];
        console.log('originalFile instanceof Blob', imageFile instanceof Blob); // true
        console.log(`originalFile size ${imageFile.size / 1024 / 1024} MB`);

        const options = {
          maxSizeMB: 1,
          maxWidthOrHeight: 1920,
          useWebWorker: true
        }
        try {
          const compressedFile = await imageCompression(imageFile, options);
          console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
          console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB

          await uploadToServer(compressedFile); // write your own logic
        } catch (error) {
          console.log(error);
        }

      }
  return (
    <>
     <div>
     <input type="file" accept="image/*" onChange={event => handleImageUpload(event)}/>
     </div>
    </>
  );
}

export default photoUpload;

更多详情可以查看NPM