How to use react-image-crop - 8 common examples

To help you get started, we’ve selected a few react-image-crop examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github carbon-app / carbon / components / ImagePicker.js View on Github external
static getDerivedStateFromProps(nextProps, state) {
    if (state.crop) {
      // update crop for editor container aspect-ratio change
      return {
        crop: makeAspectCrop(
          {
            ...state.crop,
            aspect: nextProps.aspectRatio
          },
          state.imageAspectRatio
        )
      }
    }
    return null
  }
github CheesecakeLabs / react-next-boilerplate / components / molecules / image-crop / index.js View on Github external
onImageLoaded = image => {
    const { cropShape } = this.props
    let { crop } = this.props
    // when the shape is a circle the aspect should be 1
    if (cropShape === 'circle') {
      crop = { ...crop, aspect: 1 }
    }
    const cropProperties = makeAspectCrop(
      {
        ...crop,
      },
      image.width / image.height
    )

    const pixelToCrop = getPixelCrop(image, cropProperties)
    this.setState({
      crop: cropProperties,
      originalImage: image,
      pixelCrop: pixelToCrop,
    })
  }
github CheesecakeLabs / react-next-boilerplate / components / molecules / image-crop / index.js View on Github external
onImageLoaded = image => {
    const { cropShape } = this.props
    let { crop } = this.props
    // when the shape is a circle the aspect should be 1
    if (cropShape === 'circle') {
      crop = { ...crop, aspect: 1 }
    }
    const cropProperties = makeAspectCrop(
      {
        ...crop,
      },
      image.width / image.height
    )

    const pixelToCrop = getPixelCrop(image, cropProperties)
    this.setState({
      crop: cropProperties,
      originalImage: image,
      pixelCrop: pixelToCrop,
    })
  }
github carbon-app / carbon / components / ImagePicker.js View on Github external
onImageLoaded(image) {
    const imageAspectRatio = image.width / image.height
    const initialCrop = {
      x: 0,
      y: 0,
      width: 100,
      aspect: this.props.aspectRatio
    }

    this.setState({
      imageAspectRatio,
      crop: makeAspectCrop(initialCrop, imageAspectRatio)
    })
  }
github prabeen04 / ant-dashboard / src / components / utils / ImageCropper.js View on Github external
onImageLoaded = (image) => {
    const crop = makeAspectCrop({
      x: 0,
      y: 0,
      aspect: 16 / 9,
      width: 50,
    }, image.width / image.height);

    const pixelCrop = {
      x: Math.round(image.naturalWidth * (crop.x / 100)),
      y: Math.round(image.naturalHeight * (crop.y / 100)),
      width: Math.round(image.naturalWidth * (crop.width / 100)),
      height: Math.round(image.naturalHeight * (crop.height / 100)),
    };

    this.renderCropPreview(image, pixelCrop);

    this.setState({ crop });
github charlessolar / eShopOnContainersDDD / src / Web / src / app / components / inputs / image.tsx View on Github external
private onImageLoaded = (image: HTMLImageElement) => {
    const { imageRatio } = this.props;

    this.setState({
      crop: ReactCrop.makeAspectCrop({
        x: 10,
        y: 10,
        width: 100,
        height: 100,
        aspect: imageRatio,
      }, image.naturalWidth / image.naturalHeight)
    });
  }
github jaxball / advis.js / src / explanations / Explanations.js View on Github external
onImageLoaded = image => {
    this.setState({
      crop: makeAspectCrop({
        x: 25,
        y: 25,
        aspect: 1 / 1,
        width: 227,
      }, 
      image.width / image.height), 
      image: image,
    });
  }
github webkom-co / airframe-next / features / CropImage / ExampleProvider.js View on Github external
import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
const ReactCrop = typeof window !== 'undefined' ? require('react-image-crop').default : null;

import {
    Row,
    Col,
    Button
} from './../../components';

const _document = typeof document !== 'undefined' ? document : null;
const _window = typeof window !== 'undefined' ? window : null;

const initialPosition = {
    x: 10,
    y: 10,
    width: 80,
    height: 80,
}

react-image-crop

A responsive image cropping tool for React

ISC
Latest version published 2 months ago

Package Health Score

85 / 100
Full package analysis