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

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

最近突然发现网易云和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()

}

第三步、获取pixelMap对象的rgb信息

使用华为开放的图像处理API能获取很多的图像信息，跟rgb相关的也有很多，可操作扩展性也很高，在这里不一一展开，官方API文档都能查到。这里我是获取了该pixelMap对象的平均rgb值，并且生成了一个rgb信息字符串和rgba信息字符串，以满足多种需求

export default function getAverageColor(context: Context, imgName: string): string[] {
  // 获取pixelMap对象
  let PixelMap = getPixelMap(context, imgName)
  let colorList: string[] = ['', '']
  effectKit.createColorPicker(PixelMap).then(cp => {
    let color = cp.getAverageColor()
    colorList[0] = 'rgb(' + color.red + ',' + color.green + ',' + color.blue + ')'
    colorList[1] = 'rgba(' + color.red + ',' + color.green + ',' + color.blue + ',0)'
  })
  PixelMap.release().then(() => {
  }).catch((error: BusinessError) => {
  })
  PixelMap.release()
  return colorList
}

第四步、使用图片平均RGB信息制作蒙版

最后就到蒙版的制作了，代码很简单，看看官方API文档就会了，这里只展示上半部分渐变蒙版的代码

            .linearGradient({
              colors: [[obj.overlayColor[0], 0.15],
                [obj.overlayColor[1], 1.0]]
            })