CSS 增亮 + 模糊滤镜的等效 ImageMagick 命令

Question

我在尝试理解 filter brightness / blur 的 CSS 规则以通过 ImageMagic 直接在原始图像上复制相同效果时遇到了很多麻烦。

The overall look'n'feel I'm trying to achieve : 每个头像都在背景图片上，实际上是同一个头像，但模糊和变暗。我正在尝试使用原始图像制作背景。

背景CSS

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

首先，我不确定如何使用 radiusxsigma 将此 blur(10px) 转换为 ImageMagick 的 blur 我尝试使用 blur: [0, 12] 之类的东西但没有似乎很成功

接下来我不知道 brightness(50%) 实际转换成什么。我已经尝试了各种东西，gamma、modulate 和最新的声音应该是最好的 img.brightness_contrast(-50)。

但我得到的最终图像（结合模糊）并没有相同的感觉：https://imgur.com/a/MtZtd

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

旁注：我在使背景图像与 IE11 和 Outlook 兼容时遇到了一些麻烦，因此我需要在后端生成相同的图像，这样我就可以只使用一个简单的背景图像，而无需任何 CSS/filter 需要客户端

Answer 1

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

原文：

查看 https://drafts.fxtf.org/filter-effects/#ShorthandEquivalents 处关于模糊和亮度的 CSS 滤镜文档，我发现它们的亮度（直线传递函数的斜率）类似于 Imagemagick +level 用于暗化 50%它们的模糊是高斯模糊，其值对应于标准偏差（或西格玛），因此类似于 Imagemagick 的 -blur（更快）或 -gaussian-blur（更慢）。

所以原则上，这应该与您的 CSS 代码相同

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

顺序不重要。所以这是一样的。

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

CSS 增亮 + 模糊滤镜的等效 ImageMagick 命令

ImageMagick command equivalent for a CSS brighten + blur filter

css

filtering

imagemagick

minimagick