九宫格切图-创意分享新风尚

踏入鸿蒙世界的敲门砖，标志着您在技术征途上的全新起点，提升就业竞争力，获得行业认可，点亮职业成长先机，快人一步抢占未来应用开发赛道！

https://developer.huawei.com/consumer/cn/training/dev-cert-detail/101666948302721398?ha_source=hmosclass-juejin&ha_sourceId=89000434

介绍

在社交媒体日益繁荣的今天，九宫格切图以其独特的视觉呈现方式，成为了朋友圈中的一股清新之风。通过将一张完整图片精心切割为九个小方块，再依次排列发布，不仅让图片内容更加层次分明，还能激发观者的探索欲，引导他们逐格浏览，享受发现新细节的乐趣。

九宫格图片的用处广泛而巧妙。它适用于旅行美景的展示，每一格都是一处风景的缩影，串联起一段完整的旅程记忆；也是美食分享的绝佳选择，从食材准备到成品呈现，步步精彩，让人垂涎欲滴；更可用于生活日常的创意记录，无论是温馨的家庭瞬间，还是个人的小确幸，都能在九宫格的框架下，被赋予更多故事性和观赏性。这种创意切图方式，让每一次分享都变得更加有趣和生动，是连接你我，传递美好情感的新桥梁。

效果预览

 

 

 

 

工程目录

 

具体实现

1. 权限添加

配置文件module.json5里添加读取图片及视频权限和修改图片或视频权限。

 

2. 图片选择对话

获取本地图片：首先使用getPhotoAccessHelper获取相册管理模块实例，然后使用getAssets方法获取文件资源，最后使用getAllObjects获取检索结果中的所有文件资产方便展示；

 

自定义对话框显示获取到的本地图片

 

3. 切图九宫格

使用createImagePacker创建ImagePacker实例，然后使用fs.open打开文件，调用createImageSource接口创建图片源实例方便操作图片，接下来使用getImageInfo方法获取图片大小便于分割，最后使用createPixelMap方法传入每一份的尺寸参数完成图片裁剪。具体就是根据图片选择对话框，选择的下标，到图库里获取到选择的图片，然后以只读方式打开图片，获取打开图片信息，计算出切图后的宽度和高度，根据参数生成新切图，并缓存到数组里，方便显示切图后的九宫格，最后调用存储函数把切图存储到图库里，方便之后使用，比如发朋友图。

 

4. 保存图库

把上面切出来的PixelMap先转为ArrayBuffer，然后通过PhotoAccessHelper模块提供相册管理模块能力，包括创建相册以及访问、修改相册中的媒体数据信息等。把ArrayBuffer保存到图库里。

 

5. 界面布局

顶部和底部显示红色说明文字，上面默认显示图库第一张图上，点击图片弹出对话框选择图库里的其它图片，下来是个切割九宫格按钮，点击可以把选择的图片切割为九张图片，并自动保存到图库里。

 

 

6. 权限申请

在页面生命周期aboutToAppear函数时，调用权限申请，并获取图库数据。

 

 

相关权限

读取图片及视频权限：
ohos.permission.READ_IMAGEVIDEO

修改图片或视频权限：
ohos.permission.WRITE_IMAGEVIDEO

约束与限制

1.本示例仅支持标准系统上运行，支持设备：华为手机。

2.HarmonyOS系统：HarmonyOS NEXT Developer Beta1及以上。

3.DevEco Studio版本：DevEco Studio NEXT Developer Beta1及以上。

4.HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。（转载自51CTO，作者：狼哥Army）