压缩图像的最佳方法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

我之前在React / Redux应用程序中使用最终生成压缩JPG文件的图像库 - 如果这对您有用，那么使用像Jimp这样的选项。它是为节点制作的，但我安装它用于browser，并使用它如下：

Jimp.read('image.jpg').then((image) => {
  if (image.bitmap.data.length > MAX_IMAGE_SIZE) {
    image.quality(80); // some value of 'quality'
  }
  // do something else with the image
});

您可以做一些摆弄，找出适合您应用的JPG的正确质量，并进行相应调整。

当我使用它的时候，我把一个onDrop函数放在一起处理图像就像你一样 - 我不保证这个代码是超级干净或超级高效 - 它来自一次性原型 - 但它应该让你开始正确的道路：

handleFileDrop(e) {
      e.stopPropagation();
      e.preventDefault();

      var file = e.dataTransfer.files[0];

      var reader = new FileReader();
      reader.onload = (function(inputFile) {
        return function(e) {
            var imageBlob = new Blob([e.target.result], {type: inputFile.type});
            var src = URL.createObjectURL(imageBlob)
            Jimp.read(src, (err, image) => {
                // do stuff here
            });
      })(file);

      reader.readAsArrayBuffer(file);
}