Как создать приложение для определения палитры и доминирующих цветов изображения

Ключевым методом в приложениях для редактирования изображений является определение доминирующих цветов. Выявление этих доминирующих цветов имеет важное значение для создания палитры изображения, которая, в свою очередь, точно отражает воздействие выбранных инструментов и результаты редактирования. В этой статье мы углубимся в то, как определить палитру изображения в ограниченном цветовом пространстве, определить доминирующие цвета изображения и провести различие между палитрой и доминирующими цветами. Палитра Палитра изображения обычно представляет собой ссылку на все цвета, присутствующие в исходном изображении. По сути, он фиксирует весь диапазон цветовых оттенков на основе числовой шкалы значений сигнала цветового стимула. Если мы договоримся о моделировании сигнала с определенным уровнем точности, то диапазон этих значений сигнала будет представлять нашу доступную цветовую палитру. Каждое уникальное представление изображения и отображение цветов изображения на это пространство будут его подмножеством. При цифровой обработке сигналов (изображение также является сигналом) мы часто понимаем множество величин через их дискретное представление. Таким образом, нашу палитру изображения можно рассматривать как подмножество всех цветов изображения, представленных дискретной картой. Каждый цвет может быть проиндексирован и ему присвоено определенное значение в одном из цветовых пространств. Для наших целей мы будем использовать цветовую модель RGB. Серьезной проблемой при представлении палитры изображений таким образом является широта видимости человека. Вряд ли мы сможем вручную проанализировать всю палитру изображения, а хранить изображение, представленное всеми исходными цветами, часто не имеет смысла. Вместо этого мы сокращаем их количество до разумного предела. Этот процесс, известный как квантование цвета, включает в себя уменьшение количества цветов из полного подмножества, которое может быть представлено на изображении, до меньшего. Например, 14-битные необработанные цветовые данные могут быть представлены в 8-битном формате JPEG или в 16-битном формате TIFF, преобразованном в 8-битный PNG. Простое решение для определения основных цветов изображения — представить себе процесс квантования цветов до очень ограниченного набора, например 8 или даже 3 цветов. Это дает нам представление об основных цветах изображения, делая их более заметными и запоминающимися. В идеале цвета в конечном изображении должны быть гармоничными, следуя принципам, изложенным или . Йоханнесом Иттеном Матюшиным Определив доминирующие цвета изображения, мы можем создать инструмент, позволяющий визуализировать «гармонию» изображения. Это также может относиться к гармонии изображения после фильтрации или «синтетической гармонизации». Ниже мы предпримем попытку разработать такой инструмент. Средний разрез Широко используемый и качественный алгоритм сжатия палитры изображения — алгоритм Median Cut. Он включен в большинство основных алгоритмов сжатия изображений с потерями, таких как JPEG, хотя и с некоторыми модификациями. Фундаментальный принцип алгоритма Median Cut заключается в последовательном разделении кубической гистограммы изображения на медианы. Каждый результирующий субкуб содержит примерно равное количество ячеек или пикселей одного и того же цвета. Как только процесс деления достигает заранее определенного количества субкубов, мы вычисляем средний цвет каждого куба и сопоставляем его с соответствующими цветами исходного изображения. Этот процесс эффективно уменьшает количество цветов в исходном изображении, позволяя нам сжать изображение в файл меньшего размера. На первый взгляд может показаться, что начальная часть этого алгоритма может решить нашу проблему определения основных или доминирующих цветов изображения. Однако потенциальная проблема возникает, когда количество цветов, на которые мы делим изображение, слишком мало, и мы анализируем только небольшое количество цветов. В конечном итоге мы можем идентифицировать цвета, которых на самом деле не существует на изображении, потому что цвета чрезмерно усреднены. Мы могли бы выбрать цвет с максимальным интервалом из каждого куба и пометить его как доминирующий, но тогда он больше не будет представлять собой палитру. Поэтому мы оставим этот подход для определения палитры изображения, которую также можно использовать как инструмент визуального анализа изображения с точки зрения его «гармонической полезности». Для выявления доминирующих цветов воспользуемся статистическим анализом: поиском локальных максимумов на той же кубической гистограмме. сжатой версии Локальные максимумы Для выявления локальных максимумов мы реализуем специальный код. Автор, который также является опытным художником, прекрасно описывает алгоритм. По сути, мы сначала собираем статистику изображения в ту же трехмерную гистограмму RGB, которая используется в алгоритме Median Cut. Каждая ячейка кубической гистограммы будет содержать ячейки цвета и сумму всех значений каждого цвета, включенных в ячейку. Учитывая ограниченный размер гистограммы разрешением 32x32x32 (первоначально 30x30x30), накопление суммы упрощает расчет среднего цвета ячейки. Затем мы ищем локальный максимум, тщательно исследуя все пространство и сравнивая его с соседними ячейками. После этого мы итеративно уменьшаем количество локальных максимумов до необходимого количества, отбрасывая похожие цвета с меньшим весом. Для всех остальных локальных максимумов вычисляем средние цвета всех значений, включенных в список. Поскольку плотность цвета в локальных максимумах выше, а разница между значениями пикселей меньше, чем в кубах из Медианного разреза, цвета будут более похожи на те, что присутствуют на основном изображении, и будут точнее передавать его доминирующие цвета. Это раскрывает основное различие между двумя моделями: получение и поиск локальных максимумов или . Сопоставляя основное изображение «сжатой палитры», мы создадим новое , хотя и в значительно усеченной форме. «сжатой палитры» доминирующих цветов , которое сохранит тот же цветовой баланс, что и основное изображение С другой стороны, доминирующие цвета . Их невозможно превратить во что-то новое с помощью подходящего цветового баланса. описывают лишь композицию цветов, преимущественно присутствующих в изображении Выполнение На примере этой задачи мы продемонстрируем, насколько просто разработать готовое к использованию приложение для анализа и манипулирования изображениями с помощью . Начнем с функций, которых нет в других движках. IIMProcessing Framework Например, платформа способна читать файлы Adobe с уже существующими CLUT и извлекать трехмерную кубическую гистограмму из изображения в режиме реального времени. .cube Используя это, мы стремимся создать приложение, которое может: Загрузите файлы в формате JFIF (jpeg). «Нормализовать» исходное изображение. Контролируйте интенсивность «нормализатора». Включите в обработку произвольный LUT из файла Adobe .cube. Управляйте интенсивностью воздействия CLUT. Отобразите линейную гистограмму изображения. Демонстрация «сжатой палитры» и доминирующих цветов изображения, а также их числовое представление в виде тройки (r,g,b). Конечный продукт нашей конструкции будет напоминать вот эту интерактивную игрушку: Здесь видно, как простая «нормализация» изображения положительно влияет на разнообразие итоговой палитры, перераспределяя доминирующие цвета в более разнообразный и гармоничный набор. «Нормализатор» Соберем фильтр из двух уже имеющихся: — позволяет растягивать гистограмму изображения до заданных границ. IMPContrastFilter — выполняет автоматическую коррекцию баланса белого на основе поиска среднего цвета и коррекции паразитных тонов на изображении. По сути, это небольшая модификация идеи, позаимствованной из IMPAutoWBFilter . блога Андрея Журавлёва import IMProcessing /// Image filter public class IMPTestFilter:IMPFilter { /// We will use a contrast control filter through histogram stretching var contrastFilter:IMPContrastFilter! /// Auto white balance filter var awbFilter:IMPAutoWBFilter! /// Image Linear Histogram Analyzer var sourceAnalyzer:IMPHistogramAnalyzer! /// Solver of the histogram analyzer for calculating the lightness boundaries of the image let rangeSolver = IMPHistogramRangeSolver() public required init(context: IMPContext) { super.init(context: context) // Initialize filters in context contrastFilter = IMPContrastFilter(context: context) awbFilter = IMPAutoWBFilter(context: context) // Add filters to the stack addFilter(contrastFilter) addFilter(awbFilter) // Initialize the histogram analyzer sourceAnalyzer = IMPHistogramAnalyzer(context: self.context) // Add a light boundary search solver to the analyzer sourceAnalyzer.addSolver(rangeSolver) // Add an observing handler to the filter for // to pass the current image frame to the analyzer addSourceObserver { (source) - Void in self.sourceAnalyzer.source = source } // Add an observing handler for updating analysis calculations to the analyzer sourceAnalyzer.addUpdateObserver({ (histogram) - Void in // set the lightness boundaries in the contrast filter each time the image changes self.contrastFilter.adjustment.minimum = self.rangeSolver.minimum self.contrastFilter.adjustment.maximum = self.rangeSolver.maximum }) } } Решатель палитр IMProcessing Framework выделяется среди многих аналогичных платформ благодаря уникальной организации вычислений. Он использует специальную группу фильтров, которые по сути не являются фильтрами обработки. Объекты этих классов не модифицируют изображение в однородной и пространственной областях. Вместо этого они выполняют определенные вычисления и представления метрик для анализа в специальных расширителях для решения конкретных задач. Например, объект класса IMPHistogramAnalyzer может одновременно добавлять несколько решателей, которые вычисляют средний цвет изображения, дальность освещения, зональное деление и т. д. Мы используем решатель для расширения анализа IMPHistogramCubeAnalyzer для расчета палитры и списка доминирующих цветов. Результаты вычислений затем отображаются в обновленном NSTableView. import IMProcessing /// Types of distribution of image color accents /// /// - palette: palette for quantizing image colors. /// calculated using the median-cut transformation scheme: /// http://www.leptonica.com/papers/mediancut.pdf /// - dominants: calculation of dominant colors of an image by searching for local maxima /// color distribution density functions: /// https://github.com/pixelogik/ColorCube /// public enum IMPPaletteType{ case palette case dominants } /// Solver of the cubic color histogram analyzer IMPHistogramCubeAnalyzer public class IMPPaletteSolver: IMPHistogramCubeSolver { /// Maximum number of palette colors for analysis public var maxColors = Int(8) /// List of found colors public var colors = [IMPColor]() /// Palette type public var type = IMPPaletteType.dominants /// Solver handler handler /// - parameter analyzer: link to the analyzer /// - parameter histogram: cubic histogram of the image /// - parameter imageSize: image size public func analizerDidUpdate(analizer: IMPHistogramCubeAnalyzer, histogram: IMPHistogramCube, imageSize: CGSize) { var p = [float3]() if type == .palette{ p = histogram.cube.palette(count: maxColors) } else if type == .dominants { p = histogram.cube.dominantColors(count: maxColors) } colors.removeAll() for c in p { colors.append(IMPColor(color: float4(rgb: c, a: 1))) } } } Собираем все компоненты в контроллере представления Контроллеру понадобится основной фильтр приложения, который мы назовем , CLUT-фильтр с именем IMPLutFilter, готовый к использованию IMPHistogramView для отображения «обычной» гистограммы, IMPHistogramCubeAnalyzer — анализатор кубических гистограмм, к которому мы подключимся. наш решатель IMPPaletteSolver. IMPTestFilter Наконец, мы будем использовать IMPImageView в качестве главного окна для отображения изображения, а общий IMPContext — это ключевой класс, используемый всеми конструкторами платформы. class ViewController: NSViewController { // // Processing context // let context = IMPContext() // // Window for presenting the loaded image // var imageView:IMPImageView! var pannelScrollView = NSScrollView() // // Window for displaying the image histogram // var histogramView:IMPHistogramView! // // NSTableView - views of a list of colors from the palette // var paletteView:IMPPaletteListView! // // Main filter // var filter:IMPTestFilter! // // CLUT filter from Adobe Cube files // var lutFilter:IMPLutFilter? // // Analyzer of a cubic histogram of an image in RGB space // var histograCube:IMPHistogramCubeAnalyzer! // // Our solver for finding colors // var paletteSolver = IMPPaletteSolver() var paletteTypeChooser:NSSegmentedControl! override func viewDidLoad() { super.viewDidLoad() configurePannel() // // Initialize the objects we need // filter = IMPTestFilter(context: context) histograCube = IMPHistogramCubeAnalyzer(context: context) histograCube.addSolver(paletteSolver) imageView = IMPImageView(context: context, frame: view.bounds) imageView.filter = filter imageView.backgroundColor = IMPColor(color: IMPPrefs.colors.background) // // Add another handler to monitor the original image // (another one was added in the main filter IMPTestFilter) // filter.addSourceObserver { (source) -&amp;amp;amp;amp;amp;amp;amp;amp;gt; Void in // // to minimize calculations, the analyzer will compress the image to 1000px on the wide side // if let size = source.texture?.size { let scale = 1000/max(size.width,size.height) self.histograCube.downScaleFactor = scale.float } } // Add an observer to the filter to process the filtering results // filter.addDestinationObserver { (destination) -&amp;amp;amp;amp;amp;amp;amp;amp;gt; Void in // pass the image to the histogram indicator self.histogramView.source = destination // pass the result to the cubic histogram analyzer self.histograCube.source = destination } // // The results of updating the analyzer calculation are displayed in the color list window // histograCube.addUpdateObserver { (histogram) -&amp;amp;amp;amp;amp;amp;amp;amp;gt; Void in self.asyncChanges({ () -&amp;amp;amp;amp;amp;amp;amp;amp;gt; Void in self.paletteView.colorList = self.paletteSolver.colors }) } view.addSubview(imageView) .... IMPDocument.sharedInstance.addDocumentObserver { (file, type) -&amp;amp;amp;amp;amp;amp;amp;amp;gt; Void in if type == .Image { do{ // // Load the file and associate it with the filter source // self.imageView.source = try IMPImageProvider(context: self.imageView.context, file: file) self.asyncChanges({ () -&amp;amp;amp;amp;amp;amp;amp;amp;gt; Void in self.zoomFit() }) } catch let error as NSError { self.asyncChanges({ () -&amp;amp;amp;amp;amp;amp;amp;amp;gt; Void in let alert = NSAlert(error: error) alert.runModal() }) } } else if type == .LUT { do { // // Initialize the CLUT descriptor // var description = IMPImageProvider.LutDescription() // // Load CLUT // let lutProvider = try IMPImageProvider(context: self.context, cubeFile: file, description: &amp;amp;amp;amp;amp;amp;amp;amp;amp;description) if let lut = self.lutFilter{ // // If a CLUT filter has been added, update its LUT table from the file with the received descriptor // lut.update(lutProvider, description:description) } else{ // // Create a new LUT filter // self.lutFilter = IMPLutFilter(context: self.context, lut: lutProvider, description: description) } // // Add a LUT filter, if this filter has already been added nothing happens // self.filter.addFilter(self.lutFilter!) } catch let error as NSError { self.asyncChanges({ () -&amp;amp;amp;amp;amp;amp;amp;amp;gt; Void in let alert = NSAlert(error: error) alert.runModal() }) } } } .... Как видите, обработка фотографий становится проще и доступнее для обычных пользователей, что позволяет освоить этот процесс практически каждому. Весь проект можно скачать, собрать и протестировать из проекта : . Для корректной сборки локально должна быть установлена мега-библиотека для работы с файлами JPEG (JFIF) . репозитория ImageMetalling ImageMetalling-08 libjpeg-turbo На данный момент это лучшая реализация поддержки данного формата.