鸿蒙Next 5.0 API 14如何实现图片裁剪功能

在鸿蒙Next 5.0 API 14开发中，如何实现图片裁剪功能？具体需要调用哪些API接口？能否提供一个简单的代码示例？另外，裁剪时是否支持自定义裁剪比例或自由拖动选择区域？

2 回复

鸿蒙Next 5.0 API 14中，图片裁剪可通过Image组件的clip属性实现。例如：

Image($r('app.media.icon'))
  .clip(Shape.Circle)

支持圆形、矩形等裁剪形状。若需自定义区域，可用Canvas绘制裁剪路径。简单高效，一行代码圆你裁剪梦！

更多关于鸿蒙Next 5.0 API 14如何实现图片裁剪功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next 5.0（API 14）中，可以通过Image组件和Crop相关接口实现图片裁剪功能。以下是核心实现步骤和示例代码：

主要步骤

  1. 选择图片：使用PhotoViewPicker选择图片。
  2. 裁剪图片：通过ImageCrop接口进行裁剪。
  3. 保存结果：将裁剪后的图片保存到设备。

示例代码

import { image } from '@kit.ImageKit';
import { picker } from '@kit.CoreFileKit';
import { BusinessError } from '@kit.BasicServicesKit';

// 1. 选择图片
async function selectImage(): Promise<string> {
  const photoSelectOptions = new picker.PhotoSelectOptions();
  photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
  photoSelectOptions.maxSelectNumber = 1;

  const photoViewPicker = new picker.PhotoViewPicker();
  try {
    const photoSelectResult = await photoViewPicker.select(photoSelectOptions);
    return photoSelectResult.photoUris[0];
  } catch (err) {
    console.error(`PhotoViewPicker failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
    return '';
  }
}

// 2. 裁剪图片
async function cropImage(uri: string): Promise<string> {
  const cropOptions: image.CropOptions = {
    // 设置裁剪区域（可选）
    // x: 0, y: 0, width: 300, height: 300
  };

  try {
    const croppedImage = await image.crop(uri, cropOptions);
    return croppedImage;
  } catch (err) {
    console.error(`Crop failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
    return '';
  }
}

// 使用示例
async function main() {
  const selectedImage = await selectImage();
  if (selectedImage) {
    const croppedUri = await cropImage(selectedImage);
    console.info('Cropped image URI: ' + croppedUri);
  }
}

关键说明

  • 权限要求：需要在module.json5中声明相册和文件读写权限：
    "requestPermissions": [
  {
    "name": "ohos.permission.READ_IMAGEVIDEO",
    "reason": "$string:reason"
  },
  {
    "name": "ohos.permission.WRITE_IMAGEVIDEO", 
    "reason": "$string:reason"
  }
]
  • 裁剪参数：可通过CropOptions设置具体的裁剪区域坐标和尺寸。
  • 返回值：裁剪成功返回新图片的URI，失败返回空字符串。

注意事项

  • 确保设备上有足够的存储空间
  • 建议在UI线程外执行裁剪操作
  • 实际使用时需要添加完整的错误处理

以上代码提供了基础的图片选择和裁剪实现，可根据具体需求调整裁剪参数和UI交互。

回到顶部