javascript - 如何检测图像是否具有透明背景和白色文本

Question

有没有人找到一种有效的方法来检测图像是否具有透明背景和图像内部的白色文本？ IE。当此图像在白色背景上显示时，将不会显示。

这里正确的做法是使用不同的图像，这可能是最终的解决方案，尽管首先我想看看这是否可以自动化。在我看来，理想的解决方案是为图像提供一个 CSS 背景，如果图像具有包含白色文本的透明背景，那么图像就会显示出来。

这里的挑战是，什么被归类为白色文本？单个像素为白色或图像的 30% 以上的非透明部分为白色或其他颜色？

有没有人找到可以做到这一点的东西？最好使用 Java 来处理图像并确定是否需要应用背景，以便可以设置某种标志，或者更好的是，我还没有遇到过的不错的 CSS 或 JavaScript 技巧。

Answer 1

1. HTML/CSS:无论图像的颜色/亮度如何，根本不需要任何编码即可使叠加文本可见的常见技巧是添加文本-阴影:

   text-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
   

   只需使用 0px 进行水平/垂直阴影偏移和轻微模糊，这样您实际上会在文本周围得到一个非常不透明的边框。

---

1. JS:如果您真的想逐个像素地检查并了解图像部分的亮度/颜色，您的文字将被覆盖.

   使用 HTML5 的 Canvas ，您可以在 Canvas 中绘制图像并逐个像素地检查并计算平均 RGB 值并根据此调整文本颜色。即使你做对了，这仍然是一个平均值，当文本颜色太接近时，文本可能仍会渗入图像中。

   我想通过一些谷歌搜索，您会找到用 JS 为您执行此操作的 Canvas 包装器库。

---

1. Java:与 JS 相同的方法 - 确定图像的哪个矩形将被文本覆盖并获取平均颜色。

   使用 BufferedImage，无论图像类型(jpeg、png、...)如何，您都可以获得内存中的每个像素供您检查。

---

我会选择速效文本阴影解决方案，这根本不需要编码。 如果您真的需要将图像保存为图像而不是仅在网页上显示给用户，我只会选择 2 或 3。