HarmonyOS鸿蒙Next中实现图片切割九宫格功能示例代码

HarmonyOS鸿蒙Next中实现图片切割九宫格功能示例代码

介绍

本示例可以通过图库选择一张图片，将其切割成九宫格展示，然后可保存到图库中。

实现图片切割九宫格功能源码链接

效果预览

图片名称

使用说明

实现思路

根据图片宽高信息以及要分割的行数列数，计算出每张图片的左上角起始位置的坐标及宽高，根据这些信息获取对应的pixelMap

export async function splitImage(l = 3, c = 3): Promise<SplitImageModel> {
  // 选择图片
  let uris = await selectImages(1)
  let originUri = ''
  // 存储切割图片
  let imagePixels: image.PixelMap[] = []
  if (uris && uris.length) {
    originUri = uris[0]
    // 创建图像编码ImagePacker对象
    let imagePickerApi = image.createImagePacker();
    // 以只读方式打开指定下标图片
    let file: fileIo.File = await fileIo.open(uris[0], fileIo.OpenMode.READ_ONLY)
    let fd: number = file.fd;
    // 获取图片源
    let imageSource = image.createImageSource(fd);
    // 图片信息
    let imageInfo = await imageSource.getImageInfo();
    // 图片高度除以3，就是把图片切为3份
    let height = imageInfo.size.height / l;
    let width = imageInfo.size.width / c;
    // 切换为 3x3 张图片
    for (let i = 0; i < l; i++) {
      for (let j = 0; j < c; j++) {
        // 设置解码参数DecodingOptions，解码获取pixelMap图片对象
        let decodingOptions: image.DecodingOptions = {
          desiredRegion: {
            size: {
              height: height, // 切开图片高度
              width: width  // 切开图片宽度
            },
            x: j * width, // 切开x起始位置
            y: i * height     // 切开y起始位置
          }
        }
        // 根据参数重新九宫格图片
        let img: image.PixelMap = await imageSource.createPixelMap(decodingOptions);
        // 把生成新图片放到内存里
        imagePixels.push(img);
      }
    }
    imagePickerApi.release();
    fileIo.closeSync(fd);
  }
  return { originUri, splitImages: imagePixels }
}

更多关于HarmonyOS鸿蒙Next中实现图片切割九宫格功能示例代码的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中实现图片切割九宫格功能，可以使用PixelMap和Canvas进行图像处理和绘制。以下是一个简单的示例代码，展示如何将一张图片切割成九宫格并进行显示。

import image from '@ohos.multimedia.image';
import ui from '@ohos.uirouter';

// 假设已经有一个PixelMap对象
let pixelMap: image.PixelMap = ...;

// 获取图片的宽度和高度
let width = pixelMap.getImageInfo().size.width;
let height = pixelMap.getImageInfo().size.height;

// 计算每个小格的宽度和高度
let cellWidth = width / 3;
let cellHeight = height / 3;

// 创建一个Canvas对象
let canvas = new ui.Canvas();

// 绘制九宫格
for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        // 计算每个小格的起始位置
        let startX = j * cellWidth;
        let startY = i * cellHeight;

        // 绘制每个小格
        canvas.drawImage(pixelMap, startX, startY, cellWidth, cellHeight);
    }
}

// 将Canvas绘制到屏幕上
canvas.flush();

更多关于HarmonyOS鸿蒙Next中实现图片切割九宫格功能示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙Next）中实现图片切割九宫格功能，可以通过Image组件和Canvas组件结合实现。以下是一个简单的示例代码：

// 导入相关类
import ohos.agp.components.Image;
import ohos.agp.components.ComponentContainer;
import ohos.agp.render.Canvas;
import ohos.agp.render.Paint;
import ohos.agp.utils.RectFloat;
import ohos.media.image.PixelMap;

public class NineGridImage extends ComponentContainer {
    private PixelMap pixelMap; // 原始图片
    private int gridSize = 3; // 九宫格行列数

    public NineGridImage(Context context, PixelMap pixelMap) {
        super(context);
        this.pixelMap = pixelMap;
        initView();
    }

    private void initView() {
        int width = pixelMap.getImageInfo().size.width;
        int height = pixelMap.getImageInfo().size.height;
        int gridWidth = width / gridSize;
        int gridHeight = height / gridSize;

        for (int i = 0; i < gridSize; i++) {
            for (int j = 0; j < gridSize; j++) {
                Image image = new Image(getContext());
                image.setPixelMap(pixelMap.createCropPixelMap(
                        new RectFloat(j * gridWidth, i * gridHeight, (j + 1) * gridWidth, (i + 1) * gridHeight)));
                image.setLayoutConfig(new LayoutConfig(gridWidth, gridHeight));
                addComponent(image);
            }
        }
    }
}

代码说明：

  1. PixelMap：用于加载和处理图片。
  2. Image组件：用于显示切割后的图片片段。
  3. createCropPixelMap：方法用于从原始图片中裁剪出指定区域的子图片。
  4. LayoutConfig：设置每个图片片段的布局大小。

使用方法：

将NineGridImage组件添加到你的布局中，并传入需要切割的图片PixelMap对象即可实现九宫格效果。

回到顶部