st0ffern / React Native Image Cropper
Licence: mit
Crop your images with zoom and pan
Stars: ✭ 150
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Image Cropper
react-drop-n-crop
An opinionated implementation of react-dropzone and react-cropper
Stars: ✭ 17 (-88.67%)
Mutual labels: cropper, image-cropper
Cropiwa
📐 Configurable Custom Crop widget for Android
Stars: ✭ 2,185 (+1356.67%)
Mutual labels: cropper, image-cropper
Cropper
⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-cropper
Stars: ✭ 7,825 (+5116.67%)
Mutual labels: cropper, image-cropper
Jquery Cropper
A jQuery plugin wrapper for Cropper.js.
Stars: ✭ 516 (+244%)
Mutual labels: cropper, image-cropper
vcrop
A simple Vue image cropping component.
Stars: ✭ 14 (-90.67%)
Mutual labels: cropper, image-cropper
xcrop
Mobile image cropping component - Vue React 移动端裁剪组件
Stars: ✭ 27 (-82%)
Mutual labels: cropper, image-cropper
Faimagecropper
Image Cropper like Instagram
Stars: ✭ 188 (+25.33%)
Mutual labels: cropper, image-cropper
Simple Crop
全网唯一支持裁剪图片任意角度旋转、交互体验媲美原生客户端的全平台图片裁剪组件。
Stars: ✭ 294 (+96%)
Mutual labels: cropper, image-cropper
Vue Croppa
A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.
Stars: ✭ 942 (+528%)
Mutual labels: cropper, image-cropper
Panzoom
A library for panning and zooming elements using CSS transforms 🔍
Stars: ✭ 1,593 (+962%)
Mutual labels: pan
Tileview
TileView is a subclass of android.view.ViewGroup that asynchronously displays, pans and zooms tile-based images. Plugins are available for features like markers, hotspots, and path drawing.
Stars: ✭ 1,447 (+864.67%)
Mutual labels: pan
Pan card ocr project
To extract details from Indian National Identification Cards such as PAN (completed) & Aadhar, Passport, Driving License (WIP) in a structured format
Stars: ✭ 39 (-74%)
Mutual labels: pan
Panzoom
Universal pan and zoom library (DOM, SVG, Custom)
Stars: ✭ 1,003 (+568.67%)
Mutual labels: pan
Image Focus
A dependency free utility for cropping images based on a focus point ~2.13kB gzipped
Stars: ✭ 134 (-10.67%)
Mutual labels: cropper
React Pan Zoom
Generic html wrapper for pan and zoom feature for react canvas like components
Stars: ✭ 31 (-79.33%)
Mutual labels: pan
React Prismazoom
A pan and zoom component for React, using CSS transformations.
Stars: ✭ 29 (-80.67%)
Mutual labels: pan
Pan pp.pytorch
Official implementations of PSENet, PAN and PAN++.
Stars: ✭ 141 (-6%)
Mutual labels: pan
react-native-image-cropper
This Image cropper is based on the gl-react-native library
Installation
npm i -S react-native-image-cropper
or
yarn add react-native-image-cropper
Requirements
-
gl-react
You need to install gl-react.npm i -S gl-react
-
gl-react-native
You need to install gl-react-native and link the repo in RN.npm i -S gl-react-native & rnpm link
-
react-native
Android requires you to have RN 0.28 or higher!
{ImageCrop}
Props
-
image
(required): uri to image that should be cropped. -
cropHeight
(required): height of the image in cropped size. -
cropWidth
(required): width of the image in cropped size. -
zoom
: range 0 - 100 setting zoom value. where 100 = full zoom. (default: 0) -
maxZoom
: max zoom value, should be bigger than minZoom value (default: 100) -
minZoom
: min zoom value, should be smaller than maxZoom value (default: 0) -
panToMove
: Use pan to move image? (default: true) -
pinchToZoom
Use pinch to zoom image? (default: true) -
quality
: a value from 0 to 1 to describe the quality of the snapshot. 0 means 0% (most compressed) and 1 means 100% (best quality). (default: 1) -
type
: the file type default value is "png", "jpg" is also supported. Refer to implementations to see more supported values. (default: jpg) -
format
: the format of the output. Supported values: "base64", "file". (default: base64) -
filePath
: if format is "file", the path to write the image to (default: "") -
pixelRatio
: the pixel ratio to use for the rendering. By default the screen pixel scale will be used.
{ImageCrop}
Functions
-
crop()
: returns a base64 encoded image.
Example
...
import {ImageCrop} from 'react-native-image-cropper'
...
render() {
return (
<View>
<ImageCrop
ref={'cropper'}
image={this.state.image}
cropHeight={this.state.height}
cropWidth={this.state.width}
zoom={this.state.zoom}
maxZoom={80}
minZoom={20}
panToMove={true}
pinchToZoom={true}
/>
<Text onPress={this.capture()}>Capture()</Text>
</View>
)
}
capture(){
this.refs.cropper.crop()
.then(base64 => console.log(base64))
}
...
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].