oh-crop: OpenHarmony/HarmonyOS上的简单的图片剪裁库，可用于头像剪裁等常见场景。

吹白

已于 2024-10-06 15:57:31 修改

阅读量74

点赞数 2

分类专栏： HarmonyOS开发文章标签： arkui arkts 鸿蒙开发 harmonyos 鸿蒙

于 2024-10-06 15:55:57 首次发布

本文链接：https://blog.csdn.net/u013028621/article/details/142727909

版权

HarmonyOS开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

📚 简介

oh-crop: OpenHarmony/HarmonyOS上的简单的图片剪裁库，可用于头像剪裁等常见场景。

代码仓库：oh-crop

📚 下载安装

ohpm i @xinyansoft/oh-crop

OpenHarmony ohpm 环境配置等更多内容，请参考: 下载安装三方库

📚 使用

定义CropModel对象

@State private model: CropModel = new CropModel();
...  
this.model.setImage(src)
      .setFrameWidth(1000)
      .setFrameRatio(1);

使用CropView

CropView({
  model: this.model,
})
  .layoutWeight(1)
  .width('100%')

CropView仅仅包含图片的显示和手势操作、遮罩、取景框。

剪裁

let pm = await this.model.crop();

使用得到的PixelMap去实现你的业务逻辑

📚 CropModel支持的配置项

/**
* 图片uri
* 类型判断太麻烦了，先只支持string，其他形式的需要先转换成路径
*/
src: string = '';
/**
* 图片预览
*/
previewSource: string | Resource = '';
/**
* 是否可以拖动
*/
panEnabled: boolean = true;
/**
* 是否可以缩放
*/
zoomEnabled: boolean = true;
/**
* 取景框宽度
*/
frameWidth = 1000;
/**
* 取景框宽高比
*/
frameRatio = 1;
/**
* 遮罩颜色
*/
maskColor: string = '#AA000000';
/**
* 取景框边框颜色
*/
strokeColor: string = '#FFFFFF';
/**
* 图片加载监听
*/
imageLoadEventListener: ImageLoadEventListener | null = null;