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 uma das imagens de entrada venham de um domínio (servidor) diferentepelo 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;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 desabilitando algumasescolhendo as linhas certas para a finalidade desejada.
É 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()
.
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/img1img2.png";
});
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"); //
Se as imagens vierem dobotao.href mesmo= domínio!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";
JSFiddle de exemplo: atualizado para trabalhar com imagens próprias do JSFiddle, escapando assim da restrição de segurança.
Este método é robusto. Dá para fazer transformações bem complexas com as imagens, graças ao canvas, e ainda disponibilizar a imagemmontagem resultante para download, ao final (caso necessário)do processo.
O método do @Jader pode acabar sendo mais fácil. Ele utiliza CSS e bem menos script para produzir resultados idênticos, casoSe o objetivo sejaé uma montagem simples e para, destinada apenas à visualização "estática" na própria página, o método por CSS usa bem menos script (JS).