Extraindo cores de imagens com Ionic + Color Thief

Postado por Fábio Rogério SJ em 21/12/2015

O design de interfaces é um ponto crucial para aplicações web e mobile! Neste pequeno post vou mostrar um simples código, usando uma lib em JS, para extrair as cores de uma determinada imagem.

Demonstração:

Para testar em seu device com Android baixe o .apk aqui.

Estou usando uma Lib chamada Color Thief escrita em JavaScript!

Para instalar esta lib basta fazer o donwload do color-thief.min.js e carregar no index.html:

1
2
3
4
5
6
7
8
9
10
...
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/color-thief.min.js"></script>
</head>
<body ng-app="starter">
...

Veja o trecho de código abaixo onde capturo as cores de uma determinada imagem:

1
2
3
4
5
6
7
8
9
10
11
$scope.getColors = function (){
var colorThief = new ColorThief();
var a = document.getElementById("imgDemo");
if(a.src){
var p = colorThief.getPalette(a, 5);
$scope.palette = p;
} else {
alert("Take a picture first!");
}
}

Você pode ver o código completo deste app neste repositório.

Dúvidas só deixar comentários! Espero que isso ajude alguem ;)