SORU
29 Mart 2010, PAZARTESİ


javascript ile görüntünün ortalama renk olsun

Bu mümkün, ama bir resim için ortalama hex veya rgb değeri döndürecektir bir senaryo yazmaya Bakıyor. Ama JavaScript bunu yapmak isteyen OLARAK yapılabilir biliyorum.

CEVAP
29 Mart 2010, PAZARTESİ


AFAIK, bunu yapmak için tek yol 1**...

DEMO: http://jsfiddle.net/xLF38/

Unutmayın, bu sadece HTML5 tuval destekleyen tarayıcılarda aynı etki alanında ve resimleri ile çalışacak

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 */
        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;

}

IE için excanvas check out.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • engineerguy

    engineerguy

    10 Ocak 2010
  • lilstevie89

    lilstevie89

    25 Mart 2011
  • Megan Parken

    Megan Parken

    19 Temmuz 2009