React js: изменение размера изображения перед загрузкой

В этом руководстве вы узнаете, как создать компонент изменения размера изображения для обрезки и изменения размера изображения в приложении react js с помощью стороннего пакета, который называется react image resize. 

React Js: изменение размера, сжатие и обрезка размера изображения 

Для этого нам потребуется выполнить некоторые шаги. 

• Шаг 1 - Создадим приложение React
• Шаг 2 - Установим пакет React Image Crop Package
• Шаг 3 - Создадим простую загрузку изображения с компонентом предварительного просмотра
• Шаг 4 - Добавим компонент в App.js

Шаг 1 - Создайте приложение React

На этом шаге откройте свой терминал и выполните следующую команду в терминале, чтобы создать новое React приложение:

npx create-react-app my-react-app

Чтобы запустить приложение React, выполните в терминале следующую команду: 

npm start

Проверьте свое приложение React по этому URL-адресу: localhost:3000

Шаг 2 - Установите пакет React Image Crop Package

Выполните следующую команду, чтобы установить пакет React Image Crop в свое приложение:

npm install react-image-crop

Шаг 3 - Создание компонента изменения размера и кадрирования изображения

Посетите каталог src вашего приложения react js и создайте форму с именем ImageResizeCropComponent.js. Добавьте в него следующий код: 

import React from 'react';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';
class ImageResizeCropComponent extends React.Component {
    state = {
        src: null,
        crop: {
            unit: '%',
            width: 20,
            aspect: 16 / 9
        }
    };
    onFileChange = (e) => {
        if (e.target.files && e.target.files.length > 0) {
            const reader = new FileReader();
            reader.addEventListener('load', () =>
                this.setState({
                    src: reader.result
                })
            );
            reader.readAsDataURL(e.target.files[0]);
        }
    };
    // If you setState the crop in here you should return false.
    onImageLoaded = (image) => {
        this.imageRef = image;
    };
    onCropComplete = (crop) => {
        this.makeClientCrop(crop);
    };
    onCropChange = (crop, percentCrop) => {
        // You could also use percentCrop:
        // this.setState({ crop: percentCrop });
        this.setState({
            crop
        });
    };
    async makeClientCrop(crop) {
        if (this.imageRef && crop.width && crop.height) {
            const croppedImageUrl = await this.getCroppedImg(
                this.imageRef,
                crop,
                'newFile.jpeg'
            );
            this.setState({
                croppedImageUrl
            });
        }
    }
    getCroppedImg(image, crop, fileName) {
        const canvas = document.createElement('canvas');
        const pixelRatio = window.devicePixelRatio;
        const scaleX = image.naturalWidth / image.width;
        const scaleY = image.naturalHeight / image.height;
        const ctx = canvas.getContext('2d');
        canvas.width = crop.width * pixelRatio * scaleX;
        canvas.height = crop.height * pixelRatio * scaleY;
        ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
        ctx.imageSmoothingQuality = 'high';
        ctx.drawImage(
            image,
            crop.x * scaleX,
            crop.y * scaleY,
            crop.width * scaleX,
            crop.height * scaleY,
            0,
            0,
            crop.width * scaleX,
            crop.height * scaleY
        );
        return new Promise((resolve, reject) => {
            canvas.toBlob(
                (blob) => {
                    if (!blob) {
                        //reject(new Error('Canvas is empty'));
                        console.error('Canvas is empty');
                        return;
                    }
                    blob.name = fileName;
                    window.URL.revokeObjectURL(this.fileUrl);
                    this.fileUrl = window.URL.createObjectURL(blob);
                    resolve(this.fileUrl);
                },
                'image/jpeg',
                1
            );
        });
    }
    render() {
        const {
            crop,
            croppedImageUrl,
            src
        } = this.state;
        return ( <div className="App">
            <div>
                <input type="file" accept="image/*" onchange={this.onFileChange} />
            </div> {
                src && ( <ReactCrop src={src} crop={crop} ruleOfThirds onImageLoaded={this.onImageLoaded} onComplete={this.onCropComplete} onchange={this.onCropChange} />
                )
            } {
                croppedImageUrl && ( <img alt="Crop" style={{ maxWidth: '100%' }} src={croppedImageUrl} />
                )
            } </div>
        );
    }
}
export default ImageResizeCropComponent;

Шаг 4 - Добавьте компонент в App.js 

На этом этапе вам нужно добавить файл ImageUploadPreviewComponent.js в файл src/App.js:

import React from 'react';
import './App.css';
import ImageResize from './components/ImageResizeCropComponent';
function App() {
return (
<div className="App">
<ImageResizeCropComponent />
</div>
);
}
export default App;