如何设置纯色图像以匹配文本颜色？

在一个网站上，用户可以提交包含图像的文本文章，还可以更改网站的各种格式方面（如文本颜色），我希望允许他们提交与查看者选择的任何文本颜色相匹配的图像。例如，如果有人想在他们的帖子中包含一个复杂的数学公式，他们目前不得不使用非常奇怪的符号或提交图像。如果读者选择了某些背景颜色，读者可能无法很好地看到该图像。如何设置纯色图像以匹配文本颜色？

随着我希望实现的系统，有人可以提交一个带有不同alpha通道的纯色图像。它将被CSS样式化为currentColor。

混合模式不起作用，因为它们还与图像背后的元素混合。我不希望用画布上的JavaScript来绘制复杂的东西，因为我必须在每次用户更改格式时更新它。我也不能仅仅使用JavaScript来内联一个SVG，因为这会让这个站点面对XSS攻击，而且用户可能不想去构建一个SVG文件，每个颜色都设置为currentColor。

有没有办法做到这一点？它是什么？

来源

2015-03-08 Pitzik4

我尝试过使用kahjav的纯CSS回答，但色调旋转过滤器以神秘的方式工作，我发现很难弄清楚反转，亮度和色调 - 旋转我需要什么组合模拟给定的CSS颜色。所以，我想出了一个实际使用currentColor的方法，正如我所希望的那样。

我说它不会让用户指定一个SVG文件，然后用JavaScript内联它，但我可以使用带JavaScript的内联SVG。如果我在用户的图像上放置一个反转过滤器，然后将其用作填充设置为currentColor的矩形的掩膜，则结果正是我想要的。我必须使用JavaScript来生成内联SVG，因为必须根据包含的图像的宽度和高度确定几个元素的宽度和高度。但是，我不需要每次用户选择不同的主题时都使用JavaScript来更新它。

Here's a JSFiddle to demonstrate.它生成表单的联SVG：

<svg width="[width]" height="[height]" id="[id]" class="[class]" style="[style]"> 
    <defs> 
    <filter id="invert" style="color-interpolation-filters:sRGB"> 
     <feColorMatrix values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /> 
    </filter> 
    <mask id="img" maskUnits="userSpaceOnUse"> 
     <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="[image source]" width="[width]" height="[height]" filter="url(#invert)" /> 
    </mask> 
    </defs> 
    <rect mask="url(#img)" width="[width]" height="[height]" fill="currentColor" /> 
</svg>

来源

2015-03-08 23:00:36 Pitzik4

您可以添加CSS过滤器并使用色相旋转功能：

div { 
    filter: hue-rotate(/*insert deg to desired color*/); 
}

Here是在过滤器上一大篇。您需要根据自己想要的位置更改每张图片。旋转符合color wheel。

来源

2015-03-08 19:40:20 kahjav

CSS滤镜可以工作，但我不得不在HSB重新指定而不是使用currentColor豪华的文本颜色。尽管如此，它比使用帆布更方便！ – Pitzik4 2015-03-08 19:48:52

如何设置纯色图像以匹配文本颜色？

回答

相关问题