六、【鸿蒙 NEXT】如何实现图片下载，并保存本地

前言：
可能很多应用都会涉及网络图片的下载，本节将介绍下，如何在纯鸿蒙中实现图片的下载，并将图片保存到本地目录，或者直接保存到相册中。

**本节主要涉及以下几点：

1、下载图片流

2、将图片流转为Image组件能展示的对象PixelMap

3、将图片保存到本地路径，路径由用户选择

4、直接将图片保存到相册**

一、下载图片流
import { http } from '@kit.NetworkKit'

export class DownloadUtil {
// 根据url下载图片，获取的是ArrayBuffer对象
public static async downLoadPic(url:string):Promise<ArrayBuffer|null> {

let data = await http.createHttp().request(url);
if (data.result instanceof ArrayBuffer) {
  let imageData:ArrayBuffer = data.result
  return imageData;
}
return null;

}
}

二、将图片的ArrayBuffer对象转换为Image组件能展示的PixelMap对象 。
Image组件本身是能直接接收url的，此处之所以要转换为PixelMap对象是考虑到可能有些应用由于性能问题，会提前开启线程去做图片的预加载，此时就会涉及到将图片流转换为PixelMap对象。

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

// 将ArrayBuffer转换为PixelMap对象，该对象可以直接传给Image组件使用
public static async arrayBufToPixelMap(buf:ArrayBuffer):Promise<PixelMap> {

let imgSource:image.ImageSource = image.createImageSource(buf);
let result:PixelMap = await imgSource.createPixelMap();
return result;

}

三、将图片直接保存到本地，且路径由用户自己选择。
关键代码如下，保存的图片可以在"文件管理"的app中查找。 

import fs from '@ohos.file.fs'

// 将图片流保存到本地，路径由用户选择
public static saveToLocal(imageData:ArrayBuffer, contentType:string) {

let photoSaveOption = new picker.AudioSaveOptions();
let photoViewPicker = new picker.AudioViewPicker();
photoSaveOption.newFileNames = [new Date().getTime() + '.jpg']
if (contentType === 'video') {
  photoSaveOption.newFileNames = [new Date().getTime() + '.mp4']
}
// 此处会拉起系统的文件路径选择界面
photoViewPicker.save(photoSaveOption).then(async (photoSaveResult) => {
  let uri = photoSaveResult[0];
  let file: fs.File = null!;
  try {
    file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
    await fs.write(file.fd, imageData);
  } finally {
    await fs.close(file.fd);
  }
})

}

四、直接将图片流保存到本地相册
因为访问相册需要额外申请一个系统权限，申请该权限有比较多的限制 。因此我们可以使用SaveButton()组件来实现保存到相册，点击该组件可以有10s的临时权限去操作相册。

import { photoAccessHelper } from '@kit.MediaLibraryKit';

// 将图片流保存到相册
public static async savePicToGallery(context:common.UIAbilityContext, buf:ArrayBuffer) {

let helper = photoAccessHelper.getPhotoAccessHelper(context);
let file: fs.File = null!;
try {
  // 当点击SaveButton组件后10秒内通过createAsset接口创建图片文件，10秒后createAsset权限收回
  let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE,'jpg');
  file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
  await fs.write(file.fd, buf);
} finally {
  await fs.close(file.fd);
}

}

**完整的代码示例如下：
DownloadUtil类**

import { http } from '@kit.NetworkKit'
import { image } from '@kit.ImageKit';
import { picker } from '@kit.CoreFileKit';
import fs from '@ohos.file.fs'
import {common} from '@kit.AbilityKit'
import { photoAccessHelper } from '@kit.MediaLibraryKit';

export class DownloadUtil {
// 根据url下载图片，获取的是ArrayBuffer对象
public static async downLoadPic(url:string):Promise<ArrayBuffer|null> {

let data = await http.createHttp().request(url);
if (data.result instanceof ArrayBuffer) {
  let imageData:ArrayBuffer = data.result
  return imageData;
}
return null;

}

// 将ArrayBuffer转换为PixelMap对象，该对象可以直接传给Image组件使用
public static async arrayBufToPixelMap(buf:ArrayBuffer):Promise<PixelMap> {

let imgSource:image.ImageSource = image.createImageSource(buf);
let result:PixelMap = await imgSource.createPixelMap();
return result;

}

// 将图片流保存到本地，路径由用户选择
public static saveToLocal(imageData:ArrayBuffer, contentType:string) {

let photoSaveOption = new picker.AudioSaveOptions();
let photoViewPicker = new picker.AudioViewPicker();
photoSaveOption.newFileNames = [new Date().getTime() + '.jpg']
if (contentType === 'video') {
  photoSaveOption.newFileNames = [new Date().getTime() + '.mp4']
}
// 此处会拉起系统的文件路径选择界面
photoViewPicker.save(photoSaveOption).then(async (photoSaveResult) => {
  let uri = photoSaveResult[0];
  let file: fs.File = null!;
  try {
    file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
    await fs.write(file.fd, imageData);
  } finally {
    await fs.close(file.fd);
  }
})

}

// 将图片流保存到相册
public static async savePicToGallery(context:common.UIAbilityContext, buf:ArrayBuffer) {

let helper = photoAccessHelper.getPhotoAccessHelper(context);
let file: fs.File = null!;
try {
  // 当点击SaveButton组件后10秒内通过createAsset接口创建图片文件，10秒后createAsset权限收回
  let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE,'jpg');
  file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
  await fs.write(file.fd, buf);
} finally {
  await fs.close(file.fd);
}

}
}

页面：

import { DownloadUtil } from '../250226/DownloadUtil'
import { common } from '@kit.AbilityKit'

@Entry
@Component
struct Index {
@State pixelMap:PixelMap|null = null
// 此处可以换成可下载的图片
url:string = 'http://xxxx.xxx.xxx'

build() {

Column(){
  Text('111')
  Image(this.pixelMap)
  Button('保存用户选择路径').onClick(async () => {
    let buf = await DownloadUtil.downLoadPic(this.url);
    if (buf) {
      DownloadUtil.saveToLocal(buf, 'image');
    }
  })
  SaveButton()
    .onClick(async (event:ClickEvent, result: SaveButtonOnClickResult) => {
      if (result === SaveButtonOnClickResult.SUCCESS) {
        let buf = await DownloadUtil.downLoadPic(this.url);
        if (buf) {
          let context = getContext(this) as common.UIAbilityContext
          DownloadUtil.savePicToGallery(context, buf);
        }
      }
    })
}

}

}

【原创声明】

本文为本人原创文章，首次发表于【51CTO作者zhujian8263 】，原文链接：[https://blog.51cto.com/u_11966021/13431566]。