如何从一个网络图片获取其主题色？

Question

如题，如何从一个网络图片中，获取到其主题色，一般会用来显示在和封面有关的背景模糊效果？

Answer 1

1. 使用imageknife框架进行网络图片的加载和渲染
   使用ImageKnifeComponent组件替代原生的Image组件，并配合使用ImageKnifeOption进行图片的加载
2. 监听网络图片的加载回调，获取到网络图片的PixelMap类型的数据

3. 使用系统的effectKit框架，支持从PixelMap对象中，获取平均色/主题色等

   /// 视图组件
          ImageKnifeComponent({
            imageKnifeOption: this.imageKnifeOption
          })
            .size({ width: 38, height: 38 })
   
   /// 配置图片组件加载回调
    this.imageKnifeOption.onLoadListener = {
      onLoadSuccess: (data) => {
        const pixelMap = data as PixelMap
        effectKit.createColorPicker(pixelMap, (error, colorPicker) => {
          if (!error) {
   /// 获得主题色/平均色
            const color = colorPicker.getAverageColor()
          }
        })
      }
    }