[Resolvido] Mudar cor da imagem

[Filipe_Moraes 15]

Olá pessoal.

No meu site eu tenho uma imagem inserida da seguinte forma:

 

<img src='marker.png' id='marker'/>

 

O problema é que eu preciso dessa imagem em diversas cores, imagina ter 50 cores, terei que fazer 50 imagens...

Gostaria de saber se é possível pintar a imagem usando o javascript.

Essa imagem é uma estrela e ao redor é transparente, porque o background da div onde vou inseri-la muda de cor.

 

É possível fazer isso?

Agradeço a ajuda.

[Dárcio Gomes 10]

qual é o site?.. passe o link ai pra gente dar uma olhada na ideia.

[Filipe_Moraes 15]

Olá, ainda não tenho site, esta localmente.

Mas vou colocar uma imagem de exemplo, veja:

 

 

A cor preta é o background da div onde a imagem está inserida.

Essa cor de fundo altera, mas não há problema porque a estrela é um png.

 

O problema é a estrela, ela pode alterar de cor, tenho mais de 50 cores possíveis, nesse caso teria que fazer 50 estrelas, uma para cada cor...

 

Então queria saber se tem outra maneira, seja pintando a imagem, seja usando mascara, etc...

Não encontrei a solução ainda.

 

Agradeço a ajuda.

[Dárcio Gomes 10]

então ... daria pra fazer o seguinte, fazer um imagem png com a estrela vazada alterando somente o fundo da div que a estrela está dentro daria a impressão de ser a estrela que está mudando de cor, o problema seria que a estrela ficaria com um quadro em volta... saco a idéia?.. :D

 

tirando isso acho que não tem uma forma de alterar a cor de uma imagem em javascript.

 

talvez possa encontrar algo em jQuery mas acho dificil.

[Filipe_Moraes 15]

Olá Dárcio Gomes.

Acho que você não entendeu, rsrs.

 

Na imagem que postei ai em cima, o quadrado representa a "div", a cor preta representa o background dessa div, que também altera de cor (através do jquery).

A estrela é a imagem "png" que tem a mesma dimensão da div, a transparência esta em volta da estrela.

Eu preciso alterar a cor da estrela e não em volta dela.

Não posso fazer o desenho da estrela transparente e em volta dela com cor, porque o background da div também altera de cor.

 

O que eu preciso é alterar o "amarelo" da imagem png para uma cor quelquer.

 

Agradeço a ajuda.

[Vadio 13]

foi oq ele falo.. faz a estrela com varios furinhos q você pode passa a impressão de mudança de cor ao mudar o fundo. caso contrário só se trabalhar com canvas do html5 ou as 50imagens

 

 

 

http://imasters.com.br/artigo/16455/desenvolvimento/html-5-na-pratica-canvas-parte-01

[Filipe_Moraes 15]

foi oq ele falo.. faz a estrela com varios furinhos q você pode passa a impressão de mudança de cor ao mudar o fundo. caso contrário só se trabalhar com canvas do html5 ou as 50imagens

 

http://imasters.com.br/artigo/16455/desenvolvimento/html-5-na-pratica-canvas-parte-01

 

Mas nesse caso a imagem iria ficar com a cor do background da div e isso eu não quero.

A div tem uma cor e a estrela tem outra, não estou a entender solução...

 

Agradeço a ajuda.

[JCMais 75]

Dá para efetuar a mudança apenas usando canvas.

 

Porém, a imagem que você está usando não possui cor fixa no amarelo, ela varia para tons de cinza nas bordas, portanto não fica perfeito na hora de "converter" para outra cor, se você usar uma imagem com a cor fixa este problema some.

 

Para manipular você precisa apenas efetuar um loop nos pixels do canvas, e caso a cor do pixel atual estiver na faixa de cores da estrela, você muda para a outra cor desejada.

 

Basicamente seria o seguinte:

HTML:

<canvas id="star"></canvas>
<select id="star-color">
   <option value='{"r":240,"g":250,"b":0,"a":255}' selected>Amarelo</option>
   <option value='{"r":240,"g":0,"b":0,"a":255}'>Vermelho</option>
   <option value='{"r":0,"g":240,"b":0,"a":255}'>Verde</option>
   <option value='{"r":0,"g":0,"b":240,"a":255}'>Azul</option>
</select>

 

JS:

(function(){

   var canvas  = document.getElementById( 'star' ),
       context = canvas.getContext( '2d' ),
       starImg = new Image(),
       colorSelect = document.getElementById( 'star-color' );

   canvas.width = 100;
   canvas.height= 100;

   starImg.addEventListener( 'load', drawStar, false );

   colorSelect.addEventListener( 'change', changeStarColor, false );

   function drawStar(){

       context.drawImage( starImg, 0, 0, canvas.width, canvas.height );

   }

   function changeStarColor(){

       var imageData = context.getImageData( 0, 0, canvas.width, canvas.height ),
           pixels    = imageData.data,
           newColor  = JSON.parse( this.value ),
           i, len;

       for( i = 0, len = pixels.length; i < len; i += 4 ) {

           //verifica se a faixa de cores do pixel atual está na faixa que queremos mudar, se sim, efetua a troca para os valores da cor escolhida
           if( pixels[i] >= 240 || pixels[i+1] >= 240 || pixels[i+2] >= 240 ) { //A cor não é preta

               pixels[i]  = newColor.r, //canal vermelho
               pixels[i+1]= newColor.g, //canal verde
               pixels[i+2]= newColor.b; //canal azul
               pixels[i+3]; //esse seria o canal alpha, não precisamos modificá-lo.

           }

       }

       //Coloca os pixels modificados de volta ao canvas.
       context.putImageData( imageData, 0, 0 );

   }

   //Usei a imagem codificada em Base64 para evitar erros, visto que ela se encontra hospedada em outro domínio.
   starImg.src = 'data:image/png;base64,iVBORw0KGgoA...';


}());

 

Online :seta:/> http://jsfiddle.net/JCMais/AUHaU/

[Filipe_Moraes 15]

Agradeço a todos que responderam ao tópico, pelo tempo e pela paciência.

 

JCMais, é isso mesmo que preciso.

Esse fonte só irá funcionar em browser compatível com HTML5, certo?

 

Obrigado pela sua ajuda.

 

 

Já está respondido pelo utilizador "Vadio"

...caso contrário só se trabalhar com canvas do html5...

[JCMais 75]

Isso mesmo, aqui os navegadores que suportam a funcionalidade do Canvas:

 

http://caniuse.com/#feat=canvas

 

Para os que não suportam você pode manipular a imagem no backend usando Ajax para fazer a comunicação.

[Vini_Aviva 13]

Colocando uma imagem com uma estrela de fundo transparente no centro resolveria seu problema com facilidade, seria algo como

 

 

e no estilo

 

background:#cor_aqui;

=D