HarmonyOS鸿蒙Next中如何实现app内跳转图库选择图片进行剪切保存，作为头像上传

HarmonyOS鸿蒙Next中如何实现app内跳转图库选择图片进行剪切保存，作为头像上传 app内，如何实现跳转图库选择图片进行剪切保存，作为头像上传服务器。

3 回复

应用可以在布局中嵌入Photo Picker组件，通过此组件，应用无需申请权限，即可访问公共目录中的图片或视频文件。选择页面时，可以点击编辑，参考文档如下：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ohos-file-photopickercomponent-V5

您可能需要更换一下api，文档如下：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-file-picker-V5#select

如下方法是可以使用系统编辑功能

const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();

const photoViewPicker = new picker.PhotoViewPicker();

photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE

photoSelectOptions.maxSelectNumber = 1; // 选择媒体文件的最大数目

photoSelectOptions.isEditSupported = true

photoViewPicker.select(photoSelectOptions).then(async (photoSelectResult: picker.PhotoSelectResult) => {

  const fileUri = photoSelectResult.photoUris[0]

})

参考代码

import { common } from '@kit.AbilityKit';

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

import { image } from '@kit.ImageKit';

import fs from '@ohos.file.fs';

@Entry
@Component
struct Index13 {

  @State imagePath: string = ''

  @State pixelMap:image.PixelMap | undefined = undefined

  private context = this as common.UIAbilityContext;

  @Styles ButtonStyle(){

    .width(150).height(35).margin(8)

  }

  build() {

    Row() {

      Column() {

        Button("选择图片").ButtonStyle()

          .onClick(() => {

            this.selectPhoto()

          })

        Image(this.imagePath)

          .width(300)

          .height(300)

          .backgroundColor(Color.Gray)

      }.width('100%')

    }.height('100%')

  }

  selectPhoto() {

    const photoSelectOptions = new picker.PhotoSelectOptions();

    const photoViewPicker = new picker.PhotoViewPicker();

    photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE

    photoSelectOptions.maxSelectNumber = 1; // 选择媒体文件的最大数目

    photoViewPicker.select(photoSelectOptions).then(async (photoSelectResult: picker.PhotoSelectResult) => {

      const fileUri = photoSelectResult.photoUris[0]

      //复制到沙箱路径,模拟用户下载图片到沙箱

      this.imagePath = this.getFileInfo(fileUri)

    })

  }

  getFileInfo(filePathString: string): string {

    let resFile = fs.openSync(filePathString, fs.OpenMode.READ_ONLY)

    const dateStr = (new Date().getTime()).toString()

    // 临时文件目录

    let newPath = this.context.filesDir + `/${'Temp'+ resFile.name}`;

    // 转化路径

    fs.copyFileSync(resFile.fd, newPath);

    fs.closeSync(resFile.fd);

    // 新的路径

    let realUri = 'file://' + newPath;

    console.log(realUri)

    return filePathString

  }

}

更多关于HarmonyOS鸿蒙Next中如何实现app内跳转图库选择图片进行剪切保存，作为头像上传的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，实现App内跳转图库选择图片进行剪切保存并作为头像上传，可以通过以下步骤完成：

  1. 权限申请：首先在config.json中申请必要的权限，如读取存储权限。
"reqPermissions": [
  {
    "name": "ohos.permission.READ_MEDIA"
  }
]
  1. 跳转图库选择图片：使用@ohos.file.picker模块中的PhotoViewPicker来选择图片。
import picker from '@ohos.file.picker';

let photoPicker = new picker.PhotoViewPicker();
photoPicker.select((err, result) => {
  if (err) {
    console.error('PhotoViewPicker failed, err: ' + JSON.stringify(err));
    return;
  }
  if (result) {
    let uri = result[0];
    // 处理选择的图片
  }
});
  1. 图片剪切：使用@ohos.image模块中的Image类来加载和处理图片。
import image from '@ohos.image';

let imageSource = image.createImageSource(uri);
imageSource.createPixelMap().then((pixelMap) => {
  // 进行剪切操作
});
  1. 保存剪切后的图片：使用@ohos.file.fs模块保存处理后的图片。
import fs from '@ohos.file.fs';

let savePath = 'path/to/save/image.jpg';
fs.writeFile(savePath, pixelMap).then(() => {
  console.log('Image saved successfully');
});
  1. 上传头像：将保存的图片上传至服务器。
// 使用HTTP或其他网络请求库上传图片

在HarmonyOS鸿蒙Next中，实现app内跳转图库选择图片进行剪切并保存为头像上传，可以通过以下步骤：

  1. 启动图库选择图片：使用Intent调用系统图库，通过Intent.ACTION_PICK选择图片。
  2. 获取图片URI：在onActivityResult中获取选中图片的URI。
  3. 图片剪切：使用Intent调用系统剪切工具，设置剪切参数如宽高比、输出尺寸等。
  4. 保存剪切后的图片：在onActivityResult中获取剪切后的图片，保存到指定路径。
  5. 上传头像：将保存的图片上传至服务器。

代码示例：

Intent intent = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
startActivityForResult(intent, REQUEST_CODE_PICK_IMAGE);

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (resultCode == RESULT_OK && requestCode == REQUEST_CODE_PICK_IMAGE) {
        Uri selectedImageUri = data.getData();
        Intent cropIntent = new Intent("com.android.camera.action.CROP");
        cropIntent.setDataAndType(selectedImageUri, "image/*");
        cropIntent.putExtra("crop", "true");
        cropIntent.putExtra("aspectX", 1);
        cropIntent.putExtra("aspectY", 1);
        cropIntent.putExtra("outputX", 200);
        cropIntent.putExtra("outputY", 200);
        cropIntent.putExtra("return-data", true);
        startActivityForResult(cropIntent, REQUEST_CODE_CROP_IMAGE);
    } else if (requestCode == REQUEST_CODE_CROP_IMAGE) {
        Bitmap bitmap = data.getParcelableExtra("data");
        // 保存并上传bitmap
    }
}
回到顶部