如何在SwiftUI中实现基于图片的背景环境色适配效果？

你说的这个技术叫主色调提取（Dominant Color Extraction），核心是从图片中提取代表性颜色作为背景，营造沉浸式视觉效果。下面分两种方案说明：

一、原生API实现（基于Core Image） #

iOS 13+提供了Core Image的CIAreaAverage滤镜，可以快速提取图片的平均颜色，这是最简便的原生方案，足够应对大多数场景：

import SwiftUI
import CoreImage
import CoreImage.CIFilterBuiltins

struct ImageAmbientBackgroundView: View {
    let image: UIImage
    @State private var dominantColor: Color = .clear
    
    var body: some View {
        ZStack {
            // 环境背景色
            dominantColor
                .edgesIgnoringSafeArea(.all)
            
            // 展示的图片
            Image(uiImage: image)
                .resizable()
                .scaledToFit()
                .padding()
        }
        .onAppear {
            extractDominantColor()
        }
    }
    
    private func extractDominantColor() {
        guard let ciImage = CIImage(image: image) else { return }
        
        // 使用CIAreaAverage滤镜提取平均颜色
        let filter = CIFilter.areaAverage()
        filter.inputImage = ciImage
        filter.extent = ciImage.extent
        
        guard let outputImage = filter.outputImage else { return }
        
        var bitmap = [UInt8](repeating: 0, count: 4)
        let context = CIContext(options: [.workingColorSpace: kCFNull!])
        context.render(outputImage,
                       toBitmap: &bitmap,
                       rowBytes: 4,
                       bounds: CGRect(x: 0, y: 0, width: 1, height: 1),
                       format: .RGBA8,
                       colorSpace: nil)
        
        dominantColor = Color(red: Double(bitmap[0])/255,
                              green: Double(bitmap[1])/255,
                              blue: Double(bitmap[2])/255,
                              opacity: Double(bitmap[3])/255)
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        ImageAmbientBackgroundView(image: UIImage(named: "your-image")!)
    }
}

二、自行编程实现（更精准的主色调提取） #

如果想要和Spotify效果更接近（比如提取画面中最突出的颜色而非单纯平均），原生没有直接API，需要自己实现颜色采样逻辑：

• 步骤1：将图片转换为像素数组
• 步骤2：统计像素颜色的出现频率，筛选出占比最高的几种颜色
• 步骤3：选择最适合作为背景的颜色（比如避免过暗/过亮的颜色）

简化版的颜色频率统计示例：

private func extractDominantColorManual() {
    guard let cgImage = image.cgImage else { return }
    let width = cgImage.width
    let height = cgImage.height
    let bytesPerPixel = 4
    let bytesPerRow = bytesPerPixel * width
    let pixelCount = width * height
    
    var pixelData = [UInt8](repeating: 0, count: bytesPerRow * height)
    
    let context = CGContext(data: &pixelData,
                            width: width,
                            height: height,
                            bitsPerComponent: 8,
                            bytesPerRow: bytesPerRow,
                            space: CGColorSpaceCreateDeviceRGB(),
                            bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue)
    
    context?.draw(cgImage, in: CGRect(x: 0, y: 0, width: width, height: height))
    
    // 统计颜色频率（简化版：每10个像素采样一次，提升性能）
    var colorCounts: [String: Int] = [:]
    for i in stride(from: 0, to: pixelCount, by: 10) {
        let offset = i * bytesPerPixel
        let red = pixelData[offset]
        let green = pixelData[offset+1]
        let blue = pixelData[offset+2]
        
        // 将颜色转为字符串作为键
        let colorKey = "\(red),\(green),\(blue)"
        colorCounts[colorKey, default: 0] += 1
    }
    
    // 找到出现次数最多的颜色
    guard let mostCommonColorKey = colorCounts.max(by: { $0.value < $1.value })?.key else { return }
    let components = mostCommonColorKey.split(separator: ",").map { Double($0)! / 255 }
    dominantColor = Color(red: components[0], green: components[1], blue: components[2])
}

注意事项 #

• 对于大图片，手动采样时记得间隔采样（比如上面的stride(from:0, to:pixelCount, by:10)），避免性能问题
• 可以额外处理颜色的亮度，确保背景色不会影响图片内容的可读性

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