算法的挑战:从图像生成配色方案算法、图像、方案

2023-09-10 22:59:06 作者:仙女界扛把子

背景

所以,我工作的web应用程序一个新的迭代。而且,我们发现我们的用户沉迷于懒惰。真懒。事实上,更多的工作,我们为他们做,他们越喜欢的服务。现有的应用程序的一部分,需要在用户选择的配色方案使用。但是,我们有一个形象(用户的网站的截图),那么为什么我们不能只吃饱喝足他们的懒惰和为他们做?答:我们可以,而且这将是一个有趣的编程练习! :)

挑战

给定的图像,你如何创建一个相应的配色方案?换句话说,你如何在图像(其中X是由Web应用程序中定义)选择一次X颜色。在我们的特定情况下使用的图像是用户的网站,在全分辨率拍摄(如1280×1024)的屏幕截图。 (注意:的请简单介绍一下你的算法 - 有没有需要发布的实际伪code)

奖励积分(街头信誉分,而不是实际的SO点):

在描述一种算法,简单而有效。 code是我们如何创造 - 保持它的简单和美好 允许用户根据多种情绪,如五颜六色','鲜艳','静音','深'等(一拉的Kuler ) 描述了一种可靠地确定主文本在网站截图使用(可能会需要它自己的,独立的,算法中)的颜色。

灵感

有执行类似的功能,一些现有的网站。随时检查出来,并问自己,我怎么会重复呢?我怎么能提高呢?

http://www.pictaculous.com/ http://www.cssdrive.com/imagepalette/index.php http://kuler.adobe.com/#create/fromanimage 解决方案

要找到一次X颜色,screencap应用程序。运行在图像上的颜色直方图。顶的X颜色在直方图的主题。编辑:如果渐变时,你要挑颜色鲜明的峰;也就是说,你可能对周围橙色一大堆的颜色,如果是橙色,在渐变中使用的主要颜色之一。实际上,只是执行一定量的颜色从直方图选择之间的距离。

调整颜色方案可以在HSV空间最好的完成;将您的颜色到HSV空间,如果用户希望它是海阔天空,增加值,如果他们需要更加多彩,增加饱和度,等等。

确定文本颜色最能表征由高可变性(傅立叶空间高频)的区域进行。在这些领域,你应该有两种:两种颜色,文字和背景,在这种情况下,您的文字是很少使用的颜色;或者你有几种颜色,文字和背景图像色彩,在这种情况下,文本颜色是最常见的颜色。

Background

IJCAI 2017最佳学生论文得主王超岳 基于生成对抗网络的图像编辑方法 分享总结

So, I'm working on a fresh iteration of a web app. And, we've found that our users are obsessed with being lazy. Really lazy. In fact, the more work we do for them, the more they love the service. A portion of the existing app requires the user to select a color scheme to use. However, we have an image (a screenshot of the user's website), so why can't we just satiate their laziness and do it for them? Answer: We can, and it will be a fun programming exercise! :)

The Challenge

Given an image, how do you create a corresponding color scheme? In other words, how do you select the primary X colors in an image (where X is defined by the web app). The image used in our particular situation is a screenshot of the user's website, taken at full resolution (e.g. 1280x1024). (Note: Please simply describe your algorithm - there's no need to post actual pseudocode.)

Bonus points (street cred points, not actual SO points) for:

Describing an algorithm that is simple yet effective. Code is how we create - keep it simple and beautiful. Allowing the user to tweak the color scheme according to various 'moods' such as 'Colorful', 'Bright', 'Muted', 'Deep', etc. (a la Kuler) Describing a method for reliably determining the main text color used in the website screenshot (will likely require its own, separate, algo).

Inspiration

There are several existing sites that perform a similar function. Feel free to check them out and ask yourself, "How would I duplicate this? How could I improve it?"

http://www.pictaculous.com/ http://www.cssdrive.com/imagepalette/index.php http://kuler.adobe.com/#create/fromanimage

解决方案

To find the primary X colors, screencap the app. Run a color histogram on the image. The top X colors in the histogram are the theme. Edit: if gradients are used, you'll want to pick distinct "peaks" of colors; that is, you may have a whole bunch of colors right around "orange" if orange is one of the main colors used in the gradients. Effectively, just enforce a certain amount of distance between your colors chosen from the histogram.

Tweaking the color scheme can best be done in HSV space; convert your colors to HSV space, and if the users want it to be "Brighter", increase the Value, if they want it to be more "Colorful", increase the Saturation, etc.

Determining the text color can best be done by characterizing areas of high variability (high frequency in Fourier space). Within those areas, you should have either: two colors, text and background, in which case your text is the lesser-used color; or you'll have several colors, text and background image colors, in which case the text color is the most common color.