HarmonyOS鸿蒙Next中如何将大于5M的图片地址保存到相册的标准流程代码

发布于 1周前 作者 ionicwang 来自 鸿蒙OS

HarmonyOS鸿蒙Next中如何将大于5M的图片地址保存到相册的标准流程代码 我们服务端有一个图片地址(比如: https://appdoc.ceic.com/inside/get_file/cid:323408/type:1/id:UV5fUV1CVEg=), 大小大于5M, 想要保存到相册, 标准流程代码应该怎么写? 尽可能不申请受限权限, 附上demo

4 回复

ImageSavePage

import { BuilderNameConstants, RouterModule } from '@ohos/router';
import { TitleBarView } from '../widget/detail/TitleBarView';
import { common } from '@kit.AbilityKit';
import { promptAction } from '@kit.ArkUI';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import fs from '@ohos/file.fs';
import axios, { AxiosResponse } from '@ohos/axios';

@Component
export struct ImageSavePage {
  url?: string

  build() {
    NavDestination() {
      TitleBarView({ title: "" })
      Image(this.url)
        .objectFit(ImageFit.Auto)
        .layoutWeight(1)
        .width('100%')

      Stack({ alignContent: Alignment.Center }) {
        SaveButton({text:SaveDescription.SAVE_IMAGE})
          .onClick(async (event: ClickEvent, result: SaveButtonOnClickResult) => {
            if (result === SaveButtonOnClickResult.SUCCESS) {
              const context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
              this.saveImage(context, `${this.url}`);
            } else {
              promptAction.showToast({ message: '设置权限失败!' })
            }
          })
      }
      .height(140)
      .width('100%')
    }
    .hideTitleBar(true)
  }

  async saveImage(context: common.UIAbilityContext, url: string): Promise<void> {

    axios.get(url, { responseType: 'array_buffer' }).then(async (res: AxiosResponse<ArrayBuffer>) => {
      let helper = photoAccessHelper.getPhotoAccessHelper(context);
      let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg');
      let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
      await fs.write(file.fd, res.data);
      await fs.close(file.fd);
      promptAction.showToast({ message: '已保存至相册!' });
    })

  }
}

@Builder
export function harBuilder(value: object) {
  ImageSavePage({ url: (value as String).toString() })
}

const builderName = BuilderNameConstants.IMAGE_SAVE_PAGE;
if (!RouterModule.getBuilder(builderName)) {
  const builder: WrappedBuilder<[object]> = wrapBuilder(harBuilder);
  RouterModule.registerBuilder(builderName, builder);
}

参考下我们的下载图片到相册的实现,用安全控件(避免权限申请),把axios换成你们的网络框架即可,不用安全控件的话比较麻烦,要申请写入文件权限,这个是系统权限,申请比较麻烦。

更多关于HarmonyOS鸿蒙Next中如何将大于5M的图片地址保存到相册的标准流程代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,将大于5M的图片地址保存到相册的标准流程代码涉及以下步骤:

  1. 获取图片数据:首先需要通过网络或其他途径获取图片的数据流。
  2. 创建临时文件:将图片数据写入临时文件。
  3. 插入相册:使用ImageAssetManager将临时文件插入系统相册。

以下是示例代码:

import fs from '@ohos.file.fs';
import image from '@ohos.multimedia.image';
import mediaLibrary from '@ohos.multimedia.mediaLibrary';

async function saveLargeImageToGallery(imageUrl: string) {
    // 1. 获取图片数据
    const response = await fetch(imageUrl);
    const arrayBuffer = await response.arrayBuffer();

    // 2. 创建临时文件
    const tempFilePath = '临时文件路径';
    fs.writeSync(fs.openSync(tempFilePath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE), arrayBuffer);

    // 3. 插入相册
    const context = getContext(this);
    const media = mediaLibrary.getMediaLibrary(context);
    const imageAsset = await media.createAsset(mediaLibrary.MediaType.IMAGE, 'image.jpg', tempFilePath);
    console.log('图片保存成功,路径:', imageAsset.uri);
}

注意:代码中的临时文件路径需要替换为实际路径,确保应用有读写权限。

在HarmonyOS鸿蒙Next中,将大于5M的图片地址保存到相册的标准流程代码如下:

  1. 权限申请:确保在config.json中声明了ohos.permission.WRITE_MEDIA权限。
  2. 下载图片:使用[@ohos](/user/ohos).net.http模块下载图片到应用沙箱目录。
  3. 保存到相册:使用[@ohos](/user/ohos).file.fs模块将图片移动到相册目录(/Pictures)。
  4. 通知系统:使用[@ohos](/user/ohos).mediaLibrary模块通知系统更新媒体库。
import http from '[@ohos](/user/ohos).net.http';
import fs from '[@ohos](/user/ohos).file.fs';
import mediaLibrary from '[@ohos](/user/ohos).mediaLibrary';

async function downloadAndSaveImage(imageUrl) {
  const httpRequest = http.createHttp();
  const response = await httpRequest.request(imageUrl);
  const filePath = `${fs.getAppDataPath()}/downloaded_image.jpg`;
  await fs.writeFile(filePath, response.result);
  
  const media = mediaLibrary.getMediaLibrary();
  const fileAsset = await media.createAsset(mediaLibrary.MediaType.IMAGE, 'downloaded_image.jpg', filePath);
  console.log('Image saved to gallery:', fileAsset.uri);
}
``

确保处理错误和异常,并根据实际需求调整代码。
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!