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

时间:2017-02-07 19:23:27

标签: javascript java html css image-processing

有没有人找到一种有效的方法来检测图像是否在图像中有白色文字的透明背景?即当此图像显示在白色背景上时,将不会显示。

这里要做的正确的事情是使用不同的图像,这可能是最终的解决方案,尽管在第一种情况下,我想知道这是否可以自动化。在我看来,理想的解决方案是为图像提供一个CSS背景,例如“浅蓝色”'如果图像具有包含白色文本的透明背景,则图像将显示。

这里的挑战是什么被归类为白色文本?单个像素的白色或超过30%的图像的非透明部分为白色还是其他什么?

有没有人发现这可能的事情?最好使用Java来处理图像并确定是否需要应用背景,这样就可以设置某种标志,甚至更好,这是一个很好的CSS或JavaScript技巧,我还没有遇到过。

1 个答案:

答案 0 :(得分:0)

  1. HTML / CSS :这是一个常见的技巧,根本不需要任何编码来使叠加文字可见,无论图像的颜色/亮度是多少都要添加文字阴影:

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

    只需使用0px进行水平/垂直阴影偏移和温和模糊,这样就可以在文本周围找到一个非常不透明的边框。

    1. JS:如果你真的想要逐像素检查并了解图像部分中存在的亮度/颜色,那么你的文字将是重叠。

      使用HTML5的画布,您可以在画布中绘制图像并逐个像素地检查并计算平均RGB值并使文本颜色适应于此。即使你做对了,这仍然是一个平均值,当文字的颜色太近时,文字可能仍会渗入图像。

      我想通过一些谷歌搜索,你会找到在JS中为你做这件事的画布包装库。

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

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

      2. 我选择快速获取的文本阴影解决方案,这根本不需要编码。 我只会选择2或3,如果您确实需要将图片保存为图片而不是仅在网页上向用户显示