ImageMagick命令等效于CSS亮化+模糊滤镜

Question

我试图理解qazxsw poi的CSS规则，直接通过ImageMagick在原始图像上复制相同的效果，我遇到了很多麻烦。

filter brightness / blur：每个头像都在背景图像上，实际上是同一个头像，但模糊和暗淡。我正在尝试使用原始图像制作背景。

背景的CSS

The overall look'n'feel I'm trying to achieve

首先，我不知道如何将这个

.professional-card .header .avatar-background {
    width: 110%;
    height: 110%;
    background-size: cover;
    -webkit-filter: blur(10px) brightness(50%);
    filter: blur(10px) brightness(50%);

转换为ImageMagick的blur(10px)与blur我尝试使用像radiusxsigma这样的东西，但似乎没有完全成功

接下来我无法弄清楚blur: [0, 12]实际上转换成了什么。我尝试了各种各样的东西，brightness(50%)，gamma和最新的声音应该是最好的modulate。

但是我得到的最终图像（与模糊相结合）并没有得到同样的感觉：img.brightness_contrast(-50)

我注意到的另一件事：过滤器的顺序在浏览器https://imgur.com/a/MtZtd == blur(10px) brightness(50%)上似乎并不重要，但是它在imagemagick上有效（brightness(50%) blur(10px)在变暗前进行模糊）。从数学上讲，模糊/变暗不是可交换的，这就是为什么我开始认为浏览器的过滤方式可能不是一个简单的操作......

旁注：我有一些麻烦使背景图像IE11和Outlook兼容，所以我需要生成相同的图像后端，所以我可以使用一个简单的背景图像，不需要任何CSS /过滤器客户端

Answer 1

我正在使用Imagemagick 6.9.9.30 Q16 Mac OSX Sierra。你没有说你正在使用什么版本的Imagemagick！

原版的：

https://imgur.com/a/BKZHH

看看的模糊和亮度的CSS过滤器文档，我看到它们的亮度（直线传递函数的斜率）类似于Imagemagick +变暗50％的水平，它们的模糊是高斯模糊，其值对应于标准差（或sigma），类似于Imagemagick的-blur（更快）或-gaussian-blur（更慢）。

因此，原则上，这应该与您的CSS代码相同

https://drafts.fxtf.org/filter-effects/#ShorthandEquivalents

convert cyril.jpg -blur 0x10 +level 0x50% cyril_blur_level.png

订单并不重要。所以这是一样的。

转换cyril.jpg +等级0x50％-blur 0x10 cyril_blur_level2.png