Question

Working on https://github.com/luisespinoza/LEColorPicker project, I am trying to generate an histogram UIImage from an arbitrary input UIImage using the project GPUImage (https://github.com/BradLarson/GPUImage).

The current code that I’m using is the following:

- (NSDictionary*)dictionaryWithColorsPickedFromImage:(UIImage *)image
{
    GPUImageFilter *filter = [[GPUImageHistogramFilter alloc] initWithHistogramType:kGPUImageHistogramRGB];

    UIImage *filteredImage = [filter imageByFilteringImage:image];

    [UIImagePNGRepresentation(filteredImage) writeToFile:@"/Users/Luis/histogram.png" atomically:YES];

    return nil;
}

The problem is that histogram.png is resulting in just a black line for every input image.

So, how will be the correct code to generate an histogram UIImage using iOS GPUImage?

Answer 1

You can look at the FilterShowcase example to see how this is supposed to work in practice.

The GPUImageHistogramFilter takes in an image and outputs a 256×3 image that encodes the histogram (it’s 3 pixels tall because a 1 pixel height isn’t allowed in framebuffer construction). The R, G, and B values are stored in their respective color channels within a central 1-pixel-tall stripe at the center of that image.

To visualize this, you’ll need to use a GPUImageHistogramGenerator, and feed the GPUImageHistogramFilter’s output into that. The GPUImageHistogramGenerator creates a visual representation of the histogram input as an image. You do need to use -forceProcessingAtSize: to set the size for the GPUImageHistogramGenerator’s output image, because it doesn’t have a set size by default.

One other caution is that you’ll need to have a dummy filter of some kind between your input image and the GPUImageHistogramFilter. GPUImageHistogramFilter currently relies on glReadPixels() and that only works for rendered content, not directly uploaded images or video frames.

The code used in the FilterShowcase for this is as follows:

        filter = [[GPUImageHistogramFilter alloc] initWithHistogramType:kGPUImageHistogramRGB];

        GPUImageGammaFilter *gammaFilter = [[GPUImageGammaFilter alloc] init];
        [videoCamera addTarget:gammaFilter];
        [gammaFilter addTarget:filter];

        GPUImageHistogramGenerator *histogramGraph = [[GPUImageHistogramGenerator alloc] init];

        [histogramGraph forceProcessingAtSize:CGSizeMake(256.0, 330.0)];
        [filter addTarget:histogramGraph];

        GPUImageAlphaBlendFilter *blendFilter = [[GPUImageAlphaBlendFilter alloc] init];
        blendFilter.mix = 0.75;            
        [blendFilter forceProcessingAtSize:CGSizeMake(256.0, 330.0)];

        [videoCamera addTarget:blendFilter];
        [histogramGraph addTarget:blendFilter];

        [blendFilter addTarget:filterView];

This overlays the generated histogram visualization on top of the incoming camera video.