# Ohos-Image-Picker-and-Cropping

**Repository Path**: archermind-ti/Ohos-Image-Picker-and-Cropping

## Basic Information

- **Project Name**: Ohos-Image-Picker-and-Cropping
- **Description**: choosing image from camera or gallery with Crop functionality
- **Primary Language**: Java
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2021-06-04
- **Last Updated**: 2021-11-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## **Ohos-Image-Picker-and-Cropping**

### 项目介绍
从具有裁剪功能的图库或相机中选择图像。

### 功能差异
1、原库使用https://github.com/Yalantis/uCrop， 目前鸿蒙移植存在较大差异且使用不便，故采用[SimpleCropView](https://gitee.com/openharmony-tpc/SimpleCropView)代替。 该部分功能细节和UI和原库存在差异。

###  安装教程

demo，无组件库发布

### 使用说明

本例使用simplecropview库实现裁剪功能。

按照以下简单步骤将库添加到项目中。

1.  在config.json文件中，添加相机和存储权限。

```
     "reqPermissions": [
           {
             "name": "ohos.permission.DISTRIBUTED_DATASYNC"
           },
           {
             "name": "ohos.permission.GET_BUNDLE_INFO"
           },
           {
             "name": "ohos.permission.BIND_REMOTEVIEWS"
           },
           {
             "name": "ohos.permission.servicebus.ACCESS_SERVICE"
           },
           {
             "name": "ohos.permission.INTERNET"
           },
           {
             "name": "ohos.permission.CAMERA"
           },
           {
             "name": "ohos.permission.RECORD_AUDIO"
           },
           {
             "name": "ohos.permission.MICROPHONE"
           },
           {
             "name": "ohos.permission.SYSTEM_FLOAT_WINDOW"
           },
           {
             "name": "ohos.permission.SYSTEM_OVERLAY_WINDOW"
           },
           {
             "name": "ohos.permission.GET_DISTRIBUTED_DEVICE_INFO"
           },
           {
             "name": "ohos.permission.DISTRIBUTED_DEVICE_STATE_CHANGE"
           },
           {
             "name": "ohos.permission.WRITE_EXTERNAL_STORAGE"
           },
           {
             "name": "ohos.permission.READ_EXTERNAL_STORAGE"
           },
           {
             "name": "ohos.permission.READ_MEDIA"
           },
           {
             "name": "ohos.permission.WRITE_MEDIA"
           },
           {
             "name": "ohos.permission.READ_USER_STORAGE"
           },
           {
             "name": "ohos.permission.WRITE_USER_STORAGE"
           }
         ]
```
2. 将Gilide依赖项添加到你的应用程序中/build.gradle

```
    // 根目录
    repositories {
            ...
            maven {
                url 'http://106.15.92.248:8081/repository/Releases/'
            }
            ...
            jcenter()
        }



    // entry
    implementation "com.squareup.okhttp3:okhttp:3.12.1"
    implementation 'com.gitee.archermind-ti:magicalcamera:1.0.2'
    api 'io.openharmony.tpc.thirdlib:glide:1.0.4'
    implementation "io.reactivex.rxjava2:rxjava:2.1.10"

```
3. 复制 simplecropview文件夹，创建两个ability，分别复制ImagePickerAbilitySlice、CropperAbility的内容，以及所需的xml文件 到你的项目文件
4. 获取权限
```java  
       private int RESIZE_PHOTO_PIXELS_PERCENTAGE = 80;
       
           private String[] permissions = {
                   "ohos.permission.CAMERA",
                   "ohos.permission.WRITE_EXTERNAL_STORAGE",
                   "ohos.permission.READ_EXTERNAL_STORAGE",
                   "ohos.permission.MEDIA_LOCATION",
                   "ohos.permission.READ_MEDIA",
                   "ohos.permission.WRITE_MEDIA",
           };
``` 

       
```java    
       private void initWidget() {
               //权限被授予，进行图片选择操作。
               Image imgProfile = (Image) findComponentById(ResourceTable.Id_img_profile);
               Image imgPlus = (Image) findComponentById(ResourceTable.Id_img_plus);
               imgProfile.setClickedListener(component -> {
                   //点击弹出权限框
                   if (verifySelfPermission(permissions[0]) != IBundleManager.PERMISSION_GRANTED) {
       //                    requestPermissionsFromUser(permissions, 0);
                       showSettingsDialog();
                   } else {
                       showImagePickerOptions();
                   }
               });
       
               imgPlus.setClickedListener(component -> {
                   if (verifySelfPermission(permissions[0]) != IBundleManager.PERMISSION_GRANTED) {
                       requestPermissionsFromUser(permissions, 101);
                       FLAG = 1;
                   } else {
                       showImagePickerOptions();
                   }
       
               });
       
           }
```


一旦收到Uri，CropperAbility就可以创建一个位图并在屏幕上预览。
5. 经过裁剪后返回一个uri对uri进行画圆操作,即可返回圆形图片，再通过gilde组件对画出来的图片进一步操作，即可返回正常头像

###  效果展示

![](img/demo1.gif)![](img/demo2.gif)

###  版本迭代

- v1.0.1

## License

[GNU General Public License v3.0](License)