flyfloor / React Image Cropper
Licence: mit
react image crop
Stars: ✭ 170
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to React Image Cropper
react-drop-n-crop
An opinionated implementation of react-dropzone and react-cropper
Stars: ✭ 17 (-90%)
Mutual labels: image-cropper
Cropper
⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-cropper
Stars: ✭ 7,825 (+4502.94%)
Mutual labels: image-cropper
xcrop
Mobile image cropping component - Vue React 移动端裁剪组件
Stars: ✭ 27 (-84.12%)
Mutual labels: image-cropper
vue-slim-cropper
💇♀️ A simple and elegant mobile image crop upload component for Vue 2.x | 简洁易用的 vue 移动端图片裁剪上传组件
Stars: ✭ 34 (-80%)
Mutual labels: image-cropper
Smartcropper
🔥 A library for cropping image in a smart way that can identify the border and correct the cropped image. 智能图片裁剪框架。自动识别边框,手动调节选区,使用透视变换裁剪并矫正选区;适用于身份证,名片,文档等照片的裁剪。
Stars: ✭ 3,665 (+2055.88%)
Mutual labels: image-cropper
Antd Img Crop
🔪 An image cropper for Ant Design Upload
Stars: ✭ 207 (+21.76%)
Mutual labels: image-cropper
Image Crop Element
A custom element for cropping a square image. Returns x, y, width, and height.
Stars: ✭ 115 (-32.35%)
Mutual labels: image-cropper
Mantis
A photo cropping tool which mimics Photo.app written by Swift.
Stars: ✭ 270 (+58.82%)
Mutual labels: image-cropper
Vue Croppa
A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.
Stars: ✭ 942 (+454.12%)
Mutual labels: image-cropper
Jquery Cropper
A jQuery plugin wrapper for Cropper.js.
Stars: ✭ 516 (+203.53%)
Mutual labels: image-cropper
ionic3-image-handling
In this ionic tutorial you will learn how to access the image gallery and take pictures from an ionic app. Also we will show you how to add a image cropper. This ionic tutorial includes a working ionic app example you can reuse for your needs.
Stars: ✭ 35 (-79.41%)
Mutual labels: image-cropper
Imagepicker
Android下的图片选择与裁剪开源库(android image picker and cropper library)
Stars: ✭ 223 (+31.18%)
Mutual labels: image-cropper
Simple Crop
全网唯一支持裁剪图片任意角度旋转、交互体验媲美原生客户端的全平台图片裁剪组件。
Stars: ✭ 294 (+72.94%)
Mutual labels: image-cropper
React Native Image Cropper
Crop your images with zoom and pan
Stars: ✭ 150 (-11.76%)
Mutual labels: image-cropper
Fileuploader
Beautiful and powerful HTML file uploading tool. A jQuery, PHP and Node.js plugin that transforms the standard input into a revolutionary and fancy field on your page.
Stars: ✭ 111 (-34.71%)
Mutual labels: image-cropper
Flutter image cropper
A Flutter plugin for Android and iOS supports cropping images
Stars: ✭ 723 (+325.29%)
Mutual labels: image-cropper
collaborators wanted
I have barely no time work on improve this project, needs collaborators for project maintenance.
React Image Cropper
A React.JS Image Cropper Touch supported
Custom:
- initial cropper frame position
- frame width, height, ratio
- crop event
Hot to Use
-
import {Cropper} from 'react-image-cropper'
-
styles are all inline
-
define Cropper with src, and ref to execute crop method
<Cropper
src="http://braavos.me/images/posts/college-rock/the-smiths.png"
ref={ ref => { this.cropper = ref }}
/>
- crop and get image url
image.src = this.cropper.crop()
- get crop values:
const values = this.cropper.values()
values:
{
// display values
display: {
width, // frame width
height, // frame height
x, // original x position
y, // original y position
imgWidth, // img width
imgHeight, // img height
},
// original values
original: {
width, // frame width
height, // frame height
x, // original x position
y, // original y position
imgWidth, // img width
imgHeight, // img height
}
}
- onChange for preview
(values) => onChange(values)
- custom use
prop | value |
---|---|
ratio | width / height |
width | cropper frame width |
height | cropper frame height |
originX | cropper original position(x axis), accroding to image left |
originY | cropper original position(Y axis), accroding to image top |
fixedRatio | turn on/off fixed ratio (bool default true) |
allowNewSelection | allow user to create a new selection instead of reusing initial selection (bool default true) |
styles | specify styles to override inline styles |
onImgLoad | specify fuction callback to run when the image completed loading |
beforeImgload | specify function callback to run when the image size value is ready but image is not completed loading |
onChange | triggred when dragging stop, get values of cropper |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].