在Appcelerator中对照片应用过滤器 [英] Apply filters to photos in Appcelerator
问题描述
我在Appcelerator中构建一个iOS应用程序,我需要让用户拍照,然后对它们应用一个过滤器(如Instagram)。我怎样才能做到这一点?是否有可能使用任何基于JavaScript的图像过滤器库?
感谢您的所有输入!
绝对有可能, http://www.pixastic.com/lib / docs / ,你可以在这里看到一些过滤器。所有这些影响都是通过循环遍历图像数据和逐个处理像素来实现的。这里的难点在于制作(或发现)看起来不错的算法,就像instagram一样。
在instagram中也有一些口罩,像polariod或老电影,像这样: http://www.aviary.com/tutorial .aspx?tutorial = cross_processing& step = 12 。这些都是使用剪贴蒙版应用: https://developer.mozilla.org/samples/ canvas-tutorial / 6_2_canvas_clipping.html 或合并两个图像数据,如下所示: http://www.benbarnett.net/2011/06/02/using-html5-canvas-for-image-masks/ 。
因此,instagram对图像所做的一切,您可以使用canvas。这将是一个电话密集的CPU,但我认为iPhone可以处理它。
一些例子:
I am building an iOS app in Appcelerator and I need to let the user take pictures and then apply a filter to them (like Instagram). How can I achieve this? Is it perhaps possible to use any javascript based image filter library?
Thankful for all input!
It is definitely possible, http://www.pixastic.com/lib/docs/ you can see some filters here as an example. All of these affects are achieved by looping over the image data and manipulating the pixels one by one. Hard part here would be making(or finding) the algorithms that would look good, like instagram has.
There are also masks in instagram, which are images like a polariod or old films, like here: http://www.aviary.com/tutorial.aspx?tutorial=cross_processing&step=12 . These are applied using clipping masks : https://developer.mozilla.org/samples/canvas-tutorial/6_2_canvas_clipping.html or merging two images data, like here: http://www.benbarnett.net/2011/06/02/using-html5-canvas-for-image-masks/ .
So all of what instagram does with images, you can do with canvas. It would be cpu intensive on a phone, but i think iPhone can handle it.
Some examples:
这篇关于在Appcelerator中对照片应用过滤器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!