Demo

Live Demo

click Here

Movie demo

Here is a short video demonstration.

Picture demo

Scenario demo

Start screen

Upload zone

When the picture is ready to read to the browser, she's already compressed on fly with WebWorker.

Crop zone

You have a little round view, this is preview of final result.

Filter zone

You have 7 tools for adding some filters to your picture.

Final screen

The picture is displayed with all specifications (crop, filters) setted during the process.

All settings (Compressed picture, cropped picture & filter css setting) are in localStorage & session Storage

All Dependencies for this component

Material-ui/core & Material-ui/icons fro the design.
React-dropzone for the upload zone.
Browser-image-compression fro compress the picture on fly with webWorker.
cropperjs for cropping the picture.
React-responsive-modal for Modal cropper component.
React-router-dom for routing the app pages.
React-toastify for the toast info at each step.

How to test & use this component?

You need to clone or download the repo After that, at the root of the app type

npm i

yarn

for install all dependencies

And then, type

npm start

yarn start

For starting the app at

http://localhost:3000

How to use this component easy?

import {Fragment} from "react";
import useLocalStorage from "./hooks/storageHooks/useLocalStorage";
import { Avatar } from "@material-ui/core/";
import PictureCompress from "./profilePictureResize/PictureCompress";

const ProfilPictureComponent = () => {
  //  Use LocalStorage custom hook for getting the  cropped picture
  const [croppedImg] = useLocalStorage({}, "imgBase64Cropped");
  // Use LocalStorage for getting the style of picture
  const [ImageStyle] = useLocalStorage({}, "styleImg");
  return (
    <Fragment>
        <div>
        {/*If image is present to localstorage then display this*/}
          {croppedImg.imageDestination && (
            <img
              id="profile-picture"
              src={croppedImg.imageDestination}
              style={ImageStyle}
              alt="profile"
            />
          )}
          {/* Else display avatar icon from material-ui */}
          {!croppedImg.imageDestination && (
            <Avatar
              id="profile-picture"
              style={{
                width: 253,
                height: 253,
                boxShadow: "7px 7px 21px #808080",
              }}
            />
          )}
        </div>
         {/*The button component for opening the upload zone*/}
        <PictureCompress />
    </Fragment>
  );
};

export default ProfilPictureComponent;

Detailed structure diagram of src folder:

src
└── components
    ├── hooks
    │   └── storageHooks
    │       ├── useLocalStorage.js #reusable customHook from localStorage
    │       └── useSessionStorage.js #reusable customHook from sessionStorage
    │
    ├── profilePictureResize #folder for all pictures processing
    │   ├── pictureCropper #Cropper component
    │   │   ├── pictureCropper.css
    │   │   └── pictureCropper.js
    │   │
    │   ├── pictureFilters #Filters components
    │   │   ├── pictureFilters.css
    │   │   ├── PictureFilters.js
    │   │   ├── SidebarItem.js
    │   │   └── Slider.js
    │   │
    │   ├── ModalCropper.js #Modal for cropper step & redirect to filters tools
    │   ├── ModalFilters.js # Modal for add filters step ( final step & redirect to Home)
    │   ├── PictureCompress.js #Button for upload, webworker picture compression "on fly" & redirect to cropper step.
    │   └── profilePictureResize.css # global css
    │
    │
    └── Home.js #component for displaying result after all steps or avatar if picture is not in localStorage