No description, website, or topics provided.
Branch: master
Clone or download
Latest commit e377f7f Jan 28, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src
.gitignore
README.md

README.md

Capacitor Image Crop

npm npm

Installation

  • npm i capacitor-image-crop

Usage

Android

Add the following to your Android.manifest

<activity
            android:name="com.yalantis.ucrop.UCropActivity"
            android:screenOrientation="portrait"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

customize the cropper activity

   <!--uCrop Activity-->
    <color name="ucrop_color_toolbar">#FF6E40</color>
    <color name="ucrop_color_statusbar">#CC5833</color>
    <color name="ucrop_color_toolbar_widget">#fff</color>
    <color name="ucrop_color_widget">#000</color>
    <color name="ucrop_color_widget_active">#FF6E40</color>
    <color name="ucrop_color_widget_background">#fff</color>
    <color name="ucrop_color_widget_text">#000</color>
    <color name="ucrop_color_progress_wheel_line">#808080</color>
    <color name="ucrop_color_crop_background">#000</color>

    <!--Crop View-->
    <color name="ucrop_color_default_crop_grid">#80ffffff</color>
    <color name="ucrop_color_default_crop_frame">#ffffff</color>
    <color name="ucrop_color_default_dimmed">#8c000000</color>
    <color name="ucrop_color_default_logo">#4f212121</color>
import { ImageCrop } from 'capacitor-image-crop';
const crop = new ImageCrop();

crop.show({
    source:'path' // use `~/` for app root
    width:300,
    height:300,
    ratio:"16:9"
}).then(response =>{
   // response.value image path
})
.catch(err =>{})

Api

Method Default Type Description
show(options: { source: string, width: number, height: number, ratio: string }) Promise<{value:string}> Show cropper