Você pode combinar várias imagens em uma única usando JavaScript?

Question

Eu estou querendo saber se existe uma maneira de combinar várias imagens em uma única imagem usando apenas JavaScript. Isto é algo que Canvas será capaz de fazer. O efeito pode ser feito com positing, mas você pode combiná-los em uma única imagem para download?

Atualização de 01 de outubro de 2008:

Obrigado pelo conselho, eu estava ajudando alguém a trabalhar em um js / css único local, com jQuery e eles estavam olhando para ter alguns MacOS encaixar-like efeitos de imagem com várias imagens que se sobrepõem uns aos outros. A solução que surgiu foi apenas de posicionamento absoluto, e usando o efeito sobre um <div>-mãe relativamente posicionado. Teria sido muito mais fácil de combinar as imagens e criar o efeito sobre a imagem única.

Em seguida, ele me fez pensar sobre editores de imagem online como Picnik e se perguntando se poderia haver uma imagem baseada em navegador editor com recursos do photoshop escritos apenas em javascript. Eu acho que não é uma possibilidade, talvez no futuro?

Answer 1

Eu sei que isto é uma questão antiga e o OP encontrada uma solução alternativa, mas isso vai funcionar se as imagens e telas já fazem parte da página HTML.

<img id="img1" src="imgfile1.png">
<img id="img2" src="imgfile2.png">
<canvas id="canvas"></canvas>

<script type="text/javascript">
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

canvas.width = img1.width;
canvas.height = img1.height;

context.globalAlpha = 1.0;
context.drawImage(img1, 0, 0);
context.globalAlpha = 0.5; //Remove if pngs have alpha
context.drawImage(img2, 0, 0);
</script>

Ou, se você quiser carregar as imagens em tempo real:

<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img1 = new Image();
var img2 = new Image();

img1.onload = function() {
    canvas.width = img1.width;
    canvas.height = img1.height;
    img2.src = 'imgfile2.png';
};
img2.onload = function() {
    context.globalAlpha = 1.0;
    context.drawImage(img1, 0, 0);
    context.globalAlpha = 0.5; //Remove if pngs have alpha
    context.drawImage(img2, 0, 0);
};        

img1.src = 'imgfile1.png';
</script>

Answer 2

Eu não acho que você pode ou gostaria de fazer isso com javascript do lado do cliente ( "pentear-los em uma única imagem para download"), porque ele está em execução no cliente: mesmo se você pode combiná-los em uma única imagem arquivo no cliente, em que ponto você já baixou todas as imagens individuais, para a fusão é inútil.

Answer 3

Você pode usar Pixastic para isso. O exemplo aqui mistura é: http://www.pixastic.com/lib/docs/actions/blend/

Answer 4

MarvinJ fornece o método combineByAlpha () em que combina várias imagens usando seu canal alfa. Portanto, você só precisa ter suas imagens em um formato que a transparência suportes, como PNG, ea utilização desse método, como a seguir:

Marvin.combineByAlpha(image, imageOver, imageOutput, x, y);

image1:

image2:

image3:

Resultado:

Execut�el Exemplo:

var canvas = document.getElementById("canvas");
image1 = new MarvinImage();
image1.load("https://i.imgur.com/ChdMiH7.jpg", imageLoaded);
image2 = new MarvinImage();
image2.load("https://i.imgur.com/h3HBUBt.png", imageLoaded);
image3 = new MarvinImage();
image3.load("https://i.imgur.com/UoISVdT.png", imageLoaded);

var loaded=0;

function imageLoaded(){
  if(++loaded == 3){
    var image = new MarvinImage(image1.getWidth(), image1.getHeight());
    Marvin.combineByAlpha(image1, image2, image, 0, 0);
    Marvin.combineByAlpha(image, image3, image, 190, 120);
    image.draw(canvas);
  }
}

<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<canvas id="canvas" width="450" height="297"></canvas>

Answer 5

Se fossem um par de JPGs, sob seu controle, com um tamanho que é um múltiplo de 8 em ambas as direções, provavelmente. Isso não exigiria recodificação, apenas reformulando os blocos de pixels.

Answer 6

Bem, o problema é que você não pode 'download' de JavaScript, ele realmente não faz muito sentido, porque o JavaScript é executado no cliente, e isso só faz sentido para download a partir do servidor. Pode dizer-nos o que você está tentando alcançar, seu objetivo final? Poderíamos ser capazes de chegar a melhores sugestões.