开发者

How does Instagram or Hipstamatic do photo filters?

开发者 https://www.devze.com 2023-01-31 13:36 出处:网络
How are these iphone apps making t开发者_如何学运维hese filters work with photos? I have been curious about this for a while. Is there a library that does this?This is a really cool explanation on wha

How are these iphone apps making t开发者_如何学运维hese filters work with photos? I have been curious about this for a while. Is there a library that does this?


This is a really cool explanation on what it takes to do a filter: http://taptaptap.com/blog/creating-a-camera-plus-fx/

As explained on the Camera+ blog.


There are several image libraries that work on iOS now, and many C/C++ libraries can be adapted (though it might quite a lot of work, depending on the code).

Three that I can think of now are:

simple-iphone-image-processing

ImageMagick

MGImageUtilities

None have filters exactly like those apps, but some may be combined to do some similar things. MGImageUtilities has a tint method that will do sepiatone-like coloring.

Hope that puts you on the right track.


Edited to add

Oh, and here's an Apple example of using OpenGL to process images:

GLImageProcessing


Well, You could do a little hack. Create a color gradient -

How does Instagram or Hipstamatic do photo filters?

like this. and then add any Instagram filter upon it. Now that you have the image, you can just subtract the values from the grayscale values you already have. Plotting the rgb values on a curve adjuster would give you exactly the adjustments made. One of them are like this:

$r=[48,57,65,72,79,86,91,96,104,109,115,122,132,143,154];
$g=[10,20,34,52,73,94,117,139,157,172,192,204,214,223,229];
$b=[41,34,87,115,139,163,185,204,219,230,238,244,247,250,252];

Sometimes effects are also achieved by multiplying a given existing image upon the original image. Look at the Additional Tips: http://docs.rainmeter.net/tips/colormatrix-guide Now if you want to create effects on images. The concept goes like this. Take every pixel of an image, and then make some numerical manipulations on the pixels and then put them in a blank canvas in the same order of the original image.

So lets say you have an image

+++++++++++++
|100| 80| 70|
| 50| 30| 60|
+++++++++++++

For the sake of simplicity lets assume that each numbers represent a RGB value where R = G = B, so for image[0][0] R=G=B=100

Now lets say you want to make a Grayscale image from the above. So for grayscale the formula is x = 0.299r + 0.587g + 0.114b (generally you can tweak the value) .. So you apply the math, get the value of x and substitute them. (For grayscale image R and G and B have same values).

So in the end you new image becomes:

+++++++++++++
| x0| x1| x2|
| x3| x4| x5|
+++++++++++++

Similarly for sepia, there is some formula to calculate the values of r, g, b

Sometimes you want to add a gaussian blur or maybe overlay images. These are all pixel manipulation. See the formula's for blend modes here

I have worked on something similar year or two ago. Java image applet and in [javascript as well] (https://github.com/argentum47/JustBnW)


I've open-sourced a library attempting to replicate these filters. See this stack overflow thread here:

Instagram Image Filters on iPhone

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号