Измените размер изображения в интерфейсе javascript перед отправкой на S3 - PullRequest
Новая
       27

Измените размер изображения в интерфейсе javascript перед отправкой на S3

1 голос
/ 26 июня 2019

Я использую React Dropzone для загрузки файла.Затем я генерирую S3 putObject signatureURL и отправляю изображение на S3 с помощью axios.

Это выглядит примерно так: 

const {getRootProps, getInputProps} = useDropzone({
  onDrop: (acceptedFiles) => {
    const image = acceptedFiles[0]

    getS3SignedUrl(...)
      .then(path => {
        const options = {...}

        //????

        return axios.put(path, image, options)
      })

  }
})

Все работает нормально, но изображения очень большие.Я хотел бы уменьшить ширину / высоту изображения, уменьшить его и, возможно, снизить качество перед отправкой на S3.

Я посмотрел на какой-то похожий вопрос, но не могу понять, что лучшеlib / способ сделать это.

Может кто-нибудь помочь мне с примером?

Ответы [ 2 ]

1 голос
/ 26 июня 2019

Вы можете использовать библиотеку реагировать-imgpro .И ниже, как использовать. 

import React from 'react';
import ProcessImage from 'react-imgpro';

class App extends React.Component {
  state = {
    src: '',
    err: null
  }

  render() {
    return (
      <ProcessImage
        image='http://365.unsplash.com/assets/paul-jarvis-9530891001e7f4ccfcef9f3d7a2afecd.jpg'
        resize={{ width: 500, height: 500 }}
        colors={{
          mix: {
            color: 'mistyrose',
            amount: 20
          }
        }}
        processedImage={(src, err) => this.setState({ src, err})}
      />
    )
  }
}

И обработанное изображение будет хранить в состоянии.

0 голосов
/ 27 июня 2019

Cloudinary имеет отличные функции, включая то, что вы хотите. Все, что вам нужно сделать, это использовать SDK, а затем отправить изображение вместе с параметрами, изменить его размер и вернуть URL обработанного изображения вместе с изображением, сохраненным в облаке вашей облачной учетной записи. Я действительно полагаюсь на Cloudinary, особенно NodeJS SDK. Вы можете увидеть документацию SDK для ReactJS. https://cloudinary.com/documentation/react_integration

...