实现图片处理功能鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本项目基于OpenHarmony三方库 ImageKnife 进行图片处理场景开发使用：

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

实现图片处理功能源码链接

效果预览

使用说明

下载安装

• 根目录下的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实例：

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定时器。

.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）。

  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。

  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数据。

  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。

  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);
  }