如何将透明的PNG图转成Mask图？HarmonyOS 鸿蒙Next

如何将透明的PNG图转成Mask图？HarmonyOS 鸿蒙Next PNG图是通过Canvas手指涂抹绘画生成处理的，如何将其转成黑白Mask图

// 获取图像的宽高
let info = await imagePixel.getImageInfo();
const width = info.size.width;
const height = info.size.height;
const pixelCount = width * height;

const pixels = new Uint8Array(pixelCount * 4);

await imagePixel.readPixelsToBuffer(pixels);
// 遍历每个像素
for (let i = 0; i < pixels.length; i += 4) {
  const r = pixels[i];       // 红色通道
  const g = pixels[i + 1];   // 绿色通道
  const b = pixels[i + 2];   // 蓝色通道
  const a = pixels[i + 3];   // 透明度通道
  // console.log('readPixel-processImage-a='+a)
  if (a == 0) {
    // 如果像素完全透明，设置为白色
    pixels[i] = 255;       // 红色
    pixels[i + 1] = 255;   // 绿色
    pixels[i + 2] = 255;   // 蓝色
    pixels[i + 3] = 255;   // 不透明
  } else {
    // 否则设置为黑色
    pixels[i] = 0;         // 红色
    pixels[i + 1] = 0;     // 绿色
    pixels[i + 2] = 0;     // 蓝色
    pixels[i + 3] = 255;   // 不透明
  }
}

// 将修改后的像素数据写回图像
imagePixel.writeBufferToPixels(pixels)

更多关于如何将透明的PNG图转成Mask图？HarmonyOS 鸿蒙Next的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

官方文档现在也没给出过相关的文档和demo

更多关于如何将透明的PNG图转成Mask图？HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，将透明的PNG图转换成Mask图，可以通过使用PixelMap和Canvas来实现。首先，使用ImageSource加载PNG图片，然后通过PixelMap获取图像的像素数据。接着，创建一个Canvas对象，并使用Canvas的drawPixelMap方法将图像绘制到画布上。通过遍历像素数据，可以根据透明度阈值将图像二值化，生成Mask图。最后，将处理后的像素数据保存为新的图像文件。具体代码实现需根据鸿蒙的API文档进行操作。

在HarmonyOS鸿蒙Next中，将透明的PNG图转换为Mask图可以通过以下步骤实现：

  1. 加载图像：使用Image组件加载PNG图像。
  2. 提取透明度：通过PixelMap类获取图像的像素数据，提取透明度通道。
  3. 创建Mask图：将透明度通道转换为灰度图，生成Mask图。
  4. 应用Mask：将生成的Mask图应用到UI组件上，如Image或Canvas。

示例代码：

PixelMap pixelMap = ImageUtils.loadPixelMapFromResource(context, R.drawable.transparent_png);
int[] pixels = pixelMap.getPixels();
for (int i = 0; i < pixels.length; i++) {
    int alpha = (pixels[i] >> 24) & 0xFF;
    pixels[i] = (alpha << 24) | (alpha << 16) | (alpha << 8) | alpha;
}
PixelMap maskMap = PixelMap.create(pixelMap.getWidth(), pixelMap.getHeight(), PixelFormat.RGBA_8888);
maskMap.setPixels(pixels);

此方法适用于需要动态生成Mask图的场景。

回到顶部