Question

我需要创建一个脚本，让用户可以将一些类似instagram的过滤器应用到他们的图像中。首先它应该在浏览器中完成。最简单的方法当然是css3过滤器。然后应该将图像上传到服务器，并且必须使用与浏览器中看到的完全相同的过滤器进行保存。

现在问题就开始了。我可以用Image Magick或Image GD库做一些棕褐色，饱和的烤面包机效果，但结果看起来与我们在浏览器中看到的图像不同。 Image Magick的“Sepia”与我们在使用css “filter：sepia（）;”时看到的“棕褐色”不同。更糟糕的是：用户可能会决定过滤器组合（棕褐色，饱和，加上烤面包机，加上对比度等）。我几乎不知道如何重新创建它。

我现在只有解决方案是在canvas元素上执行“浏览器内”效果而不使用css（因此，我可以在浏览器和服务器上轻松使用相同的算法）。但我觉得这很难看，我想留在css3。

有没有对css过滤器内部架构的良好描述？

Answer 1

我不认为CSS是最好的方法。虽然您可以使用像CamanJS（http://camanjs.com）这样的插件，它们使用HTML5 Canvas但提供了很多功能和选项来制作您自己的过滤器或使用现有的过滤器。

但是，如果您仍想使用CSS。您可以在此处查看此CSS过滤模块草稿，它将准确解释您正在寻找的内部架构。 http://www.w3.org/TR/filter-effects/#sepiaEquivalent

Answer 2

我曾在过滤css和过滤器中使用php。我使用GD和Imagemagick，我可以告诉Imagemagick更强大和兼容。

首先，这里是css中混合模式效果的列表，在css和php中使用Imagemagick是相同的：

\ Imagick :: COMPOSITE_DEFAULT：正常
\ Imagick :: COMPOSITE_MULTIPLY：乘以
\ Imagick :: COMPOSITE_SCREEN：屏幕
\ Imagick :: COMPOSITE_DARKEN：变暗
\ Imagick :: COMPOSITE_DIFFERENCE：差异
\ Imagick :: COMPOSITE_EXCLUSION：排除

其余的，他们在CSS和PHP中有不同的数学公式：

\ Imagick :: COMPOSITE_OVERLAY：叠加（非常不同）
\ Imagick :: COMPOSITE_LIGHTEN：点亮（我有点不同）
\ Imagick :: COMPOSITE_COLORBURN：颜色燃烧（我一点点）
\ Imagick :: COMPOSITE_HARDLIGHT：强光（非常不同）
\ Imagick :: COMPOSITE_SOFTLIGHT：柔光（一点点）
\ Imagick :: COMPOSITE_HUE：色调（完全不同！）
\ Imagick :: COMPOSITE_SATURATE：饱和度（完全）
\ Imagick :: COMPOSITE_COLORIZE：颜色（完全）
\ Imagick :: COMPOSITE_LUMINIZE：光度（完全）

好的，现在为css过滤效果：

如果您想要亮度，饱和或色调：$pic->modulateImage(100, 1, 200);
灰度：$pic->setImageType (\Imagick::IMGTYPE_GRAYSCALE);
棕褐色（非常不同）：$pic_ori->sepiatoneimage(80); - 反转：$pic->negateImage(false, \Imagick::CHANNEL_ALL);
对比：假设您的图片是$ pic：

 $quanta = $pic->getQuantumRange();
 $pic->sigmoidalContrastImage(true, value, $quanta["quantumRangeLong"] * value, \Imagick::CHANNELL_ALL);

不透明度非常难，我的处理方式如下：

$tmp_background = new Imagick();
$tmp_background->newImage($pic->getImageWidth(), $pic->getImageHeight(), $color_background_image);
$opacity = new \Imagick();
$opacity->newPseudoImage($pic->getImageWidth(), $pic->getImageHeight(),"gradient:gray(100%)-gray(100%)");
$tmp_background->compositeImage($opacity, \Imagick::COMPOSITE_COPYOPACITY, 0, 0);
$pic->compositeImage($tmp_background, \Imagick::COMPOSITE_ATOP, 0, 0);

最后，你有一个很好的翻转和翻牌：$pic->flopImage();$pic->flipImage();

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

2 个答案: