we-cropper

npm install @ohos/we-cropper --save

<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>

   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()//裁剪图片
    }
}

|---- 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  # 安装使用方法