É 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).
<canvas>
ou em uma tag<img>
, e ainda fazer download do resultado. Atualizei minha resposta, qualquer coisa :D