# ImageKnife

**Repository Path**: scenario-samples/image-knife

## Basic Information

- **Project Name**: ImageKnife
- **Description**: 【鸿蒙 Harmony Next 示例 代码】基于OpenHarmony三方库 [ImageKnife] 进行场景开发使用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2024-12-08
- **Last Updated**: 2025-07-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于ImageKnife的图片处理
## 介绍

本项目基于OpenHarmony三方库 [ImageKnife](https://gitcode.com/openharmony-tpc/ImageKnife) 进行图片处理场景开发使用：

* 支持不同类型的本地与网络图片展示。
* 支持拉起相机拍照展示与图库照片选择展示。
* 支持图片单一种变换效果。
* 支持本地/在线图片格式：JPG、PNG、SVG、GIF、DPG、WEBP、BMP


## 效果预览
![输入图片说明](entry/src/main/resources/base/media/image_knife.gif)


## 使用说明

### 下载安装
* 根目录下的oh-package.json5中dependencies增加
  ```
  "@ohos/imageknife": "2.1.1",
  "@ohos/gpu_transform": "1.0.2"
  ```
* 并在根目录执行ohpm install


### 相关权限

1. ohos.permission.INTERNET
2. ohos.permission.MEDIA_LOCATION
3. ohos.permission.READ_MEDIA
4. ohos.permission.WRITE_MEDIA

### 依赖配置
在entry\src\main\ets\entryability\EntryAbility.ts中做如下配置初始化全局ImageKnife实例：

```typescript
import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';
import { ImageKnife } from '@ohos/imageknife'

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage) {
    windowStage.loadContent('pages/Index', (err, data) => {
    });
    // 初始化全局ImageKnife 
    ImageKnife.with(this.context);
  	// 后续访问ImageKnife请通过:ImageKnifeGlobal.getInstance().getImageKnife()方式
  }
}
```



## 实现思路

### 亮度调节功能

1. 定义Slider组件，设置onChange回调函数。当滑动条的值发生变化时，该回调函数会被触发，执行一系列操作。
具体操作包括：将滑动条当前的值value赋值给 this.brightNessValue，用于记录当前亮度值。
设置this.showUI = true，用于控制相关用户界面的显示，显示与亮度值相关的图片元素。
当滑动条值变化的模式mode为SliderChangeMode.End时，重置并启动this.textTimerController定时器。

```typescript
.onChange((value: number, mode: SliderChangeMode) => {
    this.brightNessValue = value
    this.showUI = true;
    if (mode === SliderChangeMode.End) {
    this.textTimerController.reset()
    this.textTimerController.start()
    }
    hilog.info(0x0000,TAG,'value:' + value + 'mode:' + mode.toString())
})
```

2. 构造brightnessPixelMap()函数，根据当前的亮度值（this.brightNessValue）对指定图像进行亮度调整，并获取调整后的像素图（drawPixelMap 中的 imagePixelMap）。

```typescript
  brightnessPixelMap() {
    let brightness = this.brightNessValue / 100;
    let imageKnifeOption = new RequestOption();
    new BrightnessFilterTransformation(brightness);
    imageKnifeOption.load(this.mUrl)
      .addListener({
        callback: (err: BusinessError | string, data: ImageKnifeData) => {
          this.mBrightnessPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
          return false;
        }
      })
      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
      .skipMemoryCache(true)
      .enableGPU()
      .brightnessFilter(brightness)
    this.ImageKnife?.call(imageKnifeOption);
  }
```

### 对比度调整功能

构造contrastPixelMap()函数，通过RequestOption配置对指定图像（由this.mUrl指定）应用对比度滤镜，并获取处理后的图像像素图（this.mBrightnessPixelMap）。
实例化RequestOption类，生成imageKnifeOption，用于配置图像相关操作；
使用this.contrastValue创建ContrastFilterTransformation实例transformation；
通过imageKnifeOption配置图像加载相关参数；
调用this.ImageKnife并传入imageKnifeOption。

```typescript
  contrastPixelMap() {
    let imageKnifeOption = new RequestOption();
    let transformation = new ContrastFilterTransformation(this.contrastValue);
    imageKnifeOption.load(this.mUrl)
      .addListener({
        callback: (err: BusinessError | string, data: ImageKnifeData) => {
          this.mBrightnessPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
          return false;
        }
      })
      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
      .skipMemoryCache(true)
      .enableGPU()
      .contrastFilter(this.contrastValue)
    this.ImageKnife?.call(imageKnifeOption);
  }
```

### 图片裁剪功能

构造setOptions()函数,基于传入的ArrayBuffer数据，配置并加载一个图像相关的Options对象。在配置过程中，设置了图像的宽度、高度以及裁剪函数，并最终加载ArrayBuffer数据。


```typescript
  setOptions(arrayBuffer: ArrayBuffer) {
    try {
      let optionx = new Options();
      optionx.setWidth(800).setHeight(800)
        .setCropFunction((err: BusinessError | string, pixelmap: PixelMap | null, sx: number, sy: number) => {
          hilog.info(0x0000,TAG,'PMC setCropFunction callback')
          if (err) {
            hilog.error(0x0000,TAG,'PMC crop err =' + err)
          } else {
            this.cropOptions.size.width = sx * px2vp(1);
            this.cropOptions.size.height = sy * px2vp(1);
            if (pixelmap != null) {
              this.cropOptions.src = pixelmap;
              this.canvasContext.drawImage(pixelmap, 0, 0, this.cropOptions.size.width, this.cropOptions.size.height)
            }
          }
        })
      optionx.loadBuffer(arrayBuffer, () => {
        this.options1 = optionx;
      })
    }
  }
```

### 图片旋转功能

构造transformRotate()函数，对指定图像（由this.mUrl确定）进行旋转操作，并获取旋转后的图像像素图。
具体步骤如下：
* 创建请求选项对象：实例化RequestOption类得到imageKnifeOption，用于配置图像相关的请求。
* 创建旋转变换实例：使用this.mRotate创建RotateImageTransformation实例 transformation。
* 配置图像请求：通过imageKnifeOption配置图像加载相关参数。加载图像的URL为this.mUrl，添加一个回调函数来处理图像加载完成后的结果，设置图像视图大小为200x200（经过vp2px转换后的像素值），跳过内存缓存，并设置旋转角度为this.mRotate。
* 调用图像处理函数：调用this.ImageKnife并传入imageKnifeOption。如果图像加载成功，将结果中的imagePixelMap赋值给this.mRotatePixelMap。

```typescript
  transformRotate() {
    let imageKnifeOption = new RequestOption();
    let transformation = new RotateImageTransformation(this.mRotate);
    imageKnifeOption.load(this.mUrl)
      .addListener({
        callback: (err: BusinessError | string, data: ImageKnifeData) => {
          this.mRotatePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
          return false;
        }
      })
      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
      .skipMemoryCache(true)
      .rotateImage(this.mRotate)
    this.ImageKnife?.call(imageKnifeOption);
  }
```

## 工程目录
```
entry/src/main/ets/
|---common
|   |---Constants.ets           // 常量
|---component
|   |---BrightNess.ets          // 亮度调节
|   |---Contrast.ets            // 对比度调整
|   |---CropImage.ets           // 图片裁剪
|   |---TransformRotate.ets     // 图片旋转
|---entryability
|   |---EntryAbility.ets
|---model
|   |---Tabar.ets               // Tabbar模型
|---pages
|   |---CapabilityList.ets      // 更多能力列表页面
|   |---Index.ets               // 主页
|---utils
|   |---PermissionsUtil.ets     // 权限操作工具类
|   |---PictureUtil.ets         // 图片操作工具类
```
## 一份简单的问卷反馈

亲爱的Harmony Next开发者，您好！<br>
为了协助您高效开发，提高鸿蒙场景化示例的质量，希望您在浏览或使用后抽空填写一份简单的问卷，我们将会收集您的宝贵意见进行优化:heart:

[:arrow_right: **点击此处填写问卷** ](https://wj.qq.com/s2/19042938/95ab/)

<div style="text-align: left;">