react-easy-crop - A React component to crop images with easy interactions

  •        356

The Cropper is styled with position: absolute to take the full space of its parent. Thus, you need to wrap it with an element that uses position: relative or the Cropper will fill the whole page.

https://codesandbox.io/s/q80jom5ql6
https://github.com/ricardo-ch/react-easy-crop

Dependencies:

emotion : ^9.2.3
react-emotion : ^9.2.3

Tags
Implementation
License
Platform

   




Related Projects

react-image-crop - A responsive image cropping tool for React

  •    Javascript

A responsive image cropping tool for React. Include either dist/ReactCrop.css or ReactCrop.scss.

react-native-image-crop-picker - iOS/Android image picker with support for camera, configurable compression, multiple images and cropping

  •    Objective-C

Android: The prop 'cropping' has been known to cause videos not to be display in the gallery on Android. Please do not set cropping to true when selecting videos.Module is creating tmp images which are going to be cleaned up automatically somewhere in the future. If you want to force cleanup, you can use clean to clean all tmp files, or cleanSingle(path) to clean single tmp file.

react-native-image-picker - :sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device library or directly from the camera

  •    Java

This library started as a basic bridge of the native iOS image picker, and I want to keep it that way. As such, functionality beyond what the native UIImagePickerController supports will not be supported here. Multiple image selection, more control over the crop tool, and landscape support are things missing from the native iOS functionality - not issues with my library. If you need these things, react-native-image-crop-picker might be a better choice for you. To use this library you need to ensure you match up with the correct version of React Native you are using.

react-native-image-picker - A React Native module that allows you to use native UI to select media from the device library or directly from the camera

  •    Java

This library started as a basic bridge of the native iOS image picker, and I want to keep it that way. As such, functionality beyond what the native UIImagePickerController supports will not be supported here. Multiple image selection, more control over the crop tool, and landscape support are things missing from the native iOS functionality - not issues with my library. If you need these things, react-native-image-crop-picker might be a better choice for you. IMPORTANT NOTE: You'll still need to perform step 4 for iOS and steps 2 and 5 for Android of the manual instructions below.

react-avatar-editor - Avatar & profile picture component editor

  •    Javascript

Facebook like, avatar / profile picture component. Resize, crop and rotate your uploaded image using a clear user interface. The resulting image will have the same resolution as the original image, regardless of the editor's size. If you want the image sized in the dimensions of the canvas you can use getImageScaledToCanvas.


Web Image Cropping C#

  •    DotNet

Web image cropping allows you to easily implement image cropping functionality on your website in a few minutes.

Flyimg - Microservice to resize and crop images on the fly

  •    PHP

Image resizing, cropping and compression on the fly with the impressive MozJPEG compression algorithm. One Docker container to build your own Cloudinary-like service.You pass the image URL and a set of keys with options, like size or compression. Flyimg will fetch the image, convert it, store it, cache it and serve it. The next time the request comes, it will serve the cached version.

cropper - Android widget for cropping and rotating an image.

  •    Java

The Cropper is an image cropping tool. It provides a way to set an image in XML and programmatically, and displays a resizable crop window on top of the image. Calling the method getCroppedImage() will then return the Bitmap marked by the crop window. A public method to rotate the image by a specified number of degrees is also included. This can be used to provide the user with an option to fix the image orientation should Android miscalculate the intended orientation.

imaging - Simple Go image processing package

  •    Go

Package imaging provides basic image manipulation functions (resize, rotate, flip, crop, etc.). This package is based on the standard Go image package and works best along with it.Image manipulation functions provided by the package take any image type that implements image.Image interface as an input, and return a new image of *image.NRGBA type (32bit RGBA colors, not premultiplied by alpha).

thumbor - Smart imaging service.

  •    Python

thumbor is a smart imaging service. It enables on-demand crop, resizing and flipping of images. It also features a VERY smart detection of important points in the image for better cropping and resizing, using state-of-the-art face and feature detection algorithms (more on that in Detection Algorithms).

cropperjs - JavaScript image cropper.

  •    Javascript

JavaScript image cropper.The cdnjs provides CDN support for Cropper.js's CSS and JavaScript. You can find the links here.

Croppie - A Javascript Image Cropper

  •    Javascript

First, thanks for contributing. This project is difficult to maintain with one person. Here's a "checklist" of things to remember when contributing to croppie. If you're looking for a simple server to load the demo page, I use https://github.com/tapio/live-server.

Imager - resize, crop, save images

  •    DotNet

high quality image resizing and cropping

bimg - Small Go package for fast high-level image processing powered by libvips C library

  •    Go

Small Go package for fast high-level image processing using libvips via C bindings, providing a simple, elegant and fluent programmatic API.bimg was designed to be a small and efficient library supporting a common set of image operations such as crop, resize, rotate, zoom or watermark. It can read JPEG, PNG, WEBP natively, and optionally TIFF, PDF, GIF and SVG formats if libvips@8.3+ is compiled with proper library bindings.

django-image-cropping - Django helper application to easily and non-destructively crop arbitrarily large images in admin and frontend

  •    Javascript

django-image-cropping is an app for cropping uploaded images via Django's admin backend using Jcrop. django-image-cropping is perfect when you need images with a specific size for your templates but want your users or editors to upload images of any dimension. It presents a selection with a fixed aspect ratio so your users can't break the layout with oddly-sized images.

laravel-image - Image manipulation library for Laravel 4 and 5 based on Imagine (https://github

  •    PHP

Laravel Image is an image manipulation package for Laravel 4 and 5 based on the PHP Imagine library. It is inspired by Croppa as it can use specially formatted urls to do the manipulations. It supports basic image manipulations such as resize, crop, rotation and flip. It also supports effects such as negative, grayscale, gamma, colorize and blur. You can also define custom filters for greater flexibility. The main difference between this package and other image manipulation libraries is that you can use parameters directly in the url to manipulate the image. A manipulated version of the image is then saved in the same path as the original image, creating a static version of the file and bypassing PHP for all future requests.

ngImgCrop - Image Crop directive for AngularJS (THIS PROJECT IS NOT MAINTAINED ANYMORE)

  •    Javascript

THIS PROJECT IS NOT MAINTAINED ANYMORE. You are free to fork it and start a new project. Simple Image Crop directive for AngularJS. Enables to crop a circle or a square out of an image.

darkroomjs - [UNMAINTAINED] Extensible image editing tool in your browser

  •    Javascript

DarkroomJS is a JavaScript library which provides basic image editing tools in your browser, such as rotation or cropping. It is based on the awesome FabricJS library to handle images in HTML5 canvas. It's easy to get a javascript script to crop an image in a web page. But if your want more features like rotation or brightness adjustment, then you will have to do it yourself. No more jQuery plugins here. It only uses the power of HTML5 canvas to make what ever you want with your image.

TOCropViewController - A view controller that allows users to crop UIImage objects.

  •    Objective-C

TOCropViewController is an open-source UIViewController subclass built to allow users to perform basic manipulation on UIImage objects; specifically cropping and some basic rotations. It has been designed with the iOS 8 Photos app in mind, and as such, behaves in an already familiar way. CropViewController is a Swift wrapper for TOCropViewController. It completely wraps all of the Objective-C object code in a pure Swift interface. This allows the API to look and feel 100% more Swifty, and can enable more elegant integrations with TOCropViewController in all-Swift codebases.