Jump to content

Archived

This topic is now archived and is closed to further replies.

Filipe_Moraes

[Resolvido] Mudar cor da imagem

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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

Mas vou colocar uma imagem de exemplo, veja:

 

stargf.jpg

 

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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

 

sP4uV.png

 

e no estilo

 

background:#cor_aqui;

=D

Share this post


Link to post
Share on other sites

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.