鸿蒙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

          })

        })

      }

    }

  }

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容