如何获取WebView界面特定点位的颜色编码？

需求目的 #

将padding的颜色修改为与应用内特定点位的颜色一致，以此实现状态栏变色。

具体需求 #

当滚动到界面中蓝色区域的特定位置时，获取该位置的蓝色颜色编码。

现状说明 #

已做大量调研但未找到可行方法，目标界面为WebView，希望实现该功能以同步修改WebView界面及widget的颜色。
（界面截图：显示带有蓝色顶部区域的WebView页面，滚动到该区域时需提取对应颜色）

方法1：WebView与JS交互获取颜色（推荐） #

如果蓝色区域对应页面内的DOM元素，直接通过注入JS监听滚动并获取颜色是最高效的方式：

1. 向WebView注入以下JS代码，监听滚动事件并判断目标位置：

window.addEventListener('scroll', function() {
    // 替换为蓝色区域对应的DOM选择器，比如类名、ID
    const targetArea = document.querySelector('.blue-header');
    if (!targetArea) return;
    
    const rect = targetArea.getBoundingClientRect();
    // 这里判断条件可根据需求调整，比如元素顶部进入状态栏区域时触发
    if (rect.top <= 0 && rect.bottom >= 0) {
        // 获取元素实际背景色
        const rawColor = window.getComputedStyle(targetArea).backgroundColor;
        // 传递给原生端（Android/iOS对应不同的桥接方法）
        window.nativeBridge.getColor(rawColor);
    }
});

2. 原生端接收颜色值后，将RGB格式（如rgb(0,122,255)）转换为十六进制格式，再同步修改状态栏和padding的颜色。

方法2：原生端截取WebView像素获取颜色 #

如果蓝色区域无法通过DOM定位（比如是Canvas或图片的一部分），可以在滚动到目标位置时截取WebView截图，提取指定坐标的像素颜色：

Android示例

// 先开启WebView的绘图缓存
webView.setDrawingCacheEnabled(true);
webView.buildDrawingCache();
Bitmap webViewBitmap = webView.getDrawingCache();

if (webViewBitmap != null) {
    // 替换为目标点位的屏幕坐标（x,y）
    int targetX = 100;
    int targetY = 50;
    int pixel = webViewBitmap.getPixel(targetX, targetY);
    
    // 转换为十六进制颜色
    String hexColor = String.format("#%02X%02X%02X", 
        Color.red(pixel), Color.green(pixel), Color.blue(pixel));
    
    // 使用该颜色修改状态栏和padding
    // ...
    
    // 记得释放缓存
    webView.destroyDrawingCache();
}

iOS示例

// 截取WebView当前界面
UIGraphicsBeginImageContextWithOptions(webView.bounds.size, false, UIScreen.main.scale)
webView.layer.render(in: UIGraphicsGetCurrentContext()!)
let screenshot = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

guard let image = screenshot, 
      let pixelData = image.cgImage?.dataProvider?.data,
      let data = CFDataGetBytePtr(pixelData) else { return }

// 目标点位坐标（x,y）
let targetX = 100
let targetY = 50
let pixelIndex = (targetY * image.cgImage!.width + targetX) * 4

// 提取RGB值并转为十六进制
let red = lroundf(Float(data[pixelIndex]) / 255.0 * 255)
let green = lroundf(Float(data[pixelIndex+1]) / 255.0 * 255)
let blue = lroundf(Float(data[pixelIndex+2]) / 255.0 * 255)
let hexColor = String(format: "#%02lX%02lX%02lX", red, green, blue)

// 修改状态栏和padding颜色
// ...

注意事项 #

• JS方法性能更优，优先使用，前提是能通过DOM选择器定位蓝色区域；
• 原生截图方法需要准确计算目标点位的坐标，且频繁截图会有一定性能消耗；
• 颜色转换时注意处理不同格式的兼容性，避免出现颜色偏差。

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