All Projects → bamlab → React Native Image Resizer

bamlab / React Native Image Resizer

Licence: mit
🗻 Resize local images with React Native

Programming Languages

java
68154 projects - #9 most used programming language

Projects that are alternatives of or similar to React Native Image Resizer

Bimg
Go package for fast high-level image processing powered by libvips C library
Stars: ✭ 1,394 (+20.07%)
Mutual labels:  jpeg, resize
downscale
Better image downscale with canvas.
Stars: ✭ 80 (-93.11%)
Mutual labels:  resize, jpeg
pixl
🚀 Lightweight image processing library in C++11
Stars: ✭ 31 (-97.33%)
Mutual labels:  resize, jpeg
Sharp
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
Stars: ✭ 21,131 (+1720.07%)
Mutual labels:  jpeg, resize
jimp-compact
✏️ Lightweight version of Jimp -- An image processing library written entirely in JavaScript for Node.js
Stars: ✭ 55 (-95.26%)
Mutual labels:  resize, jpeg
Mort
Storage and image processing server written in Go
Stars: ✭ 420 (-63.82%)
Mutual labels:  jpeg, resize
Stegify
🔍 Go tool for LSB steganography, capable of hiding any file within an image.
Stars: ✭ 927 (-20.16%)
Mutual labels:  jpeg
Format parser
file metadata parsing, done cheap
Stars: ✭ 46 (-96.04%)
Mutual labels:  jpeg
Pixterm
Draw images in your ANSI terminal with true color
Stars: ✭ 782 (-32.64%)
Mutual labels:  jpeg
Svgexport
SVG to PNG/JPEG command-line tool and Node.js module
Stars: ✭ 731 (-37.04%)
Mutual labels:  jpeg
Optimise Images
Batch image resizer, optimiser and profiler using ImageMagick convert, OptiPNG, JpegOptim and optional ZopfliPNG, Guetzli and MozJPEG.
Stars: ✭ 64 (-94.49%)
Mutual labels:  jpeg
Ffjpeg
a simple jpeg codec.
Stars: ✭ 58 (-95%)
Mutual labels:  jpeg
Vue Drag Resize
Vue Component for resize and drag elements
Stars: ✭ 1,007 (-13.26%)
Mutual labels:  resize
Jpegrtspcamera
Sample RTSP server streaming MJPEG video from PC camera
Stars: ✭ 25 (-97.85%)
Mutual labels:  jpeg
Element Resize Detector
Optimized cross-browser resize listener for elements.
Stars: ✭ 1,040 (-10.42%)
Mutual labels:  resize
Scrimage
Java, Scala and Kotlin image processing library
Stars: ✭ 792 (-31.78%)
Mutual labels:  jpeg
Iconhandler
Tint you Icons, change the size, apply alpha color and set a position easily. 👓
Stars: ✭ 59 (-94.92%)
Mutual labels:  resize
Flyimg
Dockerized PHP7 application runs as a Microservice to resize and crop images on the fly. Get optimised images with MozJPEG, WebP or PNG using ImageMagick. Includes face detection, cropping, face blurring, image rotation and many other options. Abstract storage based on FlySystem in order to store images on any provider (local, AWS S3...).
Stars: ✭ 762 (-34.37%)
Mutual labels:  jpeg
Php Image Resize
PHP library to resize, scale and crop images. Cloud solution available at:
Stars: ✭ 955 (-17.74%)
Mutual labels:  resize
React Grid Table
A modular table, based on a CSS grid layout, optimized for customization.
Stars: ✭ 57 (-95.09%)
Mutual labels:  resize

React Native Image Resizer

A React Native module that can create scaled versions of local images (also supports the assets library on iOS). |react-native| react-native-image-resizer| | --- | --- | | ≤ 0.60 | 1.1.0 | | 0.61 | 1.2.0 |

Setup

Install the package:

  • React Native >= 0.60
yarn add react-native-image-resizer
cd ios && pod install
  • React Native <= 0.59
yarn add react-native-image-resizer
react-native link 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.

Manual linking

Manual link information for Android: Link

Usage example

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

ImageResizer.createResizedImage(path, maxWidth, maxHeight, compressFormat, quality, rotation, outputPath)
  .then(response => {
    // response.uri is the URI of the new image that can now be displayed, uploaded...
    // response.path is the path of the new image
    // response.name is the name of the new image with the extension
    // response.size is the size of the new image
  })
  .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

createResizedImage(
  path,
  maxWidth,
  maxHeight,
  compressFormat,
  quality,
  rotation = 0,
  outputPath,
  keepMeta = false,
  options = {}
); // Returns a Promise

The promise resolves with an object containing: path, uri, name, size (bytes), width (pixels), and height of the new file. The URI can be used directly as the source of an <Image> component.

Option Description
path Path of image file, or a base64 encoded image string prefixed with 'data:image/imagetype' where imagetype is jpeg or png.
width Width to resize to (see mode for more details)
height Height to resize to (see mode for more details)
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. On iOS, rotation is limited (and rounded) to multiples of 90 degrees.
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).
keepMeta If true, will attempt to preserve all file metadata/exif info, except the orientation value since the resizing also does rotation correction to the original image. Defaults to false, which means all metadata is lost. Note: This can only be true for JPEG images which are loaded from the file system (not Web).
options.mode Similar to react-native Image's resizeMode: either contain (the default), cover, or stretch. contain will fit the image within width and height, preserving its ratio. cover preserves the aspect ratio, and makes sure the image is at least width wide or height tall. stretch will resize the image to exactly width and height.
options.onlyScaleDown If true, will never enlarge the image, and will only make it smaller.

👉 About Bam

We are a 100 people company developing and designing multiplatform applications with React Native using the Lean & Agile methodology. To get more information on the solutions that would suit your needs, feel free to get in touch by email or through or contact form!

We will always answer you with pleasure 😁

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