2

Por exemplo, temos esse bote:

<div>
    <img src="https://cdn2.vectorstock.com/i/thumb-large/94/56/lifeboat-vector-3669456.jpg" >
</div>

No caso, quero a cor branca (#FFFFFF) transparente, mas poderia ser qualquer outra.

Como fazer isso, se é que é possível..?

1
  • 1
    Provavelmente vai ter que usar um canvas e correr pixel a pixel para "copiar" a imagem original menos os pixels transparentes. Seria melhor editar a pergunta com mais imagens de exemplo, pois o trecho do "mas poderia ser qualquer outra" parece que foi totalmente ignorado em todas as respostas. Ponha uma com fundo de outra cor, assim vai ajudar a identificar quais respostas realmente funcionam.
    – Largato
    Commented 26/06/2018 às 11:42

3 Respostas 3

2

var img = new Image()
img.onload = function(event){ getData(event) }
img.src = 'lifeboat-vector-3669456.jpg'

function getData(ev){
canvas = document.createElement('CANVAS')
canvas.width = ev.target.naturalWidth
canvas.height = ev.target.naturalHeight

context = canvas.getContext('2d')
try{ context.imageSmoothingEnabled = false } catch(e){ context.msImageSmoothingEnabled = false }
context.drawImage(img, 0, 0, canvas.width, canvas.height)
imgData = context.getImageData(0, 0, canvas.width, canvas.height)

for( i = 0; i < imgData.data.length; i += 4 ){
imgData.data[i]   = 1.2*imgData.data[i] + 0*imgData.data[i+1] + 0*imgData.data[i+2] + 0*imgData.data[i+3] + -0.2
imgData.data[i+1] = 0*imgData.data[i] + 1.2*imgData.data[i+1] + 0*imgData.data[i+2] + 0*imgData.data[i+3] + -0.2
imgData.data[i+2] = 0*imgData.data[i] + 0*imgData.data[i+1] + 1.2*imgData.data[i+2] + 0*imgData.data[i+3] + -0.2
}

// cor branca #FFFFFF (R=255, G=255, B=255) => transparente (Alfa=0)
for( i = 0; i < imgData.data.length; i += 4 ) if( imgData.data[i] == 255 && imgData.data[i+1] == 255 && imgData.data[i+2] == 255 ) imgData.data[i+3] = 0

context.putImageData(imgData, 0, 0)

image.src = canvas.toDataURL()
}
<div style="background-color: aquamarine;">
<img id="image" src="" />
</div>

inserir a descrição da imagem aqui

1
  • 5
    Saudações João, poderia explicar o que fez na resposta?
    – Woss
    Commented 16/07/2019 às 11:04
-2

Há uma propriedade CSS que permite "esconder" a cor de fundo de uma imagem, mas essa imagem tem de estar definida como background.

O background da div que tem a imagem tem de ser a mesma cor de fundo da página, a cor pela qual queres substituir o branco. Fica o exemplo no JSBin.

background-image: url(lifeboat-vector-3669456.jpg);
background-color: grey; /* aqui será a cor de fundo da página */
background-blend-mode: multiply;

Mas não é suportado em todos os browsers, e pode não funcionar correctamente com todas as cores.

Sugeria que usasses uma solução do lado do servidor, usando PHP ou qualquer outra linguagem que estejas a usar.

-5

Altera a opacidade da imagem assim vai ficando mais transparente podes usar 0.01 até glhf

<div>
    <img style="opacity: 0.1;" src="https://cdn2.vectorstock.com/i/thumb-large/94/56/lifeboat-vector-3669456.jpg" >
</div>

Tenta Assim

1
  • 2
    Explique melhor o porque do seu código. Assim o usuário entende onde errou e não só "faz funcionar"
    – rbz
    Commented 26/06/2018 às 10:16

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 .