Estou com dificuldade em extrair valores RGB de uma imagem, só consigo se a URL da imagem estiver em base64, tentei usar algumas funções aqui da SO mas sem sucesso.
O exemplo abaixo esta funcionando perfeitamente, mas tem que converter a URL para base64 para o linear-gradient funcionar.
Como faço para aplicar o efeito em imagens jpg, png...
O resultado fica assim quando utilizado uma imagem em base64:
var rgb = getAverageRGB(document.getElementById('imgcolor'));
document.body.style.backgroundImage = 'linear-gradient(90deg, rgb('+rgb.r+','+rgb.g+','+rgb.b+')40%, rgb('+rgb.g+','+rgb.b+','+rgb.r+')100%)';
function getAverageRGB(imgEl) {
var blockSize = 5,
defaultRGB = {r:55,g:55,b:55},
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) {
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];
}
rgb.r = ~~(rgb.r/count);
rgb.g = ~~(rgb.g/count);
rgb.b = ~~(rgb.b/count);
return rgb;
}
body img {
display: block;
margin: 0 auto;
width: 250px;
height: 250px
}
<img id="imgcolor" src="https://image.tmdb.org/t/p/w185/lHu1wtNaczFPGFDTrjCSzeLPTKN.jpg"/>