22

私は、ユーザーからの画像を出力し、画像情報を前述の画像の上に重ねる製品に取り組んでいます。ご想像のとおり、画像には明暗によって異なるテキストの色が必要です。JavaScriptでこれを達成する方法はありますか?

編集：私は私のものと同様の質問を見つけました.jsfiddle（http://jsfiddle.net/xLF38/818）に解決策がありました。私は自分のサイトにjQueryを使用しています。バニラ JavaScript を jQuery に変換するにはどうすればよいですか?

var rgb = getAverageRGB(document.getElementById('i'));
document.body.style.backgroundColor = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';

function getAverageRGB(imgEl) {

    var blockSize = 5, // only visit every 5 pixels
        defaultRGB = {
            r: 0,
            g: 0,
            b: 0
        }, // for non-supporting envs
        canvas = document.createElement('canvas'),
        context = canvas.getContext && canvas.getContext('2d'),
        data, width, height,
        i = -4,
        length,
        rgb = {
            r: 0,
            g: 0,
            b: 0
        },
        count = 0;

    if (!context) {
        return defaultRGB;
    }

    height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
    width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;

    context.drawImage(imgEl, 0, 0);

    try {
        data = context.getImageData(0, 0, width, height);
    } catch (e) {
        /* security error, img on diff domain */
        alert('x');
        return defaultRGB;
    }

    length = data.data.length;

    while ((i += blockSize * 4) < length) {
        ++count;
        rgb.r += data.data[i];
        rgb.g += data.data[i + 1];
        rgb.b += data.data[i + 2];
    }

    // ~~ used to floor values
    rgb.r = ~~ (rgb.r / count);
    rgb.g = ~~ (rgb.g / count);
    rgb.b = ~~ (rgb.b / count);

    return rgb;

}
4

3 に答える 3

11

やりたいことを正確に実行できるものをついに見つけました！Brian Gonzalez の jquery.adaptive-backgrounds.js に入ります。これをチェックしてください：

$parent.css({
        // backgroundColor: data.color
        color: data.color
});

backgroundColor ルールをコメントアウトして、色用に新しいルールを作成しました。白いテキストの場合、次のようなテキスト シャドウ:

text-shadow: 0 0 1px rgba($black, 0.3); // using Sass

十分なはずです。みなさん、回答ありがとうございます！

于 2013-12-15T15:14:46.520 に答える
-1

jQuery で background-image 属性を確認してから、テキストの色を動的に調整できます。

var x = $(body).attr("background-image");
switch(x)
{
  case "something.png":
      // set color here
      break;
}
于 2013-06-19T15:57:28.503 に答える