Giter Club home page Giter Club logo

react-native-image-resizer's Introduction

React Native Image Resizer

A React Native module that can create scaled versions of local images (also supports the assets library on iOS).

Setup

Install the package:

React-Native 0.29.2+

npm install --save react-native-image-resizer
react-native link react-native-image-resizer

React-Native < 0.29.2

npm install rnpm -g
rnpm install react-native-image-resizer

Android

Note: on latest versions of React Native, you may have an error during the Gradle build on Android (com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim). Run cd android && ./gradlew clean to fix this.

Usage example

import ImageResizer from 'react-native-image-resizer';

ImageResizer.createResizedImage(imageUri, newWidth, newHeight, compressFormat, quality, rotation, outputPath).then((resizedImageUri) => {
  // resizeImageUri is the URI of the new image that can now be displayed, uploaded...
}).catch((err) => {
  // Oops, something went wrong. Check that the filename is correct and
  // inspect err to get more details.
});

Sample app

A basic, sample app is available in the example folder. It uses the module to resize a photo from the Camera Roll.

API

promise createResizedImage(path, maxWidth, maxHeight, compressFormat, quality, rotation = 0, outputPath)

The promise resolves with a string containing the uri of the new file.

Option Description
path Path of image
maxWidth Image max width (ratio is preserved)
maxHeight Image max height (ratio is preserved)
compressFormat Can be either JPEG, PNG or WEBP (android only).
quality A number between 0 and 100. Used for the JPEG compression.
rotation Rotation to apply to the image, in degrees, for android only. On iOS, the resizing is done such that the orientation is always up.
outputPath The resized image path. If null, resized image will be stored in cache folder. To set outputPath make sure to add option for rotation too (if no rotation is needed, just set it to 0).

Other open-source modules by the folks at BAM

react-native-image-resizer's People

Contributors

4ian avatar almouro avatar timzaak avatar benjmichel avatar superandrew213 avatar st0ffern avatar nlt2390 avatar lukefanning avatar sscaff1 avatar npomfret avatar zhipan1 avatar

Watchers

Gevorg avatar James Cloos avatar  avatar Armen Youssefian avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.