3

Estou usando o p5.js - uma biblioteca javascript - para capturar imagens de uma API de notícias. Gostaria que essas imagens fossem sobrepostas, mas com opacidade, de forma que as imagens se mesclem.

Não estou conseguindo aplicar a opacidade direto pelo código javascript. Consigo alterar a posição das imagens ( fotos.position(x ,y); ), mas não encontro o caminho para aplicar a opacidade.

function setup() {
createCanvas(900,600);
loadJSON("https://newsapi.org....ec6490",gotData); 
}

function gotData(data) {
console.log(data);

var img = data.articles;
var imgs = [];

for (var i = 0; i < img.length; i++) {
imgs.push(img[i].urlToImage);

var fotos = createImg(img[i].urlToImage);

fotos.position(0, 0);
}
}

Uma solução que encontrei lendo alguns posts aqui no stackflow, foi alterar manualmente a opacidade das imagens, uma por uma, através do inspetor HTML do browser, mas isso serve apenas para poucas imagens.

.

Mas isso fica impossível no caso de 2 mil imagens, por exemplo. Preciso automatizar esse processo.

Portanto, como faço para aplicar opacidade numa imagem - elemento DOM direto pelo código javascript?

4
  • Já tentou pelo CSS? img{ opacity: .3; }.. isso irá aplicar a opacidade em todas as imagens dentro do body.
    – Sam
    22/06/2018 às 15:00
  • Ainda não sou familiarizado com CSS, comecei a estudar javascript há pouco. Vou dar uma olhada essa semana e retorno aqui, mas pelo que diz, parece ser uma boa solução! Obrigado, dvd! 23/06/2018 às 4:26
  • Mas você quer sobrepor 2000 imagens no canvas com transparência? Não sei se o browser daria conta de tudo isso não.
    – bfavaretto
    23/06/2018 às 14:03
  • realmente, 200 fotos sobre postas acho que dá um resultado ilegível. tô puxando de 20 em 20, e mesmo assim só as de cima aparecem. de toda forma, de 20 em 20 chega rápido em duzentas, vai além. valeu, abs! 23/06/2018 às 15:51

1 Resposta 1

1

Pelo visto na sua imagem da pergunta, todas as imagens que você adiciona estão dentro do body, então basta adicionar no seu CSS a opacidade que você deseja que irá ser aplicada a todas as tags <img>, sem a necessidade de recorrer ao JavaScript:

<style>
body > img{
   opacity: .3;
}
</style>
1
  • valeuzaço. ótima solução. ficou como esperava. agora é ir desenvolvendo. vou dar uma olhada no CSS, já ví q vai ser de grande ajuda. abs! 23/06/2018 às 15:49

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 .