评论

鸿蒙Next,图片上传01-将图片存入模拟器相册

鸿蒙

1.通过拖拽将图片从Windows11存储到鸿蒙模拟器



我在使用端云一体化开发时,遇到一个难题,模拟器没有拍照功能,那如何将图片存入模拟器相册呢,



发现模拟器有‘文件管理’,且可以通过-将照片直接从window拖到鸿蒙模拟器,实现复制到模拟器对应的文件下



​编辑



然后进入到对应文件下,左键点击该照片,在点击左下角分享,在点击保存到图库



​编辑



​编辑



成功实现将照片保存到模拟器图库当中,注意我用的是最新版的鸿蒙版本和模拟器。



2.使用鸿蒙编译器将Windows11下的文件存放到模拟器相册中(使用安全组件SaveButton)



SaveButton-安全-ArkTS组件-ArkUI(方舟UI框架)-应用框架 - 华为HarmonyOS开发者



第一步:将要存储的图片放到media文件下面,可以直接拖过去,也可以使用电脑文件管理器,打开该目录的位置,将图片复制过去。(代码示例使用编译器自带图片startIcon.png)



​编辑



第二步:使用下面示例代码运行模拟器,点击下载,点击允许查看相册(代码块里有详细代码讲解)



​编辑



图片成功存入相册:



​编辑



示例代码:




// 导入文件操作相关的工具包
import { fileIo } from '@kit.CoreFileKit'
// 导入媒体库访问帮助类
import { photoAccessHelper } from '@kit.MediaLibraryKit';
// 导入弹窗提示操作相关的工具包
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct FileCopy {
  // 定义一个响应式状态变量 list,用于存储资源数组
  @State
  list: Resource[] = [
    $r("app.media.startIcon"),

  ]
  // 定义一个响应式状态变量 index,用于记录当前处理的资源索引
  @State index:number=0


  // 保存沙箱图片到相册
  async saveImgToAssets() {
    try {
      // 初始化index
      this.index = 0
      while (this.index < this.list.length) {
        // 获取上下文
        const context = getContext();
        // 通过上下文获取照片访问帮助器实例
        let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
        // 创建媒体文件
        let uri = await phAccessHelper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg');
        // 打开创建的媒体文件并读取本地文件并将其转换为 ArrayBuffer 以便于填充
        let file = await fileIo.open(uri, fileIo.OpenMode.READ_WRITE);
        let buffer = getContext(this).resourceManager.getMediaContentSync(this.list[this.index].id);
        // 将读取的 ArrayBuffer 写入新的媒体文件。
        await fileIo.write(file.fd, buffer.buffer);
        await fileIo.close(file);
        // 索引加 1,处理下一个资源
        this.index++
      }
      promptAction.showToast({ message: '下载成功' })
    } catch (err) {
      AlertDialog.show({ message: err.message })
    }
  }

  build() {
    Column({ space: 10 }) {
      Row() {
        SaveButton()
          // 为保存按钮添加点击事件监听器
          .onClick((_, result: SaveButtonOnClickResult) => {
            // 如果按钮点击操作成功
            if (result === SaveButtonOnClickResult.SUCCESS) {
              // 调用保存图片到相册的方法
              this.saveImgToAssets()
            }
          })
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      // 创建一个网格行,每行显示 2 列
      GridRow({ columns: 2 }) {
        ForEach(this.list, (item: string) => {
          GridCol() {
            Image(item)
              .height(150)
              .height(150)
              .borderRadius(4)
          }
          .margin({
            top: 10
          })
        })
      }

    }

  }
}// 导入文件操作相关的工具包
import { fileIo } from '@kit.CoreFileKit'
// 导入媒体库访问帮助类
import { photoAccessHelper } from '@kit.MediaLibraryKit';
// 导入弹窗提示操作相关的工具包
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct FileCopy {
  // 定义一个响应式状态变量 list,用于存储资源数组
  @State
  list: Resource[] = [
    $r("app.media.startIcon"),

  ]
  // 定义一个响应式状态变量 index,用于记录当前处理的资源索引
  @State index:number=0


  // 保存沙箱图片到相册
  async saveImgToAssets() {
    try {
      // 初始化index
      this.index = 0
      while (this.index < this.list.length) {
        // 获取上下文
        const context = getContext();
        // 通过上下文获取照片访问帮助器实例
        let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
        // 创建媒体文件
        let uri = await phAccessHelper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg');
        // 打开创建的媒体文件并读取本地文件并将其转换为 ArrayBuffer 以便于填充
        let file = await fileIo.open(uri, fileIo.OpenMode.READ_WRITE);
        let buffer = getContext(this).resourceManager.getMediaContentSync(this.list[this.index].id);
        // 将读取的 ArrayBuffer 写入新的媒体文件。
        await fileIo.write(file.fd, buffer.buffer);
        await fileIo.close(file);
        // 索引加 1,处理下一个资源
        this.index++
      }
      promptAction.showToast({ message: '下载成功' })
    } catch (err) {
      AlertDialog.show({ message: err.message })
    }
  }

  build() {
    Column({ space: 10 }) {
      Row() {
        SaveButton()
          // 为保存按钮添加点击事件监听器
          .onClick((_, result: SaveButtonOnClickResult) => {
            // 如果按钮点击操作成功
            if (result === SaveButtonOnClickResult.SUCCESS) {
              // 调用保存图片到相册的方法
              this.saveImgToAssets()
            }
          })
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      // 创建一个网格行,每行显示 2 列
      GridRow({ columns: 2 }) {
        ForEach(this.list, (item: string) => {
          GridCol() {
            Image(item)
              .height(150)
              .height(150)
              .borderRadius(4)
          }
          .margin({
            top: 10
          })
        })
      }

    }

  }
}




适用HarmonyOS NEXT / API12或以上版本


点赞 0
收藏
评论
登录 后发表内容