Question

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

实际上，我在base64中转换图像，然后将其发送到服务器。

/bin/hostname

然后将状态中的当前图像发送到服务器。但是对于低质量的图像来说它很好但是当我尝试上传中高质量时我无法将其保存在服务器上时，我需要一种方法来压缩图像。

您有什么想法实现这一目标吗？你能告诉我一个例子吗？

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

Answer 2

我之前在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);
}

Answer 3

您可以使用react-image-file-resizer库压缩图像

import Resizer from 'react-image-file-resizer';


Resizer.imageFileResizer(
    file, //is the file of the new image that can now be uploaded...
    maxWidth, // is the maxWidth of the  new image
    maxHeight, // is the maxHeight of the  new image
    compressFormat, // is the compressFormat of the  new image
    quality, // is the quality of the  new image
    rotation, // is the rotatoion of the  new image
    responseUriFunc,  // is the callBack function of the new image URI
    outputType  // is the output type of the new image
    );

例如：

import React, { Component } from 'react';
import Resizer from 'react-image-file-resizer';

class App extends Component {
    constructor(props) {
        super(props);
        this.fileChangedHandler = this.fileChangedHandler.bind(this);
    }

    fileChangedHandler(event) {
        var fileInput = false
        if(event.target.files[0]) {
            fileInput = true
        }
        if(fileInput) {
            Resizer.imageFileResizer(
                event.target.files[0],
                300,
                300,
                'JPEG',
                100,
                0,
                uri => {
                    console.log(uri)
                },
                'base64'
            );
        }
    }

    render() {
        return (
            <div className="App">
                <input type="file" onChange={this.fileChangedHandler}/>
            </div>
        );
    }
}

export default App;

For Details you can read this documentation

Answer 4

在后端压缩图像是个好习惯。如果要在前端使用它，请使用此库。我将其压缩为blob或base64并将其发送到服务器。npm i react-image-compressor

压缩图像的最佳方法Javascript React Web App

4 个答案: