javascript根据图像是更白还是更黑来改变字体颜色

Question

基本上我有一个带有旋转背景图像的网站，需要确定其顶部的文本应该是白色还是黑色以获得最佳对比度和可读性。

这可以使用 JavaScript 来完成吗？

Answer 1

如果您确实想使用 JavaScript 来完成此操作，并且不介意它只能在支持画布的浏览器上使用，那么下面的函数应该可以解决这个问题：

function isBlack(cId, iId) {
    var blackThreshold = 127;

    var c = document.getElementById(cId);
    var i = document.getElementById(iId);

    c.width = i.width;
    c.height = i.height;

    var cxt = c.getContext('2d');
    cxt.clearRect(0,0, c.width-1, c.height-1);

    var img = new Image();
    img.src = i.src;
    cxt.drawImage(img,0,0);

    var imgd = cxt.getImageData(0, 0, c.width-1, c.height-1);
    var pix = imgd.data;

    var total = 0;
    for (var i = 0; n = pix.length, i < n; i += 4) {
      total += pix[i]+pix[i+1]+pix[i+2];
    }

    blackThreshold = (pix.length * .75) * blackThreshold;
    return (total < blackThreshold);
}

请注意，这又快又脏，可能需要大量清理，但我测试了它，它确实满足了您的要求。作为参考，这里是我在测试时使用的 HTML：

<canvas id="dummyCanvas" style="display: none;"></canvas>
<div>
    <img id="white" src="Hood_canal_2.jpg" />
    <h1 id="whiteText" style="margin-top: -200px; margin-bottom: 200px;">Text</h1>
</div>

<div>
    <img id="black" src="bw47.jpg" />
    <h1 id="blackText" style="margin-top: -200px; margin-bottom: 200px;">Text</h1>
</div>