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

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

---

这可以用javascript实现吗？

我认为javascript不适合这样做，至少在客户端是这样

ImageMagick有一些工具用于识别图像的颜色以及与该颜色匹配的像素数。如果你的图像是纯黑/白（两种颜色），你可以简单地看到哪一个计数是更多的，否则你将不得不有某种算法来计算出你的截止点是什么（你想考虑的黑色是多么的黑），并用那种方式计数。p>

---

IM方法是

，如果您确实希望使用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);
}

函数为黑色（cId，iId）{
var blackThreshold=127；
var c=document.getElementById（cId）；
var i=document.getElementById（iId）；
c、 宽度=i.宽度；
c、 高度=i.高度；
var cxt=c.getContext（'2d'）；
cxt.clearRect（0,0，c.宽度-1，c.高度-1）；
var img=新图像（）；
img.src=i.src；
cxtdrawimage（img，0,0）；
var imgd=cxt.getImageData（0,0，c.width-1，c.height-1）；
var pix=imgd.data；
var合计=0；
对于（变量i=0；n=pix.length，i

请注意，这是快速和肮脏的，可能需要大量的清理，但我测试了它，它做你要求的。以下是我在测试时使用的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>

正文
正文

额外问题：是否应该使用Javascript完成？如果你选择颜色服务器端，你有更多的灵活性（如手动覆盖颜色或使用不同的启发式，如果你想），如果有更好的方法，我愿意接受其他解决方案@ElleBillias不断地在服务器上（甚至在使用js的客户机上）重新计算它似乎是一种浪费——有没有理由认为这应该是动态的？是否每个图像都会设置一个标志来标识最佳颜色？这甚至可以为小集手动完成，但至少每个图像只能执行一次。我给出了一个可能的解决方案，但@DavidBrainer Banker是正确的，如果需要，您可能只需执行一次（在图像上载或类似情况下）然后应该保存元数据，这样您就不必再次这样做并耗尽资源。@ElleBillias为了更新页面上所有内容的配色方案，我建议您使用JavaScript动态地在

body

或

html

元素上设置一个类（如果您在服务器端进行计算，则使用PHP）David，谢谢你的详细回复，我在上面添加了一些关于“超大”背景滑块的额外信息，文本在所有图像中都是静态的，不在同一个div中，所以我不确定你的解决方案是否适合我。无论如何，我感谢您的贡献：）@ElleBillias虽然我的示例在一个div中使用单个图像，但您可以将其应用于多个div、较大的图像等，我仍然坚持我最初的意见，即最好是对每张图像计算一次并保存计算结果，而不是使用JavaScript。@ElleBillias这里是该方法的一个实时演示：当背景改变时，静态文本需要改变颜色以适应彩色背景图像，但如果你有图像的元数据，你仍然可以使用我描述的方法。如果您是通过ajax加载图像，那么您将返回一个图像URL以及亮/暗元数据，并基于此设置字体颜色。我仍然不会尝试在客户端解决这个问题，因为即使这是可能的，也只是因为它需要资源。图像将保持亮或暗，那么为什么要对其进行多次处理呢？