HarmonyOS 鸿蒙Next 图片裁剪如何实现

图片裁剪/偏移/旋转/翻转/透明度变化场景可以参考下如下demo

import { image } from '@kit.ImageKit'
interface GeneratedTypeLiteralInterface_1 {
  textContent;
  action;
}
@Entry
@Component
struct Index {
  @State imagePixelMap: PixelMap | undefined = undefined
  @State edit: boolean = false
  aboutToAppear(): void {
  }
  @Builder
  buttonModel($$: GeneratedTypeLiteralInterface_1) {
    Button($$.textContent)
      .fontSize(14)
      .height(30)
      .width(60)
      .borderRadius(10)
      .backgroundColor('#E8A027')
      .onClick(() => {
        $$.action
        this.edit = true
      })
  }
  async get_pixelmap() {
    // 获取resourceManager资源管理
    const context = getContext(this)
    const resourceMgr = context.resourceManager
    // 获取rawfile文件夹下httpimage.PNG的ArrayBuffer
    const fileData = await resourceMgr.getMediaContent($r('app.media.testImg'))
    const buffer = fileData.buffer
    // 创建imageSource
    const imageSource = image.createImageSource(buffer)
    // 创建PixelMap
    const pixelMap = await imageSource.createPixelMap()
    return pixelMap
  }
  // 对pixelMap进行裁剪
  async crop_image() {
    let pixelMap = await this.get_pixelmap()
    // x：裁剪起始点横坐标0
    // y：裁剪起始点纵坐标0
    // height：裁剪高度300，方向为从上往下（裁剪后的图片高度为300）
    // width：裁剪宽度300，方向为从左到右（裁剪后的图片宽度为300）
    pixelMap.crop({ x: 0, y: 0, size: { height: 300, width: 300 } })
    this.imagePixelMap = pixelMap
  }
  // 对pixelMap进行缩放
  async scale_image() {
    let pixelMap = await this.get_pixelmap()
    pixelMap.scale(0.5, 0.5)
    this.imagePixelMap = pixelMap
  }
  // 对pixelMap进行偏移
  async translate_image() {
    let pixelMap = await this.get_pixelmap()
    pixelMap.translate(100, 100);
    this.imagePixelMap = pixelMap
  }
  // 对pixelMap进行旋转
  async rotate_image() {
    let pixelMap = await this.get_pixelmap()
    pixelMap.rotate(90);
    this.imagePixelMap = pixelMap
  }
  // 对pixelMap进行翻转
  // 垂直翻转
  async flip_image() {
    let pixelMap = await this.get_pixelmap()
    pixelMap.flip(false, true);
    this.imagePixelMap = pixelMap
  }
  // 对pixelMap进行透明度调整
  async opacity_image() {
    let pixelMap = await this.get_pixelmap()
    pixelMap.opacity(0.5);
    this.imagePixelMap = pixelMap
  }
  build() {
    Column() {
      Row() {
        Button("裁剪").onClick(() => {
          this.crop_image()
        })
      }
      Row() {
        Image($r('app.media.testImg'))
          .objectFit(ImageFit.Contain)
          .width('50%')
        Image(this.imagePixelMap)
          .objectFit(ImageFit.Contain)
          .width('50%')
      }.height('70%').width('100%')
    }.height('100%').width('100%')
  }
}