0

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:

resultado

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"/>

1 Resposta 1

1

Testei algumas coisas aqui na máquina e debugando descobri que o erro existente é este

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

para resolver, basta habilitar o CORS como anonimo dentro da tag img, ficando assim:

<img id="imgcolor" crossorigin="Anonymous" src="https://image.tmdb.org/t/p/w185/lHu1wtNaczFPGFDTrjCSzeLPTKN.jpg"/>
1
  • 1
    Nossa, uma coisa tão simples, obrigado.
    – Vitor Hugo
    Commented 19/11/2018 às 22:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .