PHP图像处理。 棕褐色，饱和，烤面包机过滤器与CSS完全相同

Question

I need to create a script, which lets user to apply some instagram-like filters to their images. First it should done in browser. Easiest way to do it are of course css3 filters. Then image should be uploaded to server, and it must be saved with exactly same filters as seen in browser.

And now the problem begins. I can do some sepia, saturated ot toaster-like effects with Image Magick, or with Image GD libraries, but results will look different from images we see in browser. "Sepia" by Image Magick is not like "sepia" we see when using css "filter: sepia();". And even worse: user may decide for a filter combination (sepia, saturated, plus toaster, plus contrast, etc.). I have almost no idea how to recreate it.

Only solution I have now, is to do "in-browser" effects without css, on canvas element (so, I can easily use the same algorithms in browser and on server). But I find this ugly, I would like to stay with css3.

Is there anywhere a good description of css filters inner architecture?

Answer 1

I don't think CSS would be the best way to go about it. While you can make use of plugins like CamanJS (http://camanjs.com) which make use of HTML5 Canvas but provide a whole lot of functionality and options to make your own filters or use existing ones.

However, if you still want to work with CSS. You can take a look at this CSS Filter Module Draft here which will explain exactly the inner architecture you're looking for. http://www.w3.org/TR/filter-effects/#sepiaEquivalent