Question

现在我正在写一个小的chrome扩展名。扩展程序抓取当天的Bing图像并将其设置为正文背景图像，然后扩展程序还会抓住天气，时间，日期等。问题是有时候当天的图像是明亮的另一边是黑暗的。因此，无论文本是什么颜色，其中一些都难以辨认。如何根据SPECIFIC文本背后的背景图像颜色确定每个文本应该是什么颜色？提前谢谢。

Answer 1

您可以使用jQuery的attr（）函数。例如，如果你的img标签的id属性为＆＃39; my_image＆＃39;：

<img id="my_image" src="first.jpg"/>

的Jquery $（＆＃34;＃my_image＆＃34）ATTR（＆＃34; SRC＆＃34;＆＃34; second.jpg＆＃34）;

Answer 2

我得到了一些工作......它有点临时并且不是万无一失的，但是我发现了一个计算整体亮度的脚本，然后允许脚本决定是否应该显示黑色或白色文本。似乎工作得很好，截至目前。这是：

function getImageBrightness(imageSrc) {
    var img = document.createElement("img");
    img.src = imageSrc;
    img.style.display = "none";
    document.body.appendChild(img);
    var colorSum = 0;
    img.onload = function () {
        // create canvas
        var canvas = document.createElement("canvas");
        canvas.width = this.width;
        canvas.height = this.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);
        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var data = imageData.data;
        var r, g, b, avg;

        for (var x = 0, len = data.length; x < len; x += 4) {
            r = data[x];
            g = data[x + 1];
            b = data[x + 2];

            avg = Math.floor((r + g + b) / 3);
            colorSum += avg;
        }

        brightness = Math.floor(colorSum / (this.width * this.height));
        console.log(brightness);
        if (brightness < 150) {
            $(".contrast").css("color", "white");
        } else {
            $(".contrast").css("color", "black");
        }
    }
}

信用到：https://jsfiddle.net/s7Wx2/

根据背景图像

2 个答案: