当前位置: 首页 > article >正文

鸿蒙Next如何实现打开相册选图片功能?

问题描述:鸿蒙Next如何实现打开相册选图片功能

应用场景:用户个人中心自定义头像的时候,需要选择相册上传照片。

解决方案:

使用picker这个API实现从系统上获取相册图片这个点的,

1、首先要实例一个选择参数PhotoSelectOptions 里面需要设置媒体文件类型还有一个数量

2、然后—>实例一个选择器PhotoViewPicker,

3、通过自带的——>select方法传入先前设置的选择参数即可完成选择并获取到选择图片的文件路径

4、解析文件路径转为PixelMap格式或者base64格式

5、再对接后端接口上传数据

// 导入选择器模块和文件管理模块
import {  zipImageUtil} from '../utils/ZipImageUtil'
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { image } from '@kit.ImageKit';
import { fileIo as fs } from '@kit.CoreFileKit';
import {  buffer as Buffer} from '@kit.ArkTS';
 // 拉起相册,选择图片方法
class getPhotofromAlbum{
    getAlbum: string = '显示相册中的图片';
    pixel: image.PixelMap | undefined = undefined;
    albumPath: string = '';
    photoSize: number = 0;
    async initData():Promise<string>{
        try{
        //创建图片-音频类型文件选择选项实例
        let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions(); 
        PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
        PhotoSelectOptions.maxSelectNumber = 1; // 最多选择数量
       
        //创建图库选择器实例,调用PhotoViewPicker.select接口拉起图库界面进行文件选择。文件选择成功后,返回PhotoSelectResult结果集。
       let photoPicker = new photoAccessHelper.PhotoViewPicker(); 
      let photoSelectResult: photoAccessHelper.PhotoSelectResult = await photoPicker.select(PhotoSelectOptions);
        this.albumPath = photoSelectResult.photoUris[0];  //获得到选择图片的文件路径

        // 使用file解析文件,并读取图片为buffer
       const file = fs.openSync(this.albumPath, fs.OpenMode.READ_ONLY);
       this.photoSize = fs.statSync(file.fd).size;
       console.info('Photo Size: ' + this.photoSize);
       let buffer = new ArrayBuffer(this.photoSize);
       fs.readSync(file.fd, buffer);
       fs.closeSync(file);

        // 解码成PixelMap
       const imageSource = image.createImageSource(buffer);
       console.log('imageSource: ' + JSON.stringify(imageSource));
       let pixelMap = await imageSource.createPixelMap({});

       //设置打包参数
       const imagePackerApi = image.createImagePacker();
       const packOpts: image.PackingOption = { format: "image/jpeg", quality: 100 };
       let imageBuffer: ArrayBuffer = new ArrayBuffer(1);
       // 图片压缩或重新打包
       imageBuffer = await imagePackerApi.packing(imageSource, packOpts);
       imageBuffer = await zipImageUtil.packingImage(imageBuffer, pixelMap, 100, 500*1024); //压缩到500kb
       console.log('压缩后的字节长度:'+imageBuffer.byteLength/1024)

        //转成base64地址
        let base64Str:string = Buffer.from(imageBuffer).toString('base64')
        return base64Str

        }catch(e){
            throw new Error(`相册 获取照片失败 : ${JSON.stringify(e)}`);
        }


    }

}


调用方法

   new getPictureFromAlbum().initData().then(res => {
            let base64=res
          })

http://www.kler.cn/a/455377.html

相关文章:

  • 服务器与电脑主机各自的优势
  • 麦吉尔大学Ding Lab基于深度学习开发单细胞水平转座子位点表达定量模型,登Nature子刊
  • matrix-breakout-2-morpheus
  • Unity URP多光源支持,多光源阴影投射,多光源阴影接收(优化版)
  • loki failed to flush
  • 为什么要在PHY芯片和RJ45网口中间加网络变压器
  • img向后端获取图片时怎么解决需携带token的问题
  • 手机动态壁纸设置教程安卓手机和苹果手机都可以
  • 【PS不常见教程】实操篇之通道抠图-抠烟花
  • 微信小程序原生,tdesign时间选择器,t-date-time-picker封装成组件,开始时间结束时间
  • 决策树入门指南:从原理到实践
  • CAN201 Introduction to Networking(计算机网络)Pt.3 网络层
  • mysql5.7.29迁移至DM8操作
  • 前端往后端传递参数的方式有哪些?
  • 01背包和完全背包
  • Spring boot处理跨域问题
  • linux攻防
  • LeetCode - Google 校招100题 第5天 双指针(Two Pointers) (11题)
  • EKF 自动匹配维度 MATLAB代码
  • 【模电刷题复习--选择】