鸿蒙开发——根据背景图片来构建特定颜色的蒙版

最新推荐文章于 2025-06-19 10:24:34 发布

原创

最新推荐文章于 2025-06-19 10:24:34 发布 · 639 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为

效果图如下(文字部分马赛克处理)：

最近突然发现网易云和QQ音乐这些图片上方的蒙版颜色不是固定的，而是跟着图片内容走的，想看看能不能在鸿蒙实现，最后凭借俺寻思之力寻思出了一套流程(有bug，有时候蒙版直接透明了，蒙版颜色数据是在的，就是不显示，希望是虚拟机的bug)

第一步、设置背景图/通过Image添加图片

如果要实现上图这样的效果，究竟是要在容器里放一个Image组件还是直接设置容器的背景图呢？我也考虑过这个问题，并且两种方式都试了试，在不考虑性能消耗的情况下实际流程差不多，开发中视情况灵活使用两种方式，这里我接下来就主要介绍设置背景图的方式

第二步、将图片转制为pixelMap对象

为了使用官方开放的各种图片处理API，我们最好先将图片转换为pixelMap对象，该格式的图片几乎能满足所有接口的要求

下面是我写的一个工具类

export default function getPixelMap(context: Context, imageName: string): image.PixelMap {
  const resourceMgr: resourceManager.ResourceManager = context.resourceManager
  const fileData: Uint8Array = resourceMgr.getRawFileContentSync(imageName)
  const buffer = fileData.buffer.slice(0)
  const imageSource: image.ImageSource = image.createImageSource(buffer)
  return imageSource.createPixelMapSync()

}