Skip to content

hoisel/capacitor-image-crop

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Swift 40.4%
  • Java 35.2%
  • TypeScript 10.3%
  • Ruby 6.9%
  • Objective-C 5.2%
  • JavaScript 2.0%