ios - 确定 UIImage 的主要颜色和次要颜色

Question

我想知道是否有人可以帮我弄清楚如何确定 UIImage 中的主要原色和次色。我在 Google 中找不到任何非常有用的东西。

Answer 1

基于上面的 Panic 博客，这是一个快速的方法(<10ms 取决于变量)。

获取 UIImage 输入和输出:

• 背景色
• 原色
• 辅助色

将 UIImage 传递给方法时，还要传递一个“边缘”。这是指图像的哪一部分暴露给 View 的其余部分(请参见下图了解详情):

• edge = 0 = top
• 边 = 1 = 左
• 边缘 = 2 = 底部
• 边 = 3 = 右

**

第一步。

** 设置维度。这是指图像的横向和向下应该有多少像素。

第 2 步。根据尺寸输入调整图像大小(例如 20 x 20 = 400 像素)。

第 3 步。 创建一个颜色数组，从第 2 步中创建的原始数据中提取 RGB 值。另外收集沿所选边缘运行的像素。

第 4 步。 计算边缘或背景颜色。根据 Panic 博客，这稍后用于对比强调色。

第 5 步。检查收集的颜色(RGB 值)并确定它们是否与边缘/背景颜色充分对比。如果他们不这样做，则所需的最低对比度会降低。此外，对于每个颜色对象，设置它与其他颜色的“距离”。这是对颜色与图像中其他颜色的相似程度的粗略估计。

第 6 步。 按距离对重音进行排序(距离最短意味着最相似)，最相似的颜色出现在顶部。将最常出现的颜色设置为主色。

第 7 步。检查剩余的颜色并确定与原色的对比最大的颜色。然后设置你的辅助颜色。

警告:我确信该方法可以改进，但这是一个快速的起点。例如，您可以确定图像右上角或左上角像素的颜色(通常放置后退图标等的位置)，并为那里的图标建议对比色。

代码如下:

-(NSDictionary *)coloursForImage:(UIImage *)image forEdge:(int)edge {

    NSLog(@"start");

    //1. set vars
    float dimension = 20;

    //2. resize image and grab raw data
    //this part pulls the raw data from the image
    CGImageRef imageRef = [image CGImage];
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    unsigned char *rawData = (unsigned char*) calloc(dimension * dimension * 4, sizeof(unsigned char));
    NSUInteger bytesPerPixel = 4;
    NSUInteger bytesPerRow = bytesPerPixel * dimension;
    NSUInteger bitsPerComponent = 8;
    CGContextRef context = CGBitmapContextCreate(rawData, dimension, dimension, bitsPerComponent, bytesPerRow, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
    CGColorSpaceRelease(colorSpace);
    CGContextDrawImage(context, CGRectMake(0, 0, dimension, dimension), imageRef);
    CGContextRelease(context);

    //3. create colour array
    NSMutableArray * colours = [NSMutableArray new];
    float x = 0, y = 0; //used to set coordinates
    float eR = 0, eB = 0, eG = 0; //used for mean edge colour
    for (int n = 0; n<(dimension*dimension); n++){

        Colour * c = [Colour new]; //create colour
        int i = (bytesPerRow * y) + x * bytesPerPixel; //pull index
        c.r = rawData[i]; //set red
        c.g = rawData[i + 1]; //set green
        c.b = rawData[i + 2]; //set blue
        [colours addObject:c]; //add colour

        //add to edge if true
        if ((edge == 0 && y == 0) || //top
            (edge == 1 && x == 0) || //left
            (edge == 2 && y == dimension-1) || //bottom
            (edge == 3 && x == dimension-1)){ //right
            eR+=c.r; eG+=c.g; eB+=c.b; //add the colours
        }

        //update pixel coordinate
        x = (x == dimension - 1) ? 0 : x+1;
        y = (x == 0) ? y+1 : y;

    }
    free(rawData);

    //4. calculate edge colour
    Colour * e = [Colour new];
    e.r = eR/dimension;
    e.g = eG/dimension;
    e.b = eB/dimension;

    //5. calculate the frequency of colour
    NSMutableArray * accents = [NSMutableArray new]; //holds valid accents

    float minContrast = 3.1; //play with this value
    while (accents.count < 3) { //minimum number of accents
        for (Colour * a in colours){

            //NSLog(@"contrast value is %f", [self contrastValueFor:a andB:e]);

            //5.1 ignore if it does not contrast with edge
            if ([self contrastValueFor:a andB:e] < minContrast){ continue;}

            //5.2 set distance (frequency)
            for (Colour * b in colours){
                a.d += [self colourDistance:a andB:b];
            }

            //5.3 add colour to accents
            [accents addObject:a];
        }

        minContrast-=0.1f;
    }

    //6. sort colours by the most common
    NSArray * sorted = [[NSArray arrayWithArray:accents] sortedArrayUsingDescriptors:@[[[NSSortDescriptor alloc] initWithKey:@"d" ascending:true]]];

    //6.1 set primary colour (most common)
    Colour * p = sorted[0];

    //7. get most contrasting colour
    float high = 0.0f; //the high
    int index = 0; //the index
    for (int n = 1; n < sorted.count; n++){

        Colour * c = sorted[n];
        float contrast = [self contrastValueFor:c andB:p];
        //float sat = [self saturationValueFor:c andB:p];

        if (contrast > high){
            high = contrast;
            index = n;
        }
    }
    //7.1 set secondary colour (most contrasting)
    Colour * s = sorted[index];

    NSLog(@"er %i eg %i eb %i", e.r, e.g, e.b);
    NSLog(@"pr %i pg %i pb %i", p.r, p.g, p.b);
    NSLog(@"sr %i sg %i sb %i", s.r, s.g, s.b);

    NSMutableDictionary * result = [NSMutableDictionary new];
    [result setValue:[UIColor colorWithRed:e.r/255.0f green:e.g/255.0f blue:e.b/255.0f alpha:1.0f] forKey:@"background"];
    [result setValue:[UIColor colorWithRed:p.r/255.0f green:p.g/255.0f blue:p.b/255.0f alpha:1.0f] forKey:@"primary"];
    [result setValue:[UIColor colorWithRed:s.r/255.0f green:s.g/255.0f blue:s.b/255.0f alpha:1.0f] forKey:@"secondary"];

    NSLog(@"end");
    return result;

}
-(float)contrastValueFor:(Colour *)a andB:(Colour *)b {
    float aL = 0.2126 * a.r + 0.7152 * a.g + 0.0722 * a.b;
    float bL = 0.2126 * b.r + 0.7152 * b.g + 0.0722 * b.b;
    return (aL>bL) ? (aL + 0.05) / (bL + 0.05) : (bL + 0.05) / (aL + 0.05);
}
-(float)saturationValueFor:(Colour *)a andB:(Colour *)b {
    float min = MIN(a.r, MIN(a.g, a.b)); //grab min
    float max = MAX(b.r, MAX(b.g, b.b)); //grab max
    return (max - min)/max;
}
-(int)colourDistance:(Colour *)a andB:(Colour *)b {
    return abs(a.r-b.r)+abs(a.g-b.g)+abs(a.b-b.b);
}

Color 对象是一个简单的自定义类:

@interface Colour : NSObject
@property int r, g, b, d;
@end