Как сделать так чтобы цвета градиента css брались с загруженной картинки?

Question

[Stacy None]

Видел на некоторых сайтах типа dribbble
Такую цветовую палитру
Она определяется автоматически. А мне нужно чтобы цвет фона моего div блока зависел от находящейся в нём картинки.
Такое возможно? Если да то Как ?
Заранее спасибо!

Answer 1

[Sanovskiy]

function getPixel(url, x, y) {
  var img = new Image();
  img.src = url;
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  context.drawImage(img, 0, 0);
  return context.getImageData(x, y, 1, 1).data;
}

Например

Comments

[Stacy None]

Как это использовать?)

[Stacy None]

Владимир @, Я это понимаю) А как это использовать для определенного div ?)

[Sanovskiy]

Stacy None, я думаю стоит в первую очередь подтянуть знание алгоритмов.
Общее решение - если картинка определенного формата - читайте пиксели из определенных координат и выставляйте цвета для DIVов. Если это любая картинка, вам понадобится алгоритм вычисления частотности цветов на картинке.
Две минуты гугления:

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;
}

Вот тут есть пример использования

За готовым решением обращайтесь к фрилансерам

Answer 2

[moskwin68]

Color Thief