react-drop-n-crop - An opinionated implementation of react-dropzone and react-cropper

  •        335

A combined implementation of react-dropzone and react-cropper (Cropper.js) for front-end image upload/validation/cropping. ! See the Stylus Variables section below for variables/details.

https://synapsestudios.github.io/react-drop-n-crop/
https://github.com/synapsestudios/react-drop-n-crop

Dependencies:

classnames : ^2.2.5
lodash.includes : ^4.3.0
prop-types : ^15.5.8
react-cropper : ^0.12.0
react-dropzone : ^3.13.0

Tags
Implementation
License
Platform

   




Related Projects

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

  •    Javascript

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.

react-native-perspective-image-cropper - Perform custom crop, resizing and perspective correction 📐🖼

  •    Java

This library uses react-native-svg, you must install it too. See https://github.com/react-native-community/react-native-svg for more infos.

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-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.


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.

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.

ImageCropper base on AjaxControlToolkit

  •    

The image cropper provides a way to draw a crop area on an image and capture the coordinates of the drawn crop area. This control is migrated from another tool ( http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous), which is base on the Pr...

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.

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.

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.

vue-croppa - A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.

  •    Vue

A simple straightforward customizable mobile-friendly image cropper for Vue 2.0. A two-way binding prop. It syncs an object from within the croppa component with a data in parent. We can use this object to call useful methods (Check out "Methods" section). Since v1.0.0, you don't need this anymore, the ref on component can also be used to call methods.

RSKImageCropper - An image cropper / photo cropper for iOS like in the Contacts app with support for landscape orientation

  •    Objective-C

An image cropper for iOS like in the Contacts app with support for landscape orientation. RSKImageCropper requires iOS 6.0 or later.

Imager - resize, crop, save images

  •    DotNet

high quality image resizing and cropping

TakePhoto - 一款用于在Android设备上获取照片(拍照或从相册、文件中选择)、裁剪图片、压缩图片的开源工具库

  •    Java

一款用于在Android设备上获取照片(拍照或从相册、文件中选择)、裁剪图片、压缩图片的开源工具库

react-dnd-touch-backend - Touch Backend for react-dnd

  •    Javascript

Since native Drag-n-Drop is not currently supported in touch devices. A custom DragPreview is required. Check out the example for a sample implementation.We might try to build it directly in the Backend itself in the future to compensate for this limitation.

react-smooth-dnd - react wrapper components for smooth-dnd

  •    Javascript

A fast and lightweight drag&drop, sortable library for React with many configuration options covering many d&d scenarios. It uses css transitions for animations so it's hardware accelerated whenever possible. This library consists wrapper React components over smooth-dnd library.

CropperNoCropper - Instagram Style Image Cropper for Android (Library)

  •    Java

This is a lightweight Image Cropper for Android which also supports no-crop feature. Here's a short gif showing how it works.

react-dnd - Drag and Drop for React

  •    TypeScript

Drag and Drop for React. Big thanks to BrowserStack for letting the maintainers use their service to debug browser issues.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.