Есть картинка, хочу определить на ней преобладающий цвет. Или как это сделано у яндекс.дзена
Как видите, там где текст там под него накладывается цвет, который закрывает изображение, чтобы текст был четко виден, цвет(фон) под текстом всегда разный, я заметил что это зависит от изображения.
Как подобное сделать средствами css или jquery ?
Я пользовался для точно такой же задачи функцией из вот этого примера
http://jsfiddle.net/xLF38/818/
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;
}
//ВЫЗОВ
var rgb = getAverageRGB(document.getElementById('img'));
document.body.style.backgroundColor = 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
Есть нюанс, работает только для картинок, которые подтягиваются из того же домена. В коде есть комментарий security error, img on diff domain
. Если кто-нибудь знает, как это вылечить — поправьте мой ответ.
На практике надо еще под базовый цвет подбирать цвет текста, хотябы в разрезе темный на светлом и светлый на темном.
Виртуальный выделенный сервер (VDS) становится отличным выбором
Возникла проблема при обновлении страницы с помощью AjaxПо идее oldImage и newImage Это один и тот же элемент
Как можно сделать перехват запросов посредством JS в "Chrome" ? Например, чтобы на любой запрос на какой-то или на все сайты мне возвращалась строка...
При формировании таблицы в mpdf необходимо развернуть текст в шапке и в заданных местах перенестиВот пример кода: