react-optimizer-image-cropper

A React component for optimizing and cropping images with ease. This library provides a user-friendly interface for image cropping and optimization, making it simple to integrate into your React applications.

Getting started

You can install the package using npm or yarn:

npm install react-optimizer-image-cropper

or

yarn add react-optimizer-image-cropper

Example

Here is an example of how to use the react-optimizer-image-cropper in your React project:

import React, { useRef, useState } from 'react';
import { ImageCropper, ImageCropperRef } from "react-optimizer-image-cropper";

const App = () => {
  const [file, setFile] = useState<File | null>(null);
  const handleChangeInputFile = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      setFile(e.target.files[0]);
    }
  };

  const cropperRef = useRef<ImageCropperRef>(null);

  const handleFileSourceDownload = async () => {
    if (cropperRef.current) {
      const file = await cropperRef.current.returnOriginal();

      if (file) {
        const url = URL.createObjectURL(file);
        const a = document.createElement('a');
        a.href = url;
        a.download = `${file.name}`;
        a.click();
        URL.revokeObjectURL(url);
      }
    }
  };

  const handleFileOptimizedDownload = async () => {
    if (cropperRef.current) {
      const blob = await cropperRef.current.returnOptimized();

      if (blob) {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `${file?.name.split('.', 1)}_optimized.png`
        a.click();
        URL.revokeObjectURL(url);
      }
    }
  };

  const handleFileCroppedDownload = async (type: 'webp' | 'png') => {
    if (cropperRef.current) {
      const blob = await cropperRef.current.returnResult(type);

      if (blob) {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `${file?.name.split('.', 1)}_cropped.${type}`;
        a.click();
        URL.revokeObjectURL(url);
      }
    }
  };
  
  return (
    <div>
      <input
        type='file'
        accept='image/*'
        onChange={handleChangeInputFile}
      />

      <ImageCropper
        ref={cropperRef}
        src={file}
      />

    </div>
  );
};

export default App;

Functions

cropperRef.current.returnOriginal();

return original src file

cropperRef.current.returnOptimized();

return optimized blob; if optimization was skipped (image is already within maxDimension and is webp), returns the original file

cropperRef.current.returnResult(type);

return cropped blob with format webp/png (default: webp)

Props

The ImageCropper component accepts the following props:

| Name | Description | Default Value | |---------------------|-------------------------------------------------------------------------------------------------|---------------| | ref | Ref to access returnResult, returnOptimized, returnOriginal | null | | src | The source file to crop | null | | optimized | When true, resizes the image to maxDimension before cropping (skipped if already webp and within limits) | true | | maxDimension | Proportional reduction of the image by the larger side to the specified value | 2000 | | aspect | Aspect ratio for the crop area (e.g., 16/9, 4/3) | undefined | | scale | Scale of the image | 1 | | rotate | Rotation of the image in degrees | 0 | | classNameWrapper | Class name for the outer wrapper div | undefined | | className | Class name for the ReactCrop element | undefined | | classNameImage | Class name for the image element | undefined | | loader | Custom loader node shown while the image is not yet loaded | undefined | | refPreviewBox | Ref to a <canvas> element that will receive a live crop preview | undefined | | circularCrop | Show the crop area as a circle. If aspect is not 1, the circle becomes an oval | false | | ruleOfThirds | Show rule of thirds lines in the cropped area | false | | disabled | User cannot resize or draw a new crop. Adds ReactCrop--disabled class | false | | locked | User cannot create or resize a crop, but can still drag it. Adds ReactCrop--locked class | false | | keepSelection | Prevents the crop from being cleared when the user clicks outside it | false | | minWidth | Minimum crop width in pixels | 0 | | minHeight | Minimum crop height in pixels | 0 | | maxWidth | Maximum crop width in pixels | undefined | | maxHeight | Maximum crop height in pixels | undefined | | renderSelectionAddon | Render a custom element inside the crop selection | undefined | | onDragStart | Callback fired when the user starts dragging or resizing | undefined | | onDragEnd | Callback fired when the user releases after dragging or resizing | undefined | | style | Inline styles for the ReactCrop element | undefined | | ariaLabels | Override the built-in English aria labels for the crop handles | built-in |

See the demo

License

This project is licensed under the MIT License. See the LICENSE file for more information.