HarmonyOS鸿蒙Next中图片获取主颜色

HarmonyOS鸿蒙Next中图片获取主颜色 我需要做一个似应用详情页的page，需要背景与App颜色的主色调一致，如何实现？

4 回复

【解决方案】

getLargestProportionColor读取图像中占比最多的颜色值，结果写入Color里，使用同步方式返回。该接口使用中位切分算法划分颜色空间，获取占比最多的颜色空间的平均颜色。该问题可以用以下代码示例解决，讲选择要提取的图片更换成目标image。

import { effectKit } from '@kit.ArkGraphics2D';
import { image } from '@kit.ImageKit';
import { componentSnapshot } from '@kit.ArkUI';

@Entry
@Component
struct pickColor {
  @State colorVal: string = '#00000000';

  async extractDominantColor(pixelMap: PixelMap): Promise<string> {
    const colorPicker = await effectKit.createColorPicker(pixelMap)
    const color = colorPicker.getLargestProportionColor()
    return '#' +
    [color.alpha, color.red, color.green, color.blue].map(x => {
      const hex = x.toString(16);
      return hex.length === 1 ? '0' + hex : hex;
    }).join('');
  }

  build() {
    Column({ space: 10 }) {
      Image($r("app.media.background"))//选择要提取的图片
        .width('70%')
        .id('image')
      Button('get main color')
        .onClick(() => {
          componentSnapshot.get("image", async (error: Error, pixmap: image.PixelMap) => {
            this.colorVal = await this.extractDominantColor(pixmap)
          })
        })
      Text(`主颜色${this.colorVal}`)
        .backgroundColor(this.colorVal)
        .fontSize('20fp')
    }
    .width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中图片获取主颜色的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


import { effectKit } from '@kit.ArkGraphics2D';
import { image } from '@kit.ImageKit';
import { componentSnapshot } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State colorVal: string = '#00000000';

  async extractDominantColor(pixelMap: PixelMap): Promise<string> {
    const colorPicker = await effectKit.createColorPicker(pixelMap)
    const color = colorPicker.getLargestProportionColor()
    return `#${color.alpha.toString(16)}${color.red.toString(16)}${color.green.toString(16)}${color.blue.toString(16)}`
  }

  build() {
    Column({ space: 10 }) {
      Image($r("app.media.imageText"))
        .width('70%')
        .id('image')
      Button('get main color')
        .onClick(() => {
          componentSnapshot.get("image", async (error: Error, pixmap: image.PixelMap) => {
            this.colorVal = await this.extractDominantColor(pixmap)
          })
        })
      Text(`主颜色${this.colorVal}`)
        .backgroundColor(this.colorVal)
        .fontSize('20fp')
    }
    .width('100%')
  }
}

在HarmonyOS Next中，获取图片主颜色可通过@ohos.multimedia.image模块实现。使用PixelMap读取图像像素数据，然后分析RGB值计算主色调。主要步骤包括：创建ImageSource实例解码图片，获取PixelMap对象，提取像素数组，应用颜色统计算法（如中位切分或K-means聚类）确定主要颜色值。注意处理需在UI线程外进行以避免阻塞。

在HarmonyOS Next中，获取图片主颜色并应用于背景，可以通过以下步骤实现：

  1. 使用PixelMap和Image组件处理图片： 通过Image组件加载图片，并利用PixelMap API获取图片的像素数据，进行颜色分析。

  2. 提取主色调算法： 遍历像素数据，采用颜色直方图或聚类算法（如K-means）提取主要颜色。以下是一个简化的示例代码：

    import image from '[@ohos](/user/ohos).multimedia.image';

async function getDominantColor(pixelMap: image.PixelMap): Promise<number> {
    const colorMap = new Map<number, number>();
    const buffer = await pixelMap.readPixelsToBuffer();
    const pixels = new Uint8Array(buffer.buffer);

    for (let i = 0; i < pixels.length; i += 4) {
        const r = pixels[i];
        const g = pixels[i + 1];
        const b = pixels[i + 2];
        const color = (r << 16) | (g << 8) | b;
        colorMap.set(color, (colorMap.get(color) || 0) + 1);
    }

    let dominantColor = 0;
    let maxCount = 0;
    colorMap.forEach((count, color) => {
        if (count > maxCount) {
            maxCount = count;
            dominantColor = color;
        }
    });

    return dominantColor;
}

  3. 应用主色调到背景： 将提取的颜色值转换为十六进制或RGB格式，设置为页面背景。例如：

    let dominantColor = await getDominantColor(pixelMap);
let backgroundColor = `#${dominantColor.toString(16).padStart(6, '0')}`;

  4. 性能优化： 对于大图片，建议先缩放再处理，或使用异步操作避免阻塞UI。

这样即可实现应用详情页背景与App主色调的动态一致。

回到顶部