HarmonyOS鸿蒙Next中两个图片合成一个图片

HarmonyOS鸿蒙Next中两个图片合成一个图片 我想用一个图片作为底图，另一个小图片叠加到底图上，并且可以移动位置，最后合成一个图片，保存到app里或者系统图库里，应该怎么实现呢？

3 回复

AI修图里有啊，魔法移图 -贴纸，

更多关于HarmonyOS鸿蒙Next中两个图片合成一个图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，可通过PixelMap API实现图片合成。使用image模块创建PixelMap对象，调用createPixelMap()加载源图片。利用createPixelMap()的配置参数设置目标画布尺寸，通过drawPixelMap()方法将多个PixelMap绘制到目标画布。调用imagePacker将合成后的PixelMap打包输出为图片文件。整个过程基于ArkTS声明式开发，无需依赖Java或C语言。

在HarmonyOS Next中实现图片叠加合成，可以通过以下步骤完成：

  1. 图像加载与绘制
    使用Image组件加载底图，通过Canvas的drawImage()方法绘制底图，再叠加第二张小图。通过CanvasRenderingContext2D控制小图的位置坐标（如offsetX、offsetY），支持动态调整位置。

  2. 交互与位置调整
    为小图添加拖拽事件（如TouchListener），通过手势坐标更新小图的绘制位置，实时刷新Canvas实现移动效果。

  3. 图片合成与保存
    调用Canvas的toPixelMap()生成合成后的PixelMap，通过ImagePacker将PixelMap编码为图片（如JPEG/PNG）。最后使用PhotoAccessHelper将图片保存到系统相册或应用沙箱路径。

关键代码示例（ArkTS）：

// 创建Canvas并绘制
const canvas = new Canvas();
const context = canvas.getContext('2d');
context.drawImage(baseImage, 0, 0); // 绘制底图
context.drawImage(overlayImage, x, y); // 叠加小图（x,y可动态修改）

// 保存合成图片
const packer = new ImagePacker();
const packOpts = { format: 'image/jpeg', quality: 100 };
const data = await packer.packing(pixelMap, packOpts);
// 通过PhotoAccessHelper写入系统图库

注意需申请ohos.permission.WRITE_IMAGEVIDEO权限，并合理管理图片资源内存。

回到顶部