文章目录前言PixelMap 是什么用代码创建纯色 PixelMap创建蓝色 PixelMap自定义尺寸createImageSource从 ArrayBuffer 创建 ImageSourcegetPixelMapFromMedia加载应用内置资源PixelMap 的生命周期管理完整预览展示逻辑写在最后前言近期发现一款很有意思的HarmonyOS 三方库, 地址 pura/harmony-utils(V1.4.0) , 作者是桃花镇童长老, 我这里也是直接通过该作者公布的源码进行案例编写进行,写了到目前写了一部分demo ,感觉确实很有帮助,这里呢也是开始写一个系列的演示demo 供大家参考。如有帮助可以在OpenHarmony中进行下载安装进行使用哦案例demo导航展示↓↓↓↓↓↓接下来言归正传 ↓↓↓↓图片处理是移动端开发的必备技能HarmonyOS 里图片的核心数据结构是PixelMap——几乎所有图片操作都围绕它展开。这篇从零开始讲清楚 PixelMap 是什么、怎么创建、ImageUtil 的基础 API 怎么用。PixelMap 是什么PixelMap是 HarmonyOS 图片的像素数据表示可以理解为一个二维像素数组每个像素包含 R、G、B、A 四个通道的值RGBA 格式。Image组件可以直接接受PixelMap渲染StatepreviewPixelMap:image.PixelMap|undefinedundefined;// 在 build 中展示if(this.previewPixelMap!undefined){Image(this.previewPixelMap).width(120).height(120).borderRadius(8).objectFit(ImageFit.Contain)}用代码创建纯色 PixelMap演示代码里有一个私有方法展示了如何从零创建一个 PixelMapprivateasyncmakeTestPixelMap(r:number,g:number,b:number,w:number100,h:number100):Promiseimage.PixelMap{constbufnewArrayBuffer(w*h*4);// 每像素 4 字节RGBAconstpixelsnewUint8Array(buf);for(leti0;iw*h;i){pixels[i*4]r;// Redpixels[i*41]g;// Greenpixels[i*42]b;// Bluepixels[i*43]255;// Alpha不透明}returnimage.createPixelMap(buf,{size:{width:w,height:h},pixelFormat:image.PixelMapFormat.RGBA_8888});}几个要点每像素 4 字节RGBA 四个通道所以总 buffer 大小是w * h * 4Uint8Array每个通道值是 0-255 的整数用Uint8Array操作最直接image.createPixelMap根据 buffer 和尺寸信息创建 PixelMappixelFormat: RGBA_8888明确指定像素格式使用时// 创建红色 100×100 的 PixelMapconstpmawaitthis.makeTestPixelMap(255,0,0);this.previewPixelMappm;this.previewLabel红色 100×100 PixelMap;constinfopm.getImageInfoSync();this.addLog(创建 PixelMap:${info.size.width}×${info.size.height});getImageInfoSync()可以获取 PixelMap 的元信息包括size.width、size.height等。创建蓝色 PixelMap自定义尺寸// 蓝色 200×150constpmawaitthis.makeTestPixelMap(0,80,200,200,150);this.previewPixelMappm;this.previewLabel蓝色 200×150 PixelMap;constinfopm.getImageInfoSync();this.addLog(创建 PixelMap:${info.size.width}×${info.size.height});RGB 值(0, 80, 200)是蓝色尺寸 200×150。这个方法签名是(r, g, b, w100, h100)不传宽高就用默认 100×100。createImageSource从 ArrayBuffer 创建 ImageSourceImageSource是图片的另一种表示可以从 ArrayBuffer、URI、文件描述符等创建// 先把 PixelMap 打包成 PNG 格式的 bufferconstpmawaitthis.makeTestPixelMap(0,200,100);constpackOpts:image.PackingOption{format:image/png,quality:100};constbufawaitImageUtil.packingFromPixelMap(pm,packOpts);// 再从 buffer 创建 ImageSourceconstsrcImageUtil.createImageSource(buf);this.addLog(createImageSource(ArrayBuffer) 成功, type:typeofsrc);ImageSource的用途可以从 ImageSource 读取图片信息格式、尺寸可以再次解码成 PixelMap可以传给packingFromImageSource进行格式转换getPixelMapFromMedia加载应用内置资源这是加载$r(app.media.xxx)资源图片的标准方式constpmawaitImageUtil.getPixelMapFromMedia($r(app.media.startIcon));this.previewPixelMappm;this.previewLabelgetPixelMapFromMedia(startIcon);constinfopm.getImageInfoSync();this.addLog(getPixelMapFromMedia:${info.size.width}×${info.size.height});$r(app.media.startIcon)是 HarmonyOS 的资源引用对应resources/base/media/startIcon.png。这个 API 的使用场景需要对内置图片做进一步处理时压缩、格式转换、添加水印等先把资源加载成 PixelMap再进行操作。PixelMap 的生命周期管理PixelMap 持有原生内存用完应该释放// 如果 PixelMap 不再使用调用 release() 释放内存pm.release();演示代码里没有显式调用release()因为是演示页赋值给State的 PixelMap 会在组件销毁时自动处理。但在实际项目里临时创建的 PixelMap 用完最好主动release。完整预览展示逻辑演示页的预览区域展示了如何动态更新显示的图片StatepreviewPixelMap:image.PixelMap|undefinedundefined;StatepreviewLabel:string;// build 中的预览区域if(this.previewPixelMap!undefined){Column({space:4}){Text(this.previewLabel).fontSize(12).fontColor(#4A90E2)Image(this.previewPixelMap).width(120).height(120).borderRadius(8).objectFit(ImageFit.Contain)}.padding(10).backgroundColor(#F0F7FF).borderRadius(10).width(100%)}每次创建新的 PixelMap就把它赋给State previewPixelMapImage组件会自动重新渲染。写在最后PixelMap 是 HarmonyOS 图片处理的基础数据结构从代码创建ArrayBuffer→image.createPixelMap适合动态生成图形从资源加载getPixelMapFromMedia加载应用内置图片从 Buffer 创建 ImageSourcecreateImageSource适合网络图片、文件图片查询信息getImageInfoSync()获取尺寸等元信息下一篇讲 PixelMap 和 Base64 的互相转换以及图片压缩。
从像素到图片：HarmonyOS PixelMap 的创建、加载与展示全解析
文章目录前言PixelMap 是什么用代码创建纯色 PixelMap创建蓝色 PixelMap自定义尺寸createImageSource从 ArrayBuffer 创建 ImageSourcegetPixelMapFromMedia加载应用内置资源PixelMap 的生命周期管理完整预览展示逻辑写在最后前言近期发现一款很有意思的HarmonyOS 三方库, 地址 pura/harmony-utils(V1.4.0) , 作者是桃花镇童长老, 我这里也是直接通过该作者公布的源码进行案例编写进行,写了到目前写了一部分demo ,感觉确实很有帮助,这里呢也是开始写一个系列的演示demo 供大家参考。如有帮助可以在OpenHarmony中进行下载安装进行使用哦案例demo导航展示↓↓↓↓↓↓接下来言归正传 ↓↓↓↓图片处理是移动端开发的必备技能HarmonyOS 里图片的核心数据结构是PixelMap——几乎所有图片操作都围绕它展开。这篇从零开始讲清楚 PixelMap 是什么、怎么创建、ImageUtil 的基础 API 怎么用。PixelMap 是什么PixelMap是 HarmonyOS 图片的像素数据表示可以理解为一个二维像素数组每个像素包含 R、G、B、A 四个通道的值RGBA 格式。Image组件可以直接接受PixelMap渲染StatepreviewPixelMap:image.PixelMap|undefinedundefined;// 在 build 中展示if(this.previewPixelMap!undefined){Image(this.previewPixelMap).width(120).height(120).borderRadius(8).objectFit(ImageFit.Contain)}用代码创建纯色 PixelMap演示代码里有一个私有方法展示了如何从零创建一个 PixelMapprivateasyncmakeTestPixelMap(r:number,g:number,b:number,w:number100,h:number100):Promiseimage.PixelMap{constbufnewArrayBuffer(w*h*4);// 每像素 4 字节RGBAconstpixelsnewUint8Array(buf);for(leti0;iw*h;i){pixels[i*4]r;// Redpixels[i*41]g;// Greenpixels[i*42]b;// Bluepixels[i*43]255;// Alpha不透明}returnimage.createPixelMap(buf,{size:{width:w,height:h},pixelFormat:image.PixelMapFormat.RGBA_8888});}几个要点每像素 4 字节RGBA 四个通道所以总 buffer 大小是w * h * 4Uint8Array每个通道值是 0-255 的整数用Uint8Array操作最直接image.createPixelMap根据 buffer 和尺寸信息创建 PixelMappixelFormat: RGBA_8888明确指定像素格式使用时// 创建红色 100×100 的 PixelMapconstpmawaitthis.makeTestPixelMap(255,0,0);this.previewPixelMappm;this.previewLabel红色 100×100 PixelMap;constinfopm.getImageInfoSync();this.addLog(创建 PixelMap:${info.size.width}×${info.size.height});getImageInfoSync()可以获取 PixelMap 的元信息包括size.width、size.height等。创建蓝色 PixelMap自定义尺寸// 蓝色 200×150constpmawaitthis.makeTestPixelMap(0,80,200,200,150);this.previewPixelMappm;this.previewLabel蓝色 200×150 PixelMap;constinfopm.getImageInfoSync();this.addLog(创建 PixelMap:${info.size.width}×${info.size.height});RGB 值(0, 80, 200)是蓝色尺寸 200×150。这个方法签名是(r, g, b, w100, h100)不传宽高就用默认 100×100。createImageSource从 ArrayBuffer 创建 ImageSourceImageSource是图片的另一种表示可以从 ArrayBuffer、URI、文件描述符等创建// 先把 PixelMap 打包成 PNG 格式的 bufferconstpmawaitthis.makeTestPixelMap(0,200,100);constpackOpts:image.PackingOption{format:image/png,quality:100};constbufawaitImageUtil.packingFromPixelMap(pm,packOpts);// 再从 buffer 创建 ImageSourceconstsrcImageUtil.createImageSource(buf);this.addLog(createImageSource(ArrayBuffer) 成功, type:typeofsrc);ImageSource的用途可以从 ImageSource 读取图片信息格式、尺寸可以再次解码成 PixelMap可以传给packingFromImageSource进行格式转换getPixelMapFromMedia加载应用内置资源这是加载$r(app.media.xxx)资源图片的标准方式constpmawaitImageUtil.getPixelMapFromMedia($r(app.media.startIcon));this.previewPixelMappm;this.previewLabelgetPixelMapFromMedia(startIcon);constinfopm.getImageInfoSync();this.addLog(getPixelMapFromMedia:${info.size.width}×${info.size.height});$r(app.media.startIcon)是 HarmonyOS 的资源引用对应resources/base/media/startIcon.png。这个 API 的使用场景需要对内置图片做进一步处理时压缩、格式转换、添加水印等先把资源加载成 PixelMap再进行操作。PixelMap 的生命周期管理PixelMap 持有原生内存用完应该释放// 如果 PixelMap 不再使用调用 release() 释放内存pm.release();演示代码里没有显式调用release()因为是演示页赋值给State的 PixelMap 会在组件销毁时自动处理。但在实际项目里临时创建的 PixelMap 用完最好主动release。完整预览展示逻辑演示页的预览区域展示了如何动态更新显示的图片StatepreviewPixelMap:image.PixelMap|undefinedundefined;StatepreviewLabel:string;// build 中的预览区域if(this.previewPixelMap!undefined){Column({space:4}){Text(this.previewLabel).fontSize(12).fontColor(#4A90E2)Image(this.previewPixelMap).width(120).height(120).borderRadius(8).objectFit(ImageFit.Contain)}.padding(10).backgroundColor(#F0F7FF).borderRadius(10).width(100%)}每次创建新的 PixelMap就把它赋给State previewPixelMapImage组件会自动重新渲染。写在最后PixelMap 是 HarmonyOS 图片处理的基础数据结构从代码创建ArrayBuffer→image.createPixelMap适合动态生成图形从资源加载getPixelMapFromMedia加载应用内置图片从 Buffer 创建 ImageSourcecreateImageSource适合网络图片、文件图片查询信息getImageInfoSync()获取尺寸等元信息下一篇讲 PixelMap 和 Base64 的互相转换以及图片压缩。
