JavaScript для изменения цвета шрифта в зависимости от того, является ли изображение более белым или более черным - PullRequest
Новая
       1

JavaScript для изменения цвета шрифта в зависимости от того, является ли изображение более белым или более черным

3 голосов
/ 27 января 2012

В основном у меня есть веб-сайт с вращающимся фоновым изображением, и мне нужно определить, должен ли текст поверх него быть белым или черным для лучшей контрастности и читабельности.

Можно ли это сделать с помощью JavaScript?

Ответы [ 2 ]

4 голосов
/ 27 января 2012

Если вы хотите сделать это с помощью JavaScript и не возражаете, что он будет работать только с браузерами, поддерживающими canvas, вот функция, которая должна решить эту проблему: 

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>
3 голосов
/ 27 января 2012

Я не думаю, что javascript будет хорошо для этого подходить, по крайней мере, на стороне клиента.

ImageMagick имеет несколько инструментов для определения цветов изображения и количества пикселей, соответствующих этому цвету. Если ваши изображения чисто черно-белые (двухцветные), вы можете просто увидеть, какой счет больше, в противном случае вам понадобится какой-то алгоритм, чтобы выяснить, где находится ваша обрезка (насколько темно серого вы хотите рассмотреть » черный ") и считать их таким образом.

Метод IM: getImageHistogram ()

...