# we-cropper

**Repository Path**: openharmony-sig/we-cropper

## Basic Information

- **Project Name**: we-cropper
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2022-04-16
- **Last Updated**: 2025-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# we-cropper

## 简介
> we-cropper是一款图片裁剪器，支持图片裁剪、设置裁剪区域等功能
<img src="./screenShot/演示效果.gif"/>

## 下载安装
````
npm install @ohos/we-cropper --save
````

OpenHarmony npm环境配置等更多内容，请参考 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md) 。

## 使用说明

### hml文件引入

```
<element name='wecropper' src='wecropper/src/main/js/component/index/index.hml'></element>
<div class="container">
    <wecropper id='wecropper' cropper-opt="{{cropperOpt}}" ></wecropper>
    <div class="cropper-buttons">
        <text class="text" onclick="uploadTap">上传图片</text>
        <text class="text" onclick="removeImage">移除图片</text>
        <text class="text" onclick="getCropperImage">生成图片</text>
    </div>
</div>
```

### js文件设置相关属性
```
   export default {
    data: {
        cropperOpt: {
            id: 'cropper',
            targetId: 'targetCropper',
            pixelRatio: 1,//设置屏幕密度
            width: 720,//设置显示区域宽度
            height: 720,//设置显示区域高度
            scale: 2.5,//设置缩放最大值
            zoom: 8,//设置缩放因子
			cut: {
                x: 10,//设置裁剪框左上角x坐标
                y: 200,//设置裁剪框左上角y坐标
                width: 700,//设置裁剪框宽度
                height: 700//设置裁剪框高度
            },
            boundStyle: {
                color: config.active,//设置裁剪框边角颜色
                mask: 'rgba(0,0,0,0.8)',//设置裁剪框遮罩层颜色
                lineWidth: 1//设置裁剪框边角线条粗细
            }
        },
        i:0,
    },
    onInit() {

    },
    uploadTap() {
        let temp = this.i%2 == 0?'common/images/bg-tv.jpg':'common/images/BaseAapter_test_1.PNG'
        this.$child('wecropper').pushOrign(temp)//加载图片
        this.i++
    },

    removeImage() {
        this.$child('wecropper').removeImage()//移除图片
    },

    getCropperImage() {
        this.$child('wecropper').getCropperImage()//裁剪图片
    }
}
```
## 接口说明
1. 设置屏幕密度
   `pixelRatio: 1`
2. 设置显示区域宽度
   `width: 720`
3. 设置显示区域高度
   `height: 720`
4. 设置缩放最大值
   `scale: 2.5`
5. 设置缩放因子
   `zoom: 8`
6. 设置裁剪框左上角x坐标
   `cut:{x: 10}`
7. 设置裁剪框左上角y坐标
   `cut:{y: 200}`
8. 设置裁剪框宽度
   `cut:{width: 700}`
9. 设置裁剪框高度
   `cut:{height: 700}`
10. 设置裁剪框边角颜色
    `boundStyle:{color: config.active}`
11. 设置裁剪框遮罩层颜色
    `boundStyle:{mask: 'rgba(0,0,0,0.8)'}`
12. 设置裁剪框边角线条粗细
    `boundStyle:{lineWidth: 1}`

## 约束与限制
OpenHarmony SDK版本:API version 8

## 目录结构
````
|---- wecropper  
|     |---- entry  # 示例代码文件夹
|     |---- wecropper  # wecropper库文件夹
|           |---- src\main\js\components\index  # 源代码文件夹
|           		|---- index.css   # we-cropper组件样式控制源代码
|           		|---- index.hml 	# we-cropper组件界面源代码
|           		|---- index.js 		# we-cropper组件功能源代码
|           |---- index.ets  # 对外接口
|     |---- README.MD  # 安装使用方法                    
````

## 贡献代码
使用过程中发现任何问题都可以提 [Issue](https://gitee.com/openharmony-sig/we-cropper/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/openharmony-sig/we-cropper/pulls) 。

## 开源协议
本项目基于 [MIT License](https://gitee.com/openharmony-sig/we-cropper/blob/master/LICENSE) ，请自由地享受和参与开源。