2

Tenho dois campos HTML. Em cada um deles, vai existir uma lista de times. Quando o usuário selecionar os dois times que jogarão (um contra o outro), gostaria de gerar uma imagem com os logos dos dois times em PNG.

Campo 1 X Campo 2 = Imagem PNG com Logo 1 + Logo 2

É possível fazer isso somente com JavaScript?

Editado: Realmente tem que ser com PHP, pois o usuário vai ter que baixar a imagem, obrigado pelas outras alternativas...

1
  • Com o canvas, é possível fazer a montagem usando apenas código de lado cliente, exibir o resultado em um <canvas> ou em uma tag <img>, e ainda fazer download do resultado. Atualizei minha resposta, qualquer coisa :D 2/10/2014 às 17:14

3 Respostas 3

4

É possível, sim, com a API do Canvas (HTML5).

Porém, por questões de segurança, não é possível exibir o resultado da colagem em uma tag <img>, tampouco fazer download, caso pelo menos uma das imagens de entrada venha de um domínio (servidor) diferente do da página.

Os passos mais importantes são os descritos a seguir. Disponibilizei um exemplo*; só preste bastante atenção aos detalhes de segurança; este código pode ser usado tanto para exibir o resultado no canvas quanto na <img>, apenas escolhendo as linhas certas para a finalidade desejada.


Criação do canvas

É indispensável, pois as imagens serão coladas uma na outra dentro do canvas. Por isto, nesta etapa, é importante setar também o tamanho do canvas (ver JSFiddle de exemplo*). Caso você não queira exibir o resultado no canvas, mas sim em uma <img>, basta retirar a linha do appendChild().

var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
output.appendChild(canvas); // opcional

Criação dos elementos para as imagens de entrada

Necessário para podermos requisitar os arquivos das imagens de entrada do servidor.

var img_in1 = document.createElement("img");
var img_in2 = document.createElement("img");

Listener da primeira imagem de entrada

Assim que a primeira imagem for carregada, adiciona seus pixels no canvas e requisita a segunda imagem. (Para sabermos onde colar a segunda imagem dentro do canvas, é necessário que já tenhamos a largura da primeira imagem.)

img_in1.addEventListener("load", function(){
    context.drawImage(img_in1
                     , 0, 0, img_in1.width, img_in1.height
                     , 0, 0, img_in1.width, img_in1.height
                     );
    img_in2.src = "/imagens/img2.png";
});

Listener da segunda imagem de entrada

Quando a segunda imagem for carregada, este código a posiciona ao lado da primeira imagem no canvas. Caso as duas imagens sejam do mesmo domínio da página, você tem a opção de exibir o resultado da colagem em uma <img> ao invés do canvas.

img_in2.addEventListener("load", function(){
    context.drawImage( img_in2
                     , 0, 0, img_in2.width, img_in2.height
                     , img_in1.width, 0, img_in2.width, img_in2.height
                     );
    // Se as imagens vierem do mesmo domínio da página:
    img_out.src = canvas.toDataURL("image/png");
    botao.href = canvas.toDataURL("image/png");
});

Requisição da primeira imagem de entrada

Desencadeia todo o processo; se a primeira imagem não for carregada, nenhum dos listeners será avisado e nada acontecerá.

img_in1.src = "/imagens/img1.png";

Espero ter ajudado!

JSFiddle de exemplo: atualizado para trabalhar com imagens próprias do JSFiddle, escapando assim da restrição de segurança.

Edit: tenho duas observações a fazer:

  • Este método é robusto. Dá para fazer transformações bem complexas com as imagens, graças ao canvas, e ainda disponibilizar a montagem resultante para download, ao final do processo.

  • O método do @Jader pode acabar sendo mais fácil. Se o objetivo é uma montagem simples, destinada apenas à visualização "estática" na própria página, o método por CSS usa bem menos script (JS).

2
  • 2
    A documentação do código tá profissional total. Quando finalmente instalarem o Stack Snippets aqui, lembra de trazer seus fiddles pra cá. ++1++
    – brasofilo
    1/10/2014 às 23:08
  • Obrigado, @brasofilo, e eu não sabia do Stack Snippets... Genial, SO tá cada dia melhor! :D Pode deixar que eu migro, sim! 2/10/2014 às 16:19
3

Não entendi muito bem a real necessidade de gerar uma imagem, minha sugestão é montar o quadro com CSS sobrepondo as imagens, algo assim:

HTML:

<div class="campo" style="background-image:url(ENDEREÇO DA IMAGEM DE FUNDO)">
    <div class="time1" style="background-image:url(ENDEREÇO DA IMAGEM DO TIME 1)"></div>
    <div class="time2" style="background-image:url(ENDEREÇO DA IMAGEM DO TIME 2)"></div>
</div>

CSS:

.campo {
    position: relative;
    width: 660px;
    height: 495px;
    background-size:cover;
}
.time1, .time2 {
    position: absolute;
    width: 128px;
    height: 128px;
    top: 230px;
}
.time1 {
    left: 150px;
}
.time2 {
    right: 150px;
}

Obs.: Optei por colocar o background-image no parâmetro style, pois assim é mais fácil de trabalhar com imagens dinâmicas, pois para colocar nas regras CSS exigiria no mínimo uma classe para cada time...

Veja funcionando no JSFiddle

2
  • 1
    Se eu pudesse dar dois upvotes eu daria. Um pela solução independente de JavaScript que anula a obstrusividade e outra pelas imagens dos "times" para jogar. :D 2/10/2014 às 14:11
  • Pensando bem, realmente a solução por CSS é muito boa, se a montagem for simples. Fica tranquilo de implementar e funciona em mais navegadores, em comparação com a técnica do canvas que eu sugeri. Boa ideia! A única justificativa para o canvas é a nova especificação do OP, que é o download do resultado, e também porque montagens mais complexas só podem ser feitas via script. Efeitos de rotação no CSS, por exemplo, da mesma maneira que o canvas, só são suportados em browsers mais recentes... De qualquer maneira, boa sugestão! :) 2/10/2014 às 17:18
3

Em geral, não é possível gerar arquivos com Javascript quando ele roda no navegador. Se isso fosse possível, teríamos uma falha de segurança.

Você pode gerar o arquivo no PHP e subir pro navegador. Nesse caso espero que alguém mais especialista em PHP deixe uma resposta sobre como fazer isso (terá meu upvote garantido).

Ou você pode carregar duas PNG's com o fundo transparente, cada uma com o brasão/escudo/logo de um time. Isso poupa processamento pois você pode ter as imagens todas já armazenadas no servidor. O único esforço é acertar o CSS.

Como variação dessa segunda alternativa você pode brincar com o Canvas do HTML 5, mas muitas pessoas acham que isso não é uma boa ideia pois assim sua aplicação não vai funcionar para uma quantidade de pessoas (mais ou menos a população da Antártica) que não podem ou não sabem como atualizar o Internet Explorer, que já suporta isso até em versões obsoletas.

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 .