实现图片压缩功能鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本示例基于imagePackerss Api实现了图片压缩功能，并将压缩后的图片转成base64格式。开发者可将压缩后的图片用于arkui或者H5中进行图片展示。

实现图片压缩功能源码链接

效果预览

使用说明

打开应用，展示选择图片并压缩按钮，点击按钮，拉起系统相册，相册里选择图片或者拍照获取图片，选择完毕后点击完成，即可返回应用主页面，展示压缩后的图片。

实现思路

1. 构造selectAndCompressPicture()函数,执行以下操作：

   • 首先将this.pictures数组清空.
   • 调用PictureUtils.selectPicture()方法，等待其返回结果，并将结果存储在selectResult中。
   • 从selectResult中获取photoUris数组，遍历该数组。
   • 对于每个uri，调用PictureUtils.compressPicture方法进行图片压缩，压缩格式为image/jpeg，质量为10。
   • 压缩完成后，将压缩后的ArrayBuffer数据转换为base64字符串，并添加 data:image/png;base64, 前缀，存储到this.pictures数组中。

  async selectAndCompressPicture() {
    this.pictures = [];
    let selectResult: photoAccessHelper.PhotoSelectResult = await PictureUtils.selectPicture(2);
    let pictureUriArr: Array<string> = selectResult.photoUris;
    pictureUriArr.forEach(uri => {
      PictureUtils.compressPicture(uri, "image/jpeg", 10).then((data: ArrayBuffer) => {
        // 将图片转成base64
        let base64Str = buffer.from(data).toString('base64')
        let resultBase64Str = "data:image/png;base64," + base64Str
        this.pictures.push(resultBase64Str)
      })
    });
  }

2. 遍历this.pictures数组中的元素，并为每个元素创建一个Image对象,以此来加载展示压缩后返回的图片。

    ForEach(this.pictures, (uri: string) => {
    Image(uri)
        .width('90%')
        .height('50%')
        .padding({ top: 30 })
    }, (item: string) => item)

3. 构造selectPicture()函数，用于选择图片。函数接收一个数字参数selectNumber，表示要选择的图片数量。具体实现过程为：

   • 创建一个photoAccessHelper.PhotoSelectOptions实例photoSelectOptions，并设置其MIMEType为photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE，表示只选择图像类型的媒体文件。
   • 将photoSelectOptions的maxSelectNumber属性设置为selectNumber，以指定最大选择数量。
   • 创建一个photoAccessHelper.PhotoViewPicker实例photoPicker。
   • 调用photoPicker.select(photoSelectOptions) 方法进行图片选择，并使用await等待结果，最终将结果作为 Promise<photoAccessHelper.PhotoSelectResult> 类型返回。

  static async selectPicture(selectNumber: number): Promise<photoAccessHelper.PhotoSelectResult> {
    let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
    // 设置要选择的媒体文件类型
    photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
    // 设置选择文件最大数量
    photoSelectOptions.maxSelectNumber = selectNumber;
    let photoPicker = new photoAccessHelper.PhotoViewPicker();
    return await photoPicker.select(photoSelectOptions)
  }

4. 构造compressPicture()函数，用于压缩图片。具体实现过程为：

   • 首先，以只读模式打开文件系统中 pictureUri 对应的文件，使用 fs.openSync 方法，并获取文件描述符 file。
   • 使用 fs.statSync 方法根据文件描述符获取文件大小，并将其存储在 size 变量中。
   • 创建一个大小为 size 的 ArrayBuffer，并使用 fs.readSync 方法将文件内容读取到 buf 中。
   • 关闭文件，使用 fs.closeSync 方法。
   • 使用 image.createImageSource 方法将 buf 转换为图像源。
   • 创建 imagePackerApi 作为图像打包器，通过 image.createImagePacker 方法。
   • 创建 packOpts 对象，包含压缩格式 format 和压缩质量 quality。
   • 调用 imagePackerApi.packing 方法对图像源进行压缩，并使用 await 等待结果，最终将结果作为 Promise<ArrayBuffer> 类型返回。

  static async compressPicture(pictureUri: string, format: string, quality: number): Promise<ArrayBuffer> {
    let file = fs.openSync(pictureUri, fs.OpenMode.READ_ONLY);
    let size = fs.statSync(file.fd).size;
    let buf = new ArrayBuffer(size);
    fs.readSync(file.fd, buf);
    fs.closeSync(file);
    let imageSource = image.createImageSource(buf);

    const imagePackerApi: image.ImagePacker = image.createImagePacker();
    let packOpts: image.PackingOption = { format: format, quality: quality };
    return await imagePackerApi.packing(imageSource, packOpts)
  }