鸿蒙三方库 | harmony-utils之ImageUtil Base64与PixelMap互转详解
前言图片的Base64编码和PixelMap转换是图片处理的基础操作在图片上传、分享、缓存等场景中经常使用。pura/harmony-utils的ImageUtil封装了Base64与PixelMap互转方法。本文将从API说明、代码实战、进阶用法、常见问题等多个维度进行全面讲解帮助开发者快速掌握并应用到实际项目中。一、ImageUtil转换核心APIImageUtil提供了以下图片转换方法方法说明返回类型使用场景base64ToPixelMap(base64)Base64转PixelMapPixelMap图片解码展示pixelMapToBase64(pixelMap)PixelMap转Base64string图片上传/分享base64ToArrayBuffer(base64)Base64转ArrayBufferArrayBuffer二进制数据处理1.1 核心特性简洁易用封装复杂API为一行调用降低使用门槛类型安全完整的TypeScript类型定义编译期即可发现错误异常处理内置异常捕获机制避免运行时崩溃双向转换支持Base64和PixelMap的双向转换1.2 转换流程对照转换方向源格式目标格式典型场景解码Base64PixelMap网络图片展示编码PixelMapBase64图片上传/存储转换Base64ArrayBuffer二进制处理二、完整使用步骤2.1 安装依赖ohpminstallpura/harmony-utils2.2 Base64转PixelMapimport{ImageUtil}frompura/harmony-utils;Button(Base64转PixelMap).width(100%).onClick(async(){try{letbase64Str...;// Base64编码的图片字符串letpixelMapawaitImageUtil.base64ToPixelMap(base64Str);this.result转换成功 ✅\nPixelMap尺寸:${pixelMap.getImageInfo().size};}catch(e){this.result异常: e;}})2.3 PixelMap转Base64Button(PixelMap转Base64).width(100%).onClick(async(){try{letbase64awaitImageUtil.pixelMapToBase64(this.pixelMap);this.result转换成功 ✅\nBase64长度:${base64.length};}catch(e){this.result异常: e;}})三、完整页面示例import{ImageUtil}frompura/harmony-utils;EntryComponentstruct ImageConvertDemo{Stateresult:string;build(){Column({space:12}){Button(Base64转PixelMap).width(100%).onClick(async(){try{this.resultBase64与PixelMap互转\n适用于图片上传和缓存;}catch(e){this.result异常: e;}});Text(this.result).fontSize(14).fontColor(#333333)}.padding(16)}}四、进阶用法4.1 图片上传封装import{ImageUtil}frompura/harmony-utils;asyncfunctionuploadImage(pixelMap:PixelMap):Promisevoid{letbase64awaitImageUtil.pixelMapToBase64(pixelMap);letresponseawaitfetch(https://api.example.com/upload,{method:POST,body:JSON.stringify({image:base64})});returnresponse.json();}4.2 图片缓存管理asyncfunctioncacheImage(pixelMap:PixelMap,key:string):Promisevoid{letbase64awaitImageUtil.pixelMapToBase64(pixelMap);PreferencesUtil.putString(key,base64);}asyncfunctiongetCachedImage(key:string):PromisePixelMap|null{letbase64PreferencesUtil.getString(key,);if(base64){returnawaitImageUtil.base64ToPixelMap(base64);}returnnull;}五、注意事项Base64格式需确保Base64字符串包含正确的数据前缀内存占用Base64编码比原始数据大约33%异步操作转换方法为异步需使用await初始化依赖使用前需确保AppUtil.init()已调用大图片大图片转换可能耗时建议在子线程处理六、常见问题Q1: Base64转PixelMap失败检查Base64字符串是否完整是否包含正确的MIME类型前缀。Q2: 转换后图片模糊可能是Base64编码时质量损失建议使用无损格式如PNG。Q3: Base64字符串太长怎么办可以先压缩图片再转Base64或使用文件上传替代Base64传输。Q4: 如何判断Base64是否为有效图片检查Base64前缀是否包含data:image/标识。总结ImageUtil的Base64与PixelMap互转方法为图片处理提供了便捷支持。本文详细介绍了核心API、使用步骤、完整示例、进阶用法以及常见问题的解决方案。开发者可以根据场景选择合适的转换方向。本文基于pura/harmony-utils工具库更多功能请参考官方文档与后续系列文章。

相关新闻

一文读懂Nano Banana 2 Lite图像创作大模型核心基础知识

一文读懂Nano Banana 2 Lite图像创作大模型核心基础知识

写在前面 欢迎大家关注Rocky的公众号:WeThinkIn 欢迎大家关注Rocky的知乎:Rocky Ding 《三年面试五年模拟》AIGC/LLM/AI Agent算法工程师/开发工程师求职面试秘籍独家资源:【三年面试五年模拟】WeThinkIn/AIGC-Interview-Book,欢迎…

2026/10/20 15:12:19 阅读更多 →
别卷 Agent 智商了:小团队做 MLOps,先搞定权限与日志再谈智能

别卷 Agent 智商了:小团队做 MLOps,先搞定权限与日志再谈智能

《证书、项目和实习,程序员职业规划到底该先补哪一个?》看起来是个大话题,但真落到项目里,常常就是几个具体选择。下面我尽量按实际开发时会遇到的问题来讲。摘要先把这篇文章的目标说清楚:看完之后,你应该…

2026/10/17 17:55:29 阅读更多 →
AI圈炸了!DeepSeek V4 满血上线:首创分时计费,国产大模型开启“价格屠夫”模式

AI圈炸了!DeepSeek V4 满血上线:首创分时计费,国产大模型开启“价格屠夫”模式

全网等待了三个月的 DeepSeek V4 GA 正式版终于揭开了神秘面纱。作为国产大模型中的“扫地僧”,DeepSeek 这一次不仅带来了性能上的跨越,更用一套行业首创的“计费组合拳”,直接震动了整个 AI 赛道。 目前,已有大量开发者拿到了灰…

2026/10/19 16:55:21 阅读更多 →

最新新闻

NLTK情感分析实战:朴素贝叶斯文本分类与特征工程

NLTK情感分析实战:朴素贝叶斯文本分类与特征工程

开头我先交代一个背景。去年我接了一个某售后团队的文本处理需求,他们每个月有近万条用户反馈,需要把表达不满的留言单独捞出来,让客服优先跟进。一开始大家都以为这种“情绪识别”要上什么重磅模型,结果我用了NLTK这套老牌工具&a…

2026/10/20 15:11:55 阅读更多 →
H3C防火墙双机热备:RBM+VRRP原理与Web配置实战

H3C防火墙双机热备:RBM+VRRP原理与Web配置实战

做网络运维这些年,防火墙双机热备是我见过最务实、也最容易被忽视的一项配置。很多朋友一提到RBMVRRP,脑子里就浮现一堆命令行,要么对着文档一行行抄,要么在设备上死记硬背,最后改一个接口就全乱了。其实H3C防火墙这套…

2026/10/20 15:11:55 阅读更多 →
OWASP Benchmark实战:用黄金标准量化评估SAST/DAST工具能力

OWASP Benchmark实战:用黄金标准量化评估SAST/DAST工具能力

如果你负责过应用安全工具选型,大概率经历过这种尴尬:会议室里各家厂商把 SAST、DAST 工具演示得天花乱坠,漏洞检出率动辄宣称百分之九十几,可一旦回到真实业务,漏报和误报依旧扎心。这种局面本质上不是某个工具不行&a…

2026/10/20 15:11:55 阅读更多 →
VS2017编译64位libssh2:OpenSSL与Zlib三库协同实战指南

VS2017编译64位libssh2:OpenSSL与Zlib三库协同实战指南

简介:本资源是面向Windows平台C/C开发者的一站式libssh2 64位编译成果包,专为解决VS2017环境下64位应用程序集成SSH2协议能力的刚需。资源提供已成功编译的完整libssh2 Win64库及配套头文件、依赖DLL(含libcrypto-1_1-x64.dll与libssl-1_1-x6…

2026/10/20 15:11:55 阅读更多 →
路由器工作原理深度拆解:路由表、数据包转发与NAT

路由器工作原理深度拆解:路由表、数据包转发与NAT

上次帮邻居调网络,发现他家的光猫、路由器、交换机全都挤在弱电箱里,线乱成一团。他说自己只会“插上电源,连上Wi-Fi”,至于路由器里面到底干了什么,完全是个黑盒子。这其实是很普遍的现象——路由器天天在用&#xff…

2026/10/20 15:11:55 阅读更多 →
Apple Silicon 虚拟机 EFI_RNG_PROTOCOL 缺失排查

Apple Silicon 虚拟机 EFI_RNG_PROTOCOL 缺失排查

前两天我在一台 M2 的 Mac mini 上用 VMware Fusion 装 Ubuntu 22.04 ARM 版,系统安装完重启,屏幕刷过一长串启动日志,其中一行EFI_RNG_PROTOCOL unavailable特别扎眼。第一反应就是“启动失败了”。结果等了几秒,系统照常进到了登…

2026/10/20 15:10:51 阅读更多 →

日新闻

CLRC663芯片Pin-to-Pin替代实战:从评估到量产全记录

CLRC663芯片Pin-to-Pin替代实战:从评估到量产全记录

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 1:01:30 阅读更多 →
ESP32舵机控制指南:原理、多路驱动与避坑实战

ESP32舵机控制指南:原理、多路驱动与避坑实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 1:01:30 阅读更多 →
位移法实现一阶低通滤波:单片机ADC采样降噪实战

位移法实现一阶低通滤波:单片机ADC采样降噪实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 1:01:30 阅读更多 →

周新闻

基于GMM的语音识别系统原理与MATLAB实现详解

基于GMM的语音识别系统原理与MATLAB实现详解

说到基于高斯混合模型(GMM)的语音识别系统,很多人第一反应就是一堆数学公式,觉得门槛很高。但如果你真的在MATLAB里把它落地跑通,会发现核心其实就是三件事:把声音变成特征向量,用GMM给每个类别…

2026/10/20 10:02:13 阅读更多 →
数字图像处理入门:反白、灰度化、调色板修改与导出txt实践

数字图像处理入门:反白、灰度化、调色板修改与导出txt实践

数字图像处理这四个字听起来挺唬人,但落到具体操作上,无非就是让计算机按你的想法“摆弄”像素。我在一个模拟项目X里用了一套特别经典的基础处理流程:对图像做反白、改调色板、彩色转灰度,最后把像素数据导出成txt文件。单看每一…

2026/10/19 17:32:41 阅读更多 →
机器人大脑技术盘点:具身智能的感知、决策与数据闭环

机器人大脑技术盘点:具身智能的感知、决策与数据闭环

如果你的信息流最近也天天刷到“机器人大脑”这个词,你会发现一个很有意思的现象:每个人说的“大脑”根本不是同一个东西。有人指的是大语言模型,有人指的是运动控制系统,还有人指的是能理解物理世界的端到端模型。在2026年这个时…

2026/10/20 2:50:50 阅读更多 →

月新闻

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 10:02:08 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 9:50:17 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 9:50:45 阅读更多 →