Trabalhando com transparência
Quando criamos uma imagem é muito difícil que pretendemos usar essa imagem isolada, sempre teremos outras imagens ou outros elementos acompanhando ela. Por exemplo, essa imagem pode ser parte de uma apresentação ou até mesmo uma imagem de um site. E em alguns desses casos é preciso que os elementos da imagem sejam integrados com outros elementos. E uma coisa indispensável para essa integração é a transparência. Assim os elementos de um gráfico podem ser integrados com outros elementos de forma mais homogenia. Nesse tutorial vamos aprender a criar imagens com transparência.
Como criar uma imagem com transparência com a biblioteca matplotlib
Um ótimo jeito de observar a transparência de uma imagem é adicioná-la a uma pagina web. Porque a imagem transparente vai se misturar com o fundo da página web. Uma coisa importante é que todos os arquivos desse tutorial devem estar na mesma pasta. Porque nesse tutorial vamos criar uma imagem com transparência e criar uma pagina web que incluí essa imagem como um dos elementos que compõem a página.
Criando uma imagem PNG com o fundo transparente
Para criamos uma imagem com transparência vamos usar a o método savefig, como já usamos antes. Mas dessa vez vamos definir o parâmetro transparent como True.
from matplotlib import pyplot as plt
coordenadas = np.random.rand(100, 2)
plt.scatter(coordenadas[:,0], coordenadas[:,1])
plt.savefig('imagem-1.png', transparent = True, c = (0., .40, 1.))
Criando uma pagina web para adicionar a imagem
Agora vamos criar uma pagina web com um background e usar a imagem com transparência nessa pagina web. Copie e cole o codigo html abaixo em um editor de sua preferência e salve com a extensão html:
<!--Define a cor de fundo como sendo cinza. Experimente mudar para Red-->
<body style="background-color:LightGray;">
<img src="imagem-1.png" width="640" height="480"></img>
</body>
</html>
Abrindo o arquivo html, que acabamos de criar, no navegador você deve ter um resultado parecido com o exemplo mostrado abaixo. Note como a imagem com o fundo transparente se mescla com a pagina web.
Como funciona…
O método savefig, por padrão, não adiciona informações de transparência na imagem PNG. Mudamos esse comportamento passando o valor True para o parâmetro transparent.
0 comentários:
Postar um comentário