HarmonyOS 鸿蒙Next开发案例 | 图片格式转换将png图片转换为jpeg格式

HarmonyOS 鸿蒙Next开发案例 | 图片格式转换将png图片转换为jpeg格式

场景说明

当我们获取到图片或者视频的缩略图后，返回的是pixelMap，此时有开发者会有疑问如何将pixelMap转换成jpeg等其他格式的图片，其实使用image类中的packing方法就可以将pixelMap重新打包成新的格式（当前只支持jpeg，webp格式），再使用文件管理就可以将图片存入到应用的沙箱路径。本例即为大家介绍如何完成图片格式转换。

运行环境

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：

• IDE: DevEco Studio 3.1.1 Release
• SDK: 3.1.0(API 9)

效果呈现

本例最终实现效果为：将工程资源文件中png格式的图片转换为jpg格式，并保存在设备中。由于本例不涉及UI讲解，所以不在此提供UI效果。

实现思路

本例中完成图片格式转换包含三个关键步骤，相关步骤及实现方案如下：

• 获取到要转换图片的PixelMap数据：使用image的createPixelMap方法获取到图片的PixelMap数据。
• 将图片的PixelMap重新打包转换为其他格式：使用packing方法进行打包，打包时可以设置格式、压缩质量等。
• 将重新打包好的图片保存到应用目录：使用图库选择器photoViewPicker的相关功能以及file读写操作完成图片的保存。

开发步骤

由于本例重点讲解图片格式的转换，所以开发步骤会着重讲解相关实现，不相关的内容不做介绍，全量代码可参考完整代码章节。

获取要转换图片的PixelMap数据

先通过上下文context获取到资源管理器resourceManager，然后通过资源管理器获取到图片数据，然后获取图片的ArrayBuffer，最后通过ArrayBuffer创建imageSource，获取到pixelMap，完成图片解码。

具体代码如下：

import common from '@ohos.app.ability.common';

@Entry
@Component
struct Index {
  context: common.UIAbilityContext = this.getContext(this) as common.UIAbilityContext

  async getPixelMap(){
    const resourceMgr = this.context.resourceManager
    const fileData = await resourceMgr.getMediaContent($r('app.media.contact6'))
    const buffer = fileData.buffer
    const imageSource = image.createImageSource(buffer)
    const pixelMap = await imageSource.createPixelMap()
    return pixelMap
  }
}

将图片的PixelMap重新打包转换为其他格式

先通过createImagePacker构建ImagePacker实例，再通过该实例调用packing方法进行打包，打包时传入获取到的PixelMap数据及重新打包的图片格式等相关配置信息。

具体代码如下：

let imagePackerApi = image.createImagePacker();
let options = {
  format: 'image/jpeg',
  quality: 98
};
imagePackerApi.packing(this.src, options).then(data => {
  console.log('Succeeded in packing the image.');
}).catch(error => {
  console.log('Failed to pack the image..');
});

将重新打包好的图片保存到应用目录

使用图库选择器photoViewPicker保存文件，保存时可以在保存界面选择保存路径并设定文件名。此时保存的是空文件，然后再使用file将重新打包的图片数据写入保存的文件中，保存完成后我们便可以在保存路径下找到转换格式后的图片文件了。

具体代码如下：

let photoSaveOptions = new picker.PhotoSaveOptions();
photoSaveOptions.newFileNames = ["imageTransfer.jpg"];
let photoViewPicker = new picker.PhotoViewPicker();

photoViewPicker.save(photoSaveOptions)
  .then(photoSaveResult => {
    setTimeout(() => {
      this.uri = photoSaveResult[0];

      fs.open(this.uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE).then(file => {
        fs.write(file.fd, data).then(number => {
          console.info("foo imagetest: write data to file succeed and size is:" + number);
        }).catch(err => {
          console.info("foo imagetest: write data to file failed with error:" + err);
        });
        fs.close(file, err => {
          if (err) {
            console.info("close file failed with error message: " + err.message + ", error code: " + err.code);
          } else {
            console.info("close file success");
          }
        });
      }).catch(err => {
        console.info("foo open file failed with error message: " + err.message + ", error code: " + err.code);
      });

    }, 200)

  })
  .catch(err => {
    console.error('PhotoViewPicker.save failed with err: ' + err);
  })

完整代码

本例完整代码如下：

import image from '@ohos.multimedia.image';
import fs from '@ohos.file.fs';
import common from '@ohos.app.ability.common';
import picker from '@ohos.file.picker';

@Entry
@Component
struct Index {
  src:PixelMap = undefined
  context: common.UIAbilityContext = this.getContext(this) as common.UIAbilityContext
  private uri = null

  async aboutToAppear(){
    this.src = await this.getPixelMap()
  }

  async getPixelMap(){
    const resourceMgr = this.context.resourceManager
    const fileData = await resourceMgr.getMediaContent($r('app.media.contact6'))
    const buffer = fileData.buffer
    const imageSource = image.createImageSource(buffer)
    const pixelMap = await imageSource.createPixelMap()
    return pixelMap
  }

  build() {
    Row() {
      Column() {
        Button('转换图片格式：png->jpeg')
          .onClick(() => {
            let imagePackerApi = image.createImagePacker();
            let options = {
              format: 'image/jpeg',
              quality: 98
            };
            imagePackerApi.packing(this.src, options).then(data => {
              let photoSaveOptions = new picker.PhotoSaveOptions();
              photoSaveOptions.newFileNames = ["imageTransfer.jpg"];
              let photoViewPicker = new picker.PhotoViewPicker();
              photoViewPicker.save(photoSaveOptions)
                .then(photoSaveResult => {
                  setTimeout(() => {
                    this.uri = photoSaveResult[0];
                    fs.open(this.uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE).then(file => {
                      fs.write(file.fd, data).then(number => {
                        console.info("foo imagetest: write data to file succeed and size is:" + number);
                      }).catch(err => {
                        console.info("foo imagetest: write data to file failed with error:" + err);
                      });
                      fs.close(file, err => {
                        if (err) {
                          console.info("close file failed with error message: " + err.message + ", error code: " + err.code);
                        } else {
                          console.info("close file success");
                        }
                      });
                    }).catch(err => {
                      console.info("foo open file failed with error message: " + err.message + ", error code: " + err.code);
                    });
                  }, 200)
                })
                .catch(err => {
                  console.error('PhotoViewPicker.save failed with err: ' + err);
                })
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

参考

• 图片处理
• 文件管理
• 选择器