jquery - jQuery插件将颜色css转换为灰度？

Question

我一直在寻找一种方法来将我的整个 css 样式表从颜色值转换为它们各自的灰度值 - 但是我找不到一个好的方法（除了打开 Photoshop 并以艰难的方式进行）。

有没有一种方法可以做到这一点，有人知道是否有可以做到这一点的 jQuery 脚本吗？

注意：这不是关于将彩色图像转换为灰度图像的问题，而是关于将完整的样式表转换为灰度图像的问题。

Answer 1

这是一个 Javascript 函数，它将采用 RGB 值，并返回去饱和的 RGB 值。

function desaturate(r, g, b) {
    var intensity = 0.3 * r + 0.59 * g + 0.11 * b;
    var k = 1;
    r = Math.floor(intensity * k + r * (1 - k));
    g = Math.floor(intensity * k + g * (1 - k));
    b = Math.floor(intensity * k + b * (1 - k));
    return [r, g, b];
}

如果您想一次性使特定元素去饱和，您可以执行以下操作：

function rgb_to_string(r, g, b) {
    return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}

function desaturate_element(selector) {
    var fg = $(selector).css('color').match(/\d+/g);
    var bg = $(selector).css('background-color').match(/\d+/g);
    $(selector).css('color', desaturate(fg[0], fg[1], fg[2]));
    $(selector).css('background-color', desaturate(bg[0], bg[1], bg[2]));
}

在此 JSFiddle中查看此操作。那些去饱和乘数来自这个线程。

另一件事，k价值是你想要去饱和的程度。1 将完全去饱和，0 将完全不去饱和。