HarmonyOS开发之使用PhotoViewPicker(图库选择器)保存图片

一:效果图

二:添加依赖

复制代码
import fs from '@ohos.file.fs';//文件管理
import picker from '@ohos.file.picker'//选择器

三:下载,保存图片的实现

复制代码
// 下载图片imgUrl
 downloadAndSaveImage(imgUrl: string) {
    http.createHttp()
      .request(imgUrl,
        (error, data: http.HttpResponse) => {
          if (error) {
            promptAction.showToast({
              message: '下载失败',
              duration: 2000
            })
            return
          }
          if (data.result instanceof ArrayBuffer) {
            this.pickerSave(data.result as ArrayBuffer)
          }
        })
  }

//保存图片
  async pickerSave(buffer: ArrayBuffer): Promise<void> {
    const photoSaveOptions = new picker.PhotoSaveOptions() // 创建文件管理器保存选项实例
    photoSaveOptions.newFileNames = ['PhotoView' + new Date().getTime() + '.jpg']//创建一个开头为PhotoView_xxxx_.jpg的图片
    const photoViewPicker = new picker.PhotoViewPicker
    photoViewPicker.save(photoSaveOptions)
      .then(async (photoSaveResult) => {
        let uri = photoSaveResult[0]
        let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
        await fs.write(file.fd, buffer)
        await fs.close(file.fd)
        promptAction.showToast({
          message: "保存成功"
        })
      })
      .catch(error => {
        console.log('downloadAndSaveImage  保存失败:', error)
        promptAction.showToast({
          message: "保存失败"
        })
      })
  }

四:在Page中的使用

复制代码
@Entry
@Component
struct ImgPage {
  @State imageUrl: string =""

  aboutToAppear(){
    const params = router.getParams()
    if (params) {
     this.imageUrl = params['imageUrl']//https:xxxxxx.png
      if (!this.imageUrl) {
        console.error("imageUrl 加载失败: imageUrl 为空");
      }
    }

  }

  build() {
    Column() {
      Stack().height(30)
      HeadlineBar({
        title:"详情",
        heightBar: 45,
        fontSize:20,
        closeCallback: () => {
          router.back()
        }
      })
      // 显示每个图片
      Image(this.imageUrl)
        .alt($r('app.media.icon'))// 使用alt,在网络图片加载成功前使用占位图
        .width(300)
        .height(400)
        .margin({top:30})
        .borderRadius(8)

      Button('立即下载')
        .fontSize(15)
        .width(131)
        .height(54)
        .margin({
          top:30
        })
        .onClick(()=>{
          if (this.imageUrl) {
            weatherApi.downloadAndSaveImage(this.imageUrl)
          }
        })

    }
    .width('100%')
    .height('100%')
  }
}
相关推荐
幽蓝计划2 小时前
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
华为·harmonyos
万少8 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
幽蓝计划8 小时前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos
HMS Core10 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos
生如夏花℡10 小时前
HarmonyOS学习记录3
学习·ubuntu·harmonyos
伍哥的传说11 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
funnycoffee12312 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为
制造数字化方案研究院12 小时前
59页|PPT|华为集成服务交付ISD业务变革总体方案:业务规则、流程、IT、组织及度量“四位一体”的管理体系
运维·华为
博睿谷IT99_12 小时前
华为物联网认证:开启万物互联的钥匙
物联网·华为·华为认证·职业规划
遇到困难睡大觉哈哈1 天前
HarmonyOS 公共事件机制介绍以及多进程之间的通信实现(9000字详解)
华为·harmonyos