HarmonyOS 鸿蒙Next 编辑图片裁剪图片的能力

可以通过图片处理模块的pixelMap方法对图片进行编辑裁剪。

包括但不限于：

pixelMap.crop方法，可以根据输入的尺寸对图片进行裁剪。

pixelMap.opacity方法，可以通过设置透明比率对图片设置透明效果。

pixelMap.scale方法，可以根据输入的宽高对图片进行缩放。

pixelMap.rotate方法，可以根据输入的角度对图片进行旋转。

pixelMap.flip方法，可以根据输入的条件对图片进行翻转。

下面的demo是从图库中选取图片裁剪的：

import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { image } from '@kit.ImageKit';
import { picker } from '@kit.CoreFileKit';
import { fileIo } from '@kit.CoreFileKit';
import { common } from '@kit.AbilityKit';
import { dataSharePredicates } from '@kit.ArkData';

const context = getContext(this) as common.UIAbilityContext;
@Entry
@Component
struct PhotoSelect {
  @State pixelMap?: image.PixelMap = undefined;
  private regionItem:RegionItem = new RegionItem(0,0);
  @State isPixelMapChange: boolean = false;
  build() {
    Column() {
      Column() {
        if(this.isPixelMapChange){
          Image(this.pixelMap)
            .objectFit(ImageFit.Auto)
            .width(300)
            .height(500)
        } else {
          Image(this.pixelMap)
            .objectFit(ImageFit.Auto)
            .width(300)
            .height(500)
        }
      }
      .width('100%')
      .height('70%')
      Button('选择图片').onClick(() => {
        try {
          let uris: Array<string> = [];
          let PhotoSelectOptions = new picker.PhotoSelectOptions();
          PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
          PhotoSelectOptions.maxSelectNumber = 1;
          let photoPicker = new picker.PhotoViewPicker();
          photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
            uris = PhotoSelectResult.photoUris;
            this.testMethod(uris[0])
            let file = fileIo.openSync(uris[0], fileIo.OpenMode.READ_ONLY);
            console.info('file fd: ' + file.fd);
            let buffer = new ArrayBuffer(4096);
            let readLen = fileIo.readSync(file.fd, buffer);
            console.info('readSync data to file succeed and buffer size is:' + readLen);
            const imageSource: image.ImageSource = image.createImageSource(file.fd);
            let decodingOptions: image.DecodingOptions = {
              editable: true,
              desiredPixelFormat: 3,
            }
            imageSource.createPixelMap(decodingOptions, (err: BusinessError, pixelMap: image.PixelMap) => {
              if (err !== undefined) {
                console.error(`Failed to create pixelMap.code is ${err.code},message is ${err.message}`);
              } else {
                this.pixelMap = pixelMap
                console.info('Succeeded in creating pixelMap object.');
              }
            })
          }).catch((err: BusinessError) => {
            console.error(`Invoke photoPicker.select failed, code is ${err.code}, message is ${err.message}`);
          })
        } catch (error) {
          let err: BusinessError = error as BusinessError;
          console.error('photoPicker failed with err: ' + JSON.stringify(err));
        }
      })
      if(this.pixelMap){
        Button('裁剪').onClick(() => {
          banner(this.pixelMap!, this.regionItem.x, this.regionItem.y).then(() => {
            this.flushPixelMapChange();
          });
        })
      }
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }

  flushPixelMapChange() {
    this.isPixelMapChange = !this.isPixelMapChange;
  }

  async testMethod(uri: string) {
    let predicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates();
    predicates.equalTo(photoAccessHelper.PhotoKeys.URI, uri);
    let fetchOptions: photoAccessHelper.FetchOptions = {
      fetchColumns: [
        "title",
        photoAccessHelper.PhotoKeys.WIDTH,
        photoAccessHelper.PhotoKeys.HEIGHT,
        photoAccessHelper.PhotoKeys.DURATION,
        photoAccessHelper.PhotoKeys.SIZE,
        photoAccessHelper.PhotoKeys.DISPLAY_NAME,
        photoAccessHelper.PhotoKeys.ORIENTATION,//旋转
        photoAccessHelper.PhotoKeys.PHOTO_SUBTYPE],
      predicates: predicates
    };//"--"+"ORIENTATION: "+photoAsset.get("orientation")
    try {
      let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(getContext(this));
      let fetchResult: photoAccessHelper.FetchResult<photoAccessHelper.PhotoAsset> =
        await phAccessHelper.getAssets(fetchOptions);
      let photoAsset: photoAccessHelper.PhotoAsset = await fetchResult.getFirstObject();
      let title :photoAccessHelper.PhotoKeys = photoAccessHelper.PhotoKeys.TITLE;
      let paTitle = photoAsset.get(title.toString())
      let orientation = photoAsset.get("orientation") as number
      this.regionItem = new RegionItem(photoAsset.get("width") as number,photoAsset.get("height") as number);
      console.debug("ccTestShow","title: "+paTitle.toString()+"-width:"+photoAsset.get("height")+"-height:"+photoAsset.get("width")+"--"+"ORIENTATION: "+photoAsset.get("orientation"))
      fetchResult.close();
      return photoAsset
    } catch (err) {
      console.error('getAssets failed with err: ' + err);
    }
    return
  }
}

class RegionItem {
  /**
   * width coordinate.
   */
  x: number;

  /**
   * height coordinate.
   */
  y: number;

  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}

export async function cropCommon(pixelMap: PixelMap, cropWidth: number, cropHeight: number, cropPosition: RegionItem) {
  pixelMap.crop({
    size: {
      width: cropWidth,
      height: cropHeight
    },
    x: cropPosition.x,
    y: cropPosition.y
  });
}

// 传入image.PixelMap、图片width、图片height三个参数，获取到裁剪后的图片宽度和高度后将参数传入cropCommon方法
export async function banner(pixelMap: PixelMap, width: number, height: number) {
  if (width <= height) {
    const cropWidth = width;
    const cropHeight = Math.floor(width * 0.75);
    const cropPosition = new RegionItem(0, Math.floor((height - cropHeight) / 2));
    cropCommon(pixelMap, cropWidth, cropHeight, cropPosition);
    return;
  }
  if (width * 0.75 >= height) {
    const cropWidth = Math.floor(height / 0.75);
    const cropHeight = height;
    const cropPosition = new RegionItem(Math.floor((width - cropWidth) / 2), 0);
    cropCommon(pixelMap, cropWidth, cropHeight, cropPosition);
    return;
  }
  const cropWidth = width;
  const cropHeight = Math.floor(width * 0.75);
  const cropPosition = new RegionItem(0, Math.floor((height - cropHeight) / 2));
  cropCommon(pixelMap, cropWidth, cropHeight, cropPosition);
}

pixelMap的相关文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-image-V5#pixelmap7