Giter VIP home page Giter VIP logo

cordova-plugin-crop's Introduction

cordova-plugin-crop

Crop an image in a Cordova app

Install

$ cordova plugin add --save cordova-plugin-crop

Usage

plugins.crop(function success () {

}, function fail () {

}, '/path/to/image', options)

or, if you are running on an environment that supports Promises (Crosswalk, Android >= KitKat, iOS >= 8)

plugins.crop.promise('/path/to/image', options)
.then(function success (newPath) {

})
.catch(function fail (err) {

})

API

  • quality: Number

The resulting JPEG quality. default: 100

Ionic / Typescript Example Angular 2 Service

This is an example service that uses ionic-native's built in camera and the cordova-plugin-crop to created a cropped version of the image and return the file path.

import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Camera } from 'ionic-native';

declare var plugins: any;

@Injectable()
export class CameraService {

  public options: any = {
        allowEdit: true,
        sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
        mediaType: Camera.MediaType.ALLMEDIA,
        destinationType: Camera.DestinationType.FILE_URI
  }
  
  constructor(public platform: Platform) {}

  // Return a promise to catch errors while loading image
  getMedia(): Promise<any> {
    return new Promise((resolve, reject) => {
      // Get Image from ionic-native's built in camera plugin
      Camera.getPicture(this.options).then((fileUri) => {
        // Crop Image, on android this returns something like, '/storage/emulated/0/Android/...'
        // Only giving an android example as ionic-native camera has built in cropping ability
        if (this.platform.is('android') {
          // Modify fileUri format, may not always be necessary
          fileUri = 'file://' + fileUri;
          const options = { quality: 100 };
          /* Using cordova-plugin-crop starts here */
          plugins.crop.promise(fileUri, options).then( (path) => {
            // path looks like 'file:///storage/emulated/0/Android/data/com.foo.bar/cache/1477008080626-cropped.jpg?1477008106566'
            console.log('Cropped Image Path!: ' + path);
            // Do whatever you want with new path such as read in a file
            // Here we resolve the path to finish, but normally you would now want to read in the file
            resolve(path);
          }).catch( (error) => {
            reject(error);
          });
        }
      }).catch((error) => {
        reject(error);
      }
    });
  }
  
}  

Libraries used

License

MIT © Jeduan Cornejo

cordova-plugin-crop's People

Contributors

jeduan avatar miscampbell avatar

Watchers

Abdul Wahab 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.