Skip to main content
Edição de acordo com os novos detalhes da pergunta, e inserção de considerações importantes.
Fonte Link
Rui Pimentel
  • 2,9mil
  • 12
  • 21

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).

Porém, por questões de segurança, não é possível exibir o resultado da colagem em uma tag <img> caso uma das imagens de entrada venham 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 desabilitando algumas linhas.

É 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/img1.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
                     );
    img_out.src = canvas.toDataURL(); // Se as imagens vierem do mesmo domínio!
});

JSFiddle de exemplo

  • Este método é robusto. Dá para fazer transformações bem complexas com as imagens, graças ao canvas, e ainda disponibilizar a imagem para download, ao final (caso necessário).

  • O método do @Jader pode acabar sendo mais fácil. Ele utiliza CSS e bem menos script para produzir resultados idênticos, caso o objetivo seja uma montagem simples e para visualização "estática" na página.

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.

 

É 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/img2.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"); 
    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";
 

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 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).

adicionou 444 caracteres ao conteúdo
Fonte Link
Rui Pimentel
  • 2,9mil
  • 12
  • 21

É 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][1]JSFiddle de exemplo). Caso você não queira exibir o resultado no canvas, mas sim em uma <img>, basta retirar a linha do appendChild().

[JSFiddle de exemplo][1]JSFiddle de exemplo [1]

Edit: httptenho duas observações a fazer://jsfiddle.net/ruipimentel/8j79cmLm/

  • Este método é robusto. Dá para fazer transformações bem complexas com as imagens, graças ao canvas, e ainda disponibilizar a imagem para download, ao final (caso necessário).

  • O método do @Jader pode acabar sendo mais fácil. Ele utiliza CSS e bem menos script para produzir resultados idênticos, caso o objetivo seja uma montagem simples e para visualização "estática" na página.

É 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][1]). Caso você não queira exibir o resultado no canvas, mas sim em uma <img>, basta retirar a linha do appendChild().

[JSFiddle de exemplo][1] [1]: http://jsfiddle.net/ruipimentel/8j79cmLm/

É 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().

JSFiddle de exemplo

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 imagem para download, ao final (caso necessário).

  • O método do @Jader pode acabar sendo mais fácil. Ele utiliza CSS e bem menos script para produzir resultados idênticos, caso o objetivo seja uma montagem simples e para visualização "estática" na página.

Fonte Link
Rui Pimentel
  • 2,9mil
  • 12
  • 21

É 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> caso uma das imagens de entrada venham 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 desabilitando algumas linhas.

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][1]). 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/img1.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
                     );
    img_out.src = canvas.toDataURL(); // Se as imagens vierem do mesmo domínio!
});

Espero ter ajudado!

[JSFiddle de exemplo][1] [1]: http://jsfiddle.net/ruipimentel/8j79cmLm/