HarmonyOS 图片与 Base64 互转：ImageUtil pixelMapToBase64Str 实战

文章目录前言packingFromPixelMapPixelMap 打包成二进制pixelMapToBase64StrPixelMap 转 Base64 字符串base64ToPixelMapBase64 转回 PixelMappackingFromImageSource从 ImageSource 打包理解 PNG vs JPEG 的字节大小差异写在最后前言近期发现一款很有意思的HarmonyOS 三方库, 地址 pura/harmony-utils(V1.4.0) , 作者是桃花镇童长老, 我这里也是直接通过该作者公布的源码进行案例编写进行,写了到目前写了一部分demo ,感觉确实很有帮助,这里呢也是开始写一个系列的演示demo 供大家参考。如有帮助可以在OpenHarmony中进行下载安装进行使用哦案例demo导航展示↓↓↓↓↓↓接下来言归正传 ↓↓↓↓图片和 Base64 互转是一个高频需求上传图片到后台接口时可能需要传 Base64 字符串从接口拿到 Base64 数据要在界面上显示时需要先转回 PixelMap。这篇把pixelMapToBase64Str、base64ToPixelMap、packingFromPixelMap这几个方法讲清楚。packingFromPixelMapPixelMap 打包成二进制在转 Base64 之前先理解packingFromPixelMap——它是很多图片操作的基础步骤。packingFromPixelMap把 PixelMap 编码成指定格式的图片二进制数据ArrayBuffer// 打包成 PNGconstpmawaitthis.makeTestPixelMap(180,100,220,80,80);constpackOpts:image.PackingOption{format:image/png,quality:100};constbufawaitImageUtil.packingFromPixelMap(pm,packOpts);this.addLog(packingFromPixelMap(png):${buf.byteLength}bytes);// 打包成 JPEG质量 80constpmawaitthis.makeTestPixelMap(50,100,200,80,80);constpackOpts:image.PackingOption{format:image/jpeg,quality:80};constbufawaitImageUtil.packingFromPixelMap(pm,packOpts);this.addLog(packingFromPixelMap(jpeg,q80):${buf.byteLength}bytes);PackingOption的两个关键字段format图片格式image/png无损或image/jpeg有损quality质量1-100PNG 格式下这个值不影响文件大小JPEG 下影响明显一般规律同样内容的图片JPEG 文件比 PNG 小很多但 JPEG 有压缩损失。pixelMapToBase64StrPixelMap 转 Base64 字符串这个方法封装了打包 Base64 编码两步直接给你一个 Base64 字符串// PNG 格式constpmawaitthis.makeTestPixelMap(100,200,100,50,50);constb64awaitImageUtil.pixelMapToBase64Str(pm,image/png);this.previewBase64b64.substring(0,60)...;this.addLog(pixelMapToBase64Str(png):${b64.length}chars);// JPEG 格式constpmawaitthis.makeTestPixelMap(200,150,50,60,60);constb64awaitImageUtil.pixelMapToBase64Str(pm,image/jpeg);this.addLog(pixelMapToBase64Str(jpeg):${b64.length}chars);两个参数PixelMap 对象图片格式字符串image/png或image/jpeg返回的是纯 Base64 字符串不含data:image/png;base64,前缀。如果你要在 WebView 的 H5 页面里展示需要自己拼接前缀constdataUrldata:image/png;base64,${b64};base64ToPixelMapBase64 转回 PixelMap方向反过来把 Base64 字符串解码成 PixelMap// 先把 PixelMap 转成 Base64constpmawaitthis.makeTestPixelMap(255,128,0,40,40);constb64awaitImageUtil.pixelMapToBase64Str(pm,image/png);// 再把 Base64 转回 PixelMapconstrestoredawaitImageUtil.base64ToPixelMap(b64);this.previewPixelMaprestored;this.previewLabelbase64 → PixelMap (橙色40×40);constinforestored.getImageInfoSync();this.addLog(base64ToPixelMap:${info.size.width}×${info.size.height});还原后的 PixelMap 尺寸信息应该和原来一致40×40。这个方向的典型场景后台接口返回 Base64 格式的图片需要在Image组件里展示。packingFromImageSource从 ImageSource 打包packingFromImageSource和packingFromPixelMap功能类似区别是输入是ImageSource而不是PixelMap// 先把 PixelMap 打包成 PNG再创建 ImageSourceconstpmawaitthis.makeTestPixelMap(200,200,50,60,60);constpngBufawaitImageUtil.packingFromPixelMap(pm,{format:image/png,quality:100});constsrcImageUtil.createImageSource(pngBuf);// 再从 ImageSource 打包成 JPEGconstopts:image.PackingOption{format:image/jpeg,quality:90};constbufawaitImageUtil.packingFromImageSource(src,opts);this.addLog(packingFromImageSource:${buf.byteLength}bytes);这个用法的场景从文件或网络得到了原始图片数据非 PixelMap需要转换格式。比如你有一个 PNG 文件的 ArrayBuffer想转成 JPEG就走这个流程createImageSource(pngBuffer)→packingFromImageSource(src, {format: image/jpeg})。理解 PNG vs JPEG 的字节大小差异演示代码展示了同一张图片打包成不同格式后的大小对比这是理解图片压缩的直观方式。一般来说PNG无损压缩文件较大适合截图、图标、需要透明度的图JPEG有损压缩文件较小适合照片、自然图像quality 参数仅对 JPEG 有效数值越低文件越小画质越差写在最后图片和 Base64 互转就两个核心方法pixelMapToBase64Str(pm, format)PixelMap → Base64 字符串base64ToPixelMap(b64)Base64 字符串 → PixelMappackingFromPixelMap是它们的底层支撑理解了打包过程再看压缩相关的 API 就容易了。下篇讲图片压缩如何控制图片大小不超过目标体积。