读书APP开发：如何修改图片式书页的文字与背景颜色？

Hey there! Let's break down how to solve both of your color modification needs for your book app's page images. Since you're working with white backgrounds and black text, we can leverage Core Image filters to target these specific color ranges precisely—no more accidentally altering the wrong parts of the image.

1. Change Black Text to Green (or Any Custom Color) #

The trick here is to first isolate the black text as a mask, then apply your desired color only to that masked area. Here's a step-by-step approach with Swift code:

Step-by-Step Filter Chain #

• First, create a text mask: Use CIColorThreshold to convert the image into a high-contrast mask where black text becomes pure white, and the white background becomes pure black. This helps eliminate any gray artifacts that might interfere.
• Create a solid color layer: Generate a CI image filled with your target text color (e.g., green).
• Composite the color onto the text: Use CISourceInCompositing to apply the solid color only to the areas defined by the text mask.

Example Swift Code #

import CoreImage

func changeTextColor(to targetColor: UIColor, in image: UIImage) -> UIImage? {
    guard let ciImage = CIImage(image: image),
          let colorFilter = CIFilter(name: "CIColorThreshold"),
          let colorGenerator = CIFilter(name: "CIConstantColorGenerator"),
          let compositeFilter = CIFilter(name: "CISourceInCompositing") else {
        return nil
    }
    
    // Step 1: Create text mask (black text → white, white background → black)
    colorFilter.setValue(ciImage, forKey: kCIInputImageKey)
    colorFilter.setValue(0.5, forKey: kCIInputThresholdKey) // Adjust if needed for gray artifacts
    guard let textMask = colorFilter.outputImage else { return nil }
    
    // Step 2: Generate solid green color layer
    let ciColor = CIColor(color: targetColor)
    colorGenerator.setValue(ciColor, forKey: kCIInputColorKey)
    guard let colorLayer = colorGenerator.outputImage else { return nil }
    
    // Step 3: Composite color onto text
    compositeFilter.setValue(colorLayer, forKey: kCIInputImageKey)
    compositeFilter.setValue(textMask, forKey: kCIInputBackgroundImageKey)
    guard let outputCI = compositeFilter.outputImage else { return nil }
    
    // Convert back to UIImage
    let context = CIContext(options: [.useSoftwareRenderer: false])
    guard let cgImage = context.createCGImage(outputCI, from: outputCI.extent) else { return nil }
    return UIImage(cgImage: cgImage)
}

// Usage:
let greenTextImage = changeTextColor(to: .green, in: originalPageImage)

2. Change White Background to a Custom Color #

Similar to the text modification, we'll isolate the background as a mask, then apply the new background color without affecting the black text.

Step-by-Step Filter Chain #

• Create a background mask: Use CIColorThreshold to generate a mask, then invert it so the white background becomes white and black text becomes black.
• Generate the new background color layer: Create a solid CI image with your target background color.
• Composite the background color: Use CISourceAtopCompositing to overlay the new background color only in the areas defined by the background mask, keeping the text intact.

Example Swift Code #

func changeBackgroundColor(to targetColor: UIColor, in image: UIImage) -> UIImage? {
    guard let ciImage = CIImage(image: image),
          let colorFilter = CIFilter(name: "CIColorThreshold"),
          let invertFilter = CIFilter(name: "CIColorInvert"),
          let colorGenerator = CIFilter(name: "CIConstantColorGenerator"),
          let compositeFilter = CIFilter(name: "CISourceAtopCompositing") else {
        return nil
    }
    
    // Step 1: Create background mask (white background → white, black text → black)
    colorFilter.setValue(ciImage, forKey: kCIInputImageKey)
    colorFilter.setValue(0.5, forKey: kCIInputThresholdKey)
    guard let thresholded = colorFilter.outputImage else { return nil }
    
    invertFilter.setValue(thresholded, forKey: kCIInputImageKey)
    guard let backgroundMask = invertFilter.outputImage else { return nil }
    
    // Step 2: Generate solid background color layer
    let ciColor = CIColor(color: targetColor)
    colorGenerator.setValue(ciColor, forKey: kCIInputColorKey)
    guard let colorLayer = colorGenerator.outputImage else { return nil }
    
    // Step 3: Composite background color, preserve text
    compositeFilter.setValue(ciImage, forKey: kCIInputImageKey)
    compositeFilter.setValue(colorLayer, forKey: kCIInputBackgroundImageKey)
    compositeFilter.setValue(backgroundMask, forKey: kCIInputMaskImageKey)
    guard let outputCI = compositeFilter.outputImage else { return nil }
    
    // Convert back to UIImage
    let context = CIContext(options: [.useSoftwareRenderer: false])
    guard let cgImage = context.createCGImage(outputCI, from: outputCI.extent) else { return nil }
    return UIImage(cgImage: cgImage)
}

// Usage:
let blueBackgroundImage = changeBackgroundColor(to: .systemBlue, in: originalPageImage)

Combining Both Changes #

If you want to modify both text and background colors in one go, simply chain the two functions:

let modifiedPageImage = changeTextColor(to: .green, in: changeBackgroundColor(to: .lightGray, in: originalPageImage)!)

Pro Tip #

If your book pages have subtle gray shadows or artifacts, adjust the inputThreshold value (from 0.0 to 1.0) in the CIColorThreshold filter. A value slightly above 0.5 can help ignore faint gray areas and keep your mask clean.

内容的提问来源于stack exchange，提问作者Hafiz Shoaib Awan