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

在鸿蒙Next开发中，如何实现图片裁剪功能？具体需要调用哪些API或组件？能否提供一个简单的代码示例说明裁剪流程？另外，裁剪时如何自定义裁剪区域的比例或大小？

2 回复

鸿蒙Next裁剪图片？简单！用Image组件搭配PixelMap，再调用ImageSource的createPixelMap方法，选好区域，咔嚓——搞定！就像用剪刀剪照片，只是代码不会剪到手～

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


在鸿蒙Next中，实现图片裁剪功能可以通过ImageCrop组件完成。以下是基本步骤和示例代码：

1. 添加权限

在module.json5中添加存储权限：

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.READ_IMAGE",
        "reason": "$string:reason"
      }
    ]
  }
}

2. 使用ImageCrop组件

import { ImageCrop } from '@ohos/image';
import { BusinessError } from '@ohos.base';

// 选择图片后调用裁剪
let imageCrop: ImageCrop = new ImageCrop.CropOptions();
imageCrop.srcUri = 'file://...'; // 图片URI
imageCrop.dstUri = 'file://...'; // 输出URI
imageCrop.cropRect = { // 裁剪区域
  x: 100,
  y: 100,
  size: 300
};

try {
  let result = await ImageCrop.crop(imageCrop);
  console.log('Crop success: ' + result.dstUri);
} catch (error) {
  console.error('Crop failed: ' + (error as BusinessError).message);
}

3. 完整示例（配合Picker使用）

import { picker } from '@kit.MediaKit';

// 选择图片
let photoPicker = new picker.PhotoViewPicker();
let result = await photoPicker.select();
let srcUri = result.photoUris[0];

// 设置裁剪参数
let cropOptions: ImageCrop.CropOptions = {
  srcUri: srcUri,
  dstUri: 'file://...', // 设置输出路径
  cropRect: {
    x: 0,
    y: 0,
    size: Math.min(width, height) // 正方形裁剪
  }
};

// 执行裁剪
ImageCrop.crop(cropOptions).then((result) => {
  console.log('Cropped image: ' + result.dstUri);
}).catch((error: BusinessError) => {
  console.error('Crop error: ' + error.message);
});

关键参数说明：

  • srcUri：源图片URI
  • dstUri：输出图片URI
  • cropRect：裁剪区域（支持圆形/矩形）
  • 支持设置宽高比、旋转等参数

注意：实际使用时需要处理权限申请和文件路径管理。建议参考官方ImageCrop文档获取最新API信息。

回到顶部