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

2025-09-04
湖北
本文字数：1256 字
阅读完需：约 4 分钟

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

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 方法传入每一份的尺寸参数完成图片裁剪。具体就是根据图片选择对话框，选择的下标，到图库里获取到选择的图片，然后以只读方式打开图片，获取打开图片信息，计算出切图后的宽度和高度，根据参数生成新切图，并缓存到数组里，方便显示切图后的九宫格，最后调用存储函数把切图存储到图库里，方便之后使用，比如发朋友图。