OpenHarmony实战开发-如何完成图片格式转换。

最新推荐文章于 2024-09-02 19:15:57 发布
最新推荐文章于 2024-09-02 19:15:57 发布
阅读量768 收藏 9
点赞数 19
分类专栏： OpenHarmony HarmonyOS 鸿蒙 文章标签： 鸿蒙应用开发 harmonyos OpenHarmony HarmonyOS 鸿蒙工程师 鸿蒙开发 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70749039/article/details/139221265
版权
鸿蒙 同时被 3 个专栏收录
659 篇文章 11 订阅
订阅专栏
HarmonyOS
652 篇文章 5 订阅
订阅专栏
OpenHarmony
647 篇文章 7 订阅
订阅专栏

场景说明

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

运行环境

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

  • IDE: DevEco Studio 4.0 Beta1
  • SDK: Ohos_sdk_public 4.0.7.5 (APIVersion 10 Beta1)

效果呈现

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

实现思路

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

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

开发步骤

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

1.获取要转换图片的PixelMap数据。

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

具体代码如下：

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

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

  async getPixelMap(){
    // 获取resourceManager资源管理
    const resourceMgr = this.context.resourceManager
    // 获取rawfile文件夹下imagetransfer.PNG的ArrayBuffer
    const fileData = await resourceMgr.getMediaContent($r('app.media.imagetransfer'))
    const buffer = fileData.buffer
    // 创建imageSource
    const imageSource = image.createImageSource(buffer)
    // 获取PixelMap
    const pixelMap = await imageSource.createPixelMap()
    return pixelMap
  }
  ...
}

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

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

...
@State src:PixelMap = undefined
...
// 页面加载前将获取到的图片PixelMap数据赋值给状态变量src
async aboutToAppear() {
  this.src = await this.getPixelMap()
}
...
// 创建ImagePacker实例
let imagePackerApi = image.createImagePacker();
let options = {
  // 设置重新打包的图片格式
  format: 'image/jpeg',
  quality: 98
};
// 打包时传入图片的PixelMap：src和图片打包选项：option，异步获取打包后的数据data
imagePackerApi.packing(this.src, options).then((data) => {
  console.log('Succeeded in packing the image.');
  }).catch(error => {
  console.log('Failed to pack the image..');
  ....
})

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

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

...
// 打包时传入图片的pixelmap：src和图片打包选项：option，异步获取打包后的数据data
imagePackerApi.packing(this.src, options).then((data) => {
  // 创建文件管理器保存选项实例
  let photoSaveOptions = new picker.PhotoSaveOptions();
  // 保存文件名（可选）
  photoSaveOptions.newFileNames = ["imageTransfer.jpg"];
  let photoViewPicker = new picker.PhotoViewPicker();

  // 保存时传入保存的文件名：photoSaveOptions
  photoViewPicker.save(photoSaveOptions)
    .then((photoSaveResult) => {
      setTimeout(() => {
        // 获取到保存文件的URI，后续进行文件读取等操作
        this.uri = photoSaveResult[0];

        fs.open(this.uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE).then((file) => {
          // 将图片打包数据data写入保存的文件
          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 {
  @State src:PixelMap = undefined
  context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext
  private  uri = null
  // 页面加载前将获取到的图片PixelMap数据赋值给状态变量src
  async aboutToAppear() {
    this.src = await this.getPixelMap()
  }

  async getPixelMap(){
    // 获取resourceManager资源管理
    const resourceMgr = this.context.resourceManager
    // 获取rawfile文件夹下httpimage.PNG的ArrayBuffer
    const fileData = await resourceMgr.getMediaContent($r('app.media.contact6'))
    const buffer = fileData.buffer
    // 创建imageSource
    const imageSource = image.createImageSource(buffer)
    // 创建PixelMap
    const pixelMap = await imageSource.createPixelMap()
    return pixelMap
    console.log('pixelMap  ' + JSON.stringify(this.src.getPixelBytesNumber()))
  }

  build() {
    Row() {
      Column() {
        Button('转换图片格式：png->jpeg')
          .onClick(() => {
            // 创建ImagePacker实例
            let imagePackerApi = image.createImagePacker();
            // 设置重新打包的图片格式，及图片压缩质量
            let options = {
              format: 'image/jpeg',
              quality: 98
            };
            // 打包时传入图片的pixelmap：src和图片打包选项：option，异步获取打包后的数据data
            imagePackerApi.packing(this.src, options).then((data) => {
              // 创建文件管理器保存选项实例
              let photoSaveOptions = new picker.PhotoSaveOptions();
              // 保存文件名（可选）
              photoSaveOptions.newFileNames = ["imageTransfer.jpg"];
              let photoViewPicker = new picker.PhotoViewPicker();
              // 保存时传入保存的文件名：photoSaveOptions
              photoViewPicker.save(photoSaveOptions)
                .then((photoSaveResult) => {
                  console.log('foo start')
                  setTimeout(() => {
                    // 获取到图片的URI后进行文件读取等操作
                    this.uri = photoSaveResult[0];
                    fs.open(this.uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE).then((file) => {
                      // 将图片打包数据data写入保存的文件
                      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%')
  }
}

我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI、实战开发视频教程》以及《鸿蒙生态应用开发白皮书V2.0PDF》《鸿蒙开发学习手册》（共计890页）鸿蒙开发资料等…希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

在这里插入图片描述

应用开发中级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

应用开发中高级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

南北双向高工技能基础：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

全网首发-工业级 南向设备开发就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……
在这里插入图片描述

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
在这里插入图片描述

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
在这里插入图片描述

不入流HarmonyOS开发
关注
  • 19
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS Next 手写绘制及保存图片案例(2)，开发岗面试自我介绍范文
2401_83946284的博客
04-09 1034
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
OpenHarmony实战开发-如何实现图像显示（预览）、照片保存（拍照）、视频录制（录像）等基础操作
m0_70749039的博客
05-13 1076
相机应用通过控制相机，实现图像显示（预览）、照片保存（拍照）、视频录制（录像）等基础操作。相机开发模型为Surface模型，即应用通过Surface进行数据传递，通过ImageReceiver的surface获取拍照流的数据、通过XComponent的surface获取预览流的数据。
【鸿蒙开发】第十九章 Image图片处理
Yvan
04-08 1918
应用开发中的图片开发是对图片像素数据进行解析处理构造的过程，达到目标图片效果，主要涉及图片解码图片处理图片编码等。图片解码指将所支持格式的存档图片解码成统一的PixelMap，以便在应用或系统中进行图片显示或图片处理。当前支持的存档图片格式包括JPEG、PNG、GIF、RAW、WebP、BMP、SVG、ICO。PixelMap指图片解码后无压缩的位图，用于图片显示或图片处理。图片处理指对PixelMap进行相关的操作，如旋转、缩放、设置透明度、获取图片信息、读写像素数据等。图片编码。
OpenHarmony实战开发-图片解码(ArkTS)如何实现图片显示或图片处理。
2401_82546228的博客
05-15 1405
图片解码指将所支持格式的存档图片解码成统一的PixelMap，以便在应用或系统中进行图片显示或图片处理。当前支持的存档图片格式包括JPEG、PNG、GIF、RAW、WebP、BMP、SVG、ICO。
HarmonyOS之深入解析图像的编码和解码
热门推荐
╰つ栺尖篴夢ゞ
07-03 1万+
一、基本概念 HarmonyOS 图像模块支持图像业务的开发，常见功能如图像解码、图像编码、基本的位图操作、图像编辑等。当然，也支持通过接口组合来实现更复杂的图像处理逻辑。 图像解码：图像解码就是不同的存档格式图片（如 JPEG、PNG 等）解码为无压缩的位图格式，以方便在应用或者系统中进行相应的处理。 PixelMap：PixelMap 是图像解码后无压缩的位图格式，用于图像显示或者进一步的处理。 渐进式解码：渐进式解码是在无法一次性提供完整图像文件数据的场景下，随着图像文件数据的逐步增加，通过多次增量
OpenHarmony实战开发-如何获取用户图库中的图片并显示在应用界面中。
m0_70749039的博客
05-24 808
拉起用户图库，选择图片并上传显示在应用界面中是比较常见的场景，比如上传用户头像、将图片上传社交平台、购物应用中上传图片评价等等。本文以上传用户头像为例介绍如何获取用户图库中的图片并显示在应用界面中。
OpenHarmony实战开发-如何根据图片设置自适应的背景色。
m0_70749039的博客
04-18 706
本示例将介绍如何根据图片设置自适应的背景色。
OpenHarmony实战开发-文件上传下载性能提升指导。
m0_70749039的博客
04-22 1037
在开发应用时，要实现高效的客户端跟服务器之间数据交换，文件传输的性能是至关重要的。一个数据交换性能较低的应用会导致其在加载过程中耗费较长时间，在很多的场景造成页面卡顿，极大的影响了用户体验。相反，一个数据交换高效的应用，则会让应用变得更加流畅。
OpenHarmony实战开发-图片选择和下载保存案例。
m0_70749039的博客
04-15 1166
本示例介绍图片相关场景的使用：包含访问手机相册图片、选择预览图片并显示选择的图片到当前页面，下载并保存网络图片到手机相册或到指定用户目录两个场景。
OpenHarmony实战开发-如何使用Image组件实现显示图片 (Image)
2401_82546228的博客
04-27 1022
开发者经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif
HarmonyOS教育类APP项目实战系列课(1-10)
牛肉胡辣汤
06-29 758
Attributes & Styles：属性样式栏Grid：不能用于设置网格布局的______，该图标只有Div组件的Display样式被设置为grid时才会出现。Attributes & Styles：属性样式栏Properties：用于设置组件基本标识和外观显示特征的属性，如组件的______等属性。B. 不支持分布式但支持多端调测C. 不支持分布式但支单持多端调测D. 支持分布式但不支持多端调测。B. 不支持多端模拟仿真C. 不支持模拟仿真D. 支持单端模模拟仿真。A. 编码格式B. 版本信息。
OpenHarmony开发实战：图片编辑（ArkTS）
2401_84182428的博客
04-12 773
│ │ ├──PixelMapWrapper.ets // PixelMap封装类。│ │ ├──ImageEditCrop.ets // 图片编辑操作类。│ │ ├──OptionViewModel.ets // 图片处理封装类。│ │ ├──AdjustUtil.ets // 调节工具类。
最全面鸿蒙系统开发的相关资料收录
Wscats
07-31 4156
开发 本示例基于 OpenHarmony 下的 JavaScript UI 框架，进行项目目录解读，JS FA、常用和自定义组件、用户交互、JS 动画的实现，通过本示例可以基本了解和学习到 JavaScript UI 的开发模式。 本项目是基于 OpenHarmony 项目而不是 HarmonyOS 项目，请注意运行环境。 请参考 OpenHarmony 项目配置方法 进行项目配置和运行。 如果你不熟悉 OpenHarmony 的 JS 开发，请参考该项目的 开发讲解。 示例 下载 awesome-har
OpenHarmony开发实战：图片编辑（ArkTS），2024年最新腾讯面试题前端
2401_84166396的博客
04-13 1225
当前裁剪功能采用pixelMap裁剪能力直接做切割，会有叠加效果，后续会通过增加选取框对当前功能进行优化。在进行图片编辑前需要先加载图片，当前文档是在生命周期aboutToAppear开始加载。当前亮度调节是在UI层面实现的，未实现细节优化算法，只做简单示例。当前章节需要完成图片的裁剪、旋转、色域调节（本章只介绍亮度、透明度、饱和度）等功能。本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在gitee中提供。在这个章节中，需要完成图片解码的操作，并将解码后的图片展示。2. 搭建烧录环境。
HarmonyOS开发实战（ Beta5版）线程间通信场景最佳实践
最新发布
weixin_55362248的博客
09-02 852
在应用开发中，经常会需要处理一些耗时的任务，如果全部放在主线程中执行就会导致阻塞，从而引起卡顿或者掉帧现象，降低用户体验，此时就可以将这些耗时操作放到子线程中处理。
HarmonyOS开发实战（ Beta5版）应用滑动场景帧率问题分析最佳实践
weixin_55362248的博客
09-01 916
应用运行时的流畅度，涉及人因要素，不完全等同于应用系统性能。其中帧率问题，可以从如下几个指标进行衡量。
HarmonyOS开发实战（ Beta5版）跨线程序列化耗时点分析工具使用规范指南
weixin_55362248的博客
09-02 1045
DevEco Studio新增主线程序列化和反序列化检测能力，同时支持配置序列化/反序列化超时阈值。对于超过阈值的序列化和反序列化操作，在泳道中给出告警提示，并可以关联该时刻的调用栈信息，更好地帮忙开发者定位性能问题。
HarmonyOS开发实战（ Beta5版）减小应用包大小
weixin_55362248的博客
08-30 1644
当前DevEco Studio默认打包应用时不压缩so库文件，配置so压缩选项后，DevEco Studio会将so库文件以压缩形式打包到包中，从而减小应用包大小。
map转base64
09-14
要将Map对象转换为Base64字符串，您可以按照以下步骤进行操作： 1. 将Map对象转换为JSON字符串。 2. 将JSON字符串转换为字节数组。 3. 使用Base64编码算法将字节数组转换为Base64字符串。 以下是一个示例代码，演示了如何执行这些步骤： ```java import com.google.gson.Gson; import org.apache.commons.codec.binary.Base64; public class MapToBase64Converter { public static String convertToBase64(Map<String, Object> map) { // 将Map对象转换为JSON字符串 String json = new Gson().toJson(map); // 将JSON字符串转换为字节数组 byte[] data = json.getBytes(); // 使用Base64编码算法将字节数组转换为Base64字符串 String base64 = Base64.encodeBase64String(data); return base64; } } ``` 您可以使用上述`convertToBase64`方法来将Map对象转换为Base64字符串。只需提供一个Map对象作为参数，并接收返回的Base64字符串。 请注意，您需要在项目中包含相关依赖项（例如Gson和Apache Commons Codec），以便正确运行上述代码。 希望这可以帮助到您！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值