如何在Jetpack Compose的Image组件中正确实现黑白Logo效果？

针对你的需求，这里提供两种可行的实现方案：

方案一：使用ColorMatrix实现阈值化黑白转换 #

通过自定义ColorMatrix，先将彩色Logo去饱和转为灰度，再通过高对比度阈值处理，把灰度直接映射为纯黑或纯白：

val blackWhiteColorMatrix = ColorMatrix().apply {
    // 1. 去除饱和度，转为灰度图
    setToSaturation(0f)
    // 2. 高对比度阈值处理，将灰度值映射为纯黑/纯白
    val contrast = 10f // 高对比度系数，放大灰度差异
    val threshold = 0.5f // 灰度阈值，高于则白，低于则黑
    setConcat(
        ColorMatrix(floatArrayOf(
            contrast, 0f, 0f, 0f, (1 - contrast) * threshold * 255,
            0f, contrast, 0f, 0f, (1 - contrast) * threshold * 255,
            0f, 0f, contrast, 0f, (1 - contrast) * threshold * 255,
            0f, 0f, 0f, 1f, 0f
        )),
        this
    )
}

Image(
    painter = painterResource(id = paymentCardLogoId),
    contentDescription = null,
    modifier = Modifier.size(logoSize),
    colorFilter = ColorFilter.colorMatrix(blackWhiteColorMatrix)
)

方案二：使用drawWithContent结合BlendMode手动绘制 #

通过自定义绘制逻辑，先画白色背景，再用BlendMode将Logo的非透明区域染为黑色：

Image(
    painter = painterResource(id = paymentCardLogoId),
    contentDescription = null,
    modifier = Modifier.size(logoSize).drawWithContent {
        // 第一步：绘制白色背景
        drawRect(Color.White)
        // 第二步：绘制Logo，用BlendMode.DstIn让黑色仅覆盖Logo非透明区域
        drawContent(
            colorFilter = ColorFilter.color(Color.Black, BlendMode.DstIn)
        )
    }
)

为什么之前的方法不生效？ #

• ColorFilter.color(Color.Black)：仅将所有非透明区域统一染为黑色，但没有白色背景，所以看起来是黑色矩形。
• setToSaturation(0f)：只是将彩色转为灰度图，保留了原Logo的明暗层次，所以呈现灰色效果，而非纯黑白。

内容的提问来源于stack exchange，提问作者oop