Skip to content

shiv19/nativescript-imagecropper

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

A {N} Image Cropping Plugin

License npm npm GitHub release

Notes

iOS 8+

Android 17+

Based on

TOCropViewController for iOS

uCrop for Android

Installation

Run tns plugin add nativescript-imagecropper

Screenshots

Cropper UI & End result (android)

      

Cropper UI (iOS)

Usage (for TS demo, please see the demo folder)

To use the image cropping module you must first require it.

var ImageCropper = require("nativescript-imagecropper").ImageCropper;

How to get the image source, from nativescript-camera plugin

var camera = require("nativescript-camera");

// You might want to request camera permissions first
// check demo folder for sample implementation

camera.takePicture({width:300,height:300,keepAspectRatio:true})
  .then((imageAsset) => {
      let source = new imageSource.ImageSource();
      source.fromAsset(imageAsset).then((source) => {
        // now you have the image source    
        // pass it to the cropper                
      });
  }).catch((err) => {
      console.log("Error -> " + err.message);
  });

Methods

show(ImageSource): Returns a cropped ImageSource

var imageCropper = new ImageCropper();
imageCropper.show(imageSource).then((args) => {
  console.dir(args);
  if(args.image !== null){
    imageView.imageSource = args.image;
  }
})
.catch(function(e){
  console.dir(e);
});

show(ImageSource,Options): Returns a cropped and resized ImageSource

var imageCropper = new ImageCropper();
imageCropper.show(imageSource,{width:300,height:300}).then((args) => {
  console.dir(args);
  if(args.image !== null){
    imageView.imageSource = args.image;
  }
})
.catch(function(e){
  console.dir(e);
});

Options

Option Type Description
width number The width of the image you would like returned.
height number The height of the image you would like returned.
lockSquare boolean Pass this as true, to lock square aspect ratio on iOS, on android, this option doesn't make any difference.

Additional notes for Android

You can override library colors just specifying colors with the same names in your colors.xml file. For example:

<color name="ucrop_color_toolbar">#000000</color>

This will make toolbar color black if specified inside your App_Resources/Android/values/colors.xml file.

(thanks to @chrispoket99 for mentioning this)

Returned Result Arguments

Argument Type Result(s)
response string Success
Cancelled
Error
image ImageSource null if there was an error or was cancelled
ImageSource on success

About

A nativescript image cropping plugin.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 83.2%
  • JavaScript 8.0%
  • Shell 6.8%
  • HTML 1.8%
  • Ruby 0.2%