如何获取图片的颜色平均值

如何获取图片的颜色平均值

HarmonyOS
2024-05-21 22:02:17
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
pfuchenlu

获取图片颜色平均值,用来做背景渐变色,效果如下

使用的核心API

图片解码

图像效果

核心代码解释

通过使用滑块视图容器Swiper,将控制器SwiperController绑定至Swiper组件,实现其子组件Image图片滑动轮播显示效果,在事件 onAnimationStart切换动画过程中通过Image模块(@ohos.multimedia.image)相关能力获取图片颜色平均值,此过程中需获取resourceManager资源管理,将存档图片解码成统一的PixelMap,使用@ohos.effectKit包中ColorPicker智能取色器进行颜色取值。同时通过接口animateTo开启背景颜色渲染的属性动画。全局界面开启沉浸式状态栏,通过getWindowAvoidArea方法获取系统的规避区域,赋值给Column组件填充区,以此来达到适配安全区域的效果

import image from '@ohos.multimedia.image'; 
import effectKit from '@ohos.effectKit'; 
import resourceManager from '@ohos.resourceManager'; 
import window from '@ohos.window'; 
 
@Entry 
@Component 
struct Index { 
  @State imgData: Resource[] = [ 
    $r("app.media.image1"), 
    $r("app.media.image2"), 
    $r("app.media.image3") 
  ]; 
  @State bgColor: string = "#ffffff" 
  @State topSafeHeight: number = 0 
  private swiperController: SwiperController = new SwiperController() 
 
  async aboutToAppear() { 
    // 顶部安全高度适配 
    let w: window.Window = await window.getLastWindow(getContext(this)) 
    await w.setWindowLayoutFullScreen(true) 
    this.topSafeHeight = px2vp(w.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height) 
 
    // 初始化页面获取第一张图片的颜色 
    const context = getContext(this); 
    const resourceMgr: resourceManager.ResourceManager = context.resourceManager 
    const fileData: Uint8Array = await resourceMgr.getMediaContent(this.imgData[0]) 
    const buffer = fileData.buffer 
    const imageSource: image.ImageSource = image.createImageSource(buffer) 
    const pixelMap: image.PixelMap = await imageSource.createPixelMap() 
 
    effectKit.createColorPicker(pixelMap, (err, colorPicker) => { 
      let color = colorPicker.getMainColorSync() 
      this.bgColor = "#" + color.alpha.toString(16) + color.red.toString(16) + color.green.toString(16) + color.blue.toString(16) 
    }) 
  } 
 
  build() { 
    Column() { 
      Swiper(this.swiperController) { 
        ForEach(this.imgData, (item: Resource) => { 
          Image(item).borderRadius(10).margin({ top: 20 }) 
        }) 
      } 
      .width("100%") 
      .padding({ left: 20, right: 20 }) 
      .autoPlay(true) 
      .interval(3500) 
      .duration(500) 
      .loop(true) 
      .itemSpace(10) 
      .indicator(false) 
      .disableSwipe(true) 
      .onAnimationStart(async (index, targetIndex) => { 
        try { 
          const context = getContext(this); 
          // 获取resourceManager资源管理器 
          const resourceMgr: resourceManager.ResourceManager = context.resourceManager 
          const fileData: Uint8Array = await resourceMgr.getMediaContent(this.imgData[targetIndex]) 
          // 获取图片的ArrayBuffer 
          const buffer = fileData.buffer 
          //创建imageSource 
          const imageSource: image.ImageSource = image.createImageSource(buffer) 
          //创建PixelMap 
          const pixelMap: image.PixelMap = await imageSource.createPixelMap() 
 
          effectKit.createColorPicker(pixelMap, (err, colorPicker) => { 
            //读取图像主色的颜色值,结果写入Color里 
            let color = colorPicker.getMainColorSync() 
            //开启背景颜色渲染的属性动画 
            animateTo({ duration: 500, curve: Curve.Linear, iterations: 1 }, () => { 
              this.bgColor = "#" + color.alpha.toString(16) + color.red.toString(16) + color.green.toString(16) + color.blue.toString(16) 
            }) 
          }) 
 
 
        } catch (e) { 
          console.log(e) 
        } 
      }) 
    } 
    .width('100%') 
    .height('100%') 
    .linearGradient({ 
      direction: GradientDirection.Bottom, // 渐变方向 
      colors: [[this.bgColor, 0.0], [0xffffff, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果 
    }) 
    .padding({ top: this.topSafeHeight }) 
  } 
}

实现效果

注明适配的版本信息

IDE:DevEco Studio 4.0.3.600

SDK:HarmoneyOS 4.0.10.11

分享
微博
QQ
微信
回复
2024-05-22 17:58:19
相关问题
如何获取拍照后图片地址
706浏览 • 1回复 待解决
鸿蒙如何获取Element图片宽高
6281浏览 • 1回复 待解决
如何调用系统拍照并获取图片
207浏览 • 1回复 待解决
如何获取图片宽高,你知道吗?
861浏览 • 1回复 待解决
XComponent组件如何设置背景颜色
928浏览 • 1回复 待解决
如何实现组件边缘颜色渐变
663浏览 • 1回复 待解决
arkTs如何获取视频第一帧图片?
286浏览 • 2回复 待解决
如何修改DevEco颜色主题?
8233浏览 • 3回复 已解决
如何设置状态栏和导航栏颜色
1206浏览 • 1回复 待解决
Tab组件Tabbar中字体颜色如何修改
408浏览 • 1回复 待解决
如何将背景颜色设置为透明
1043浏览 • 1回复 待解决
如何实现页面背景颜色置灰
512浏览 • 1回复 待解决
Color.Black如何转成对应颜色编码
807浏览 • 1回复 待解决
页面加载前获取网络图片宽高
257浏览 • 1回复 待解决