¿Puedes combinar varias imágenes en una sola usando JavaScript?

Question

Me pregunto si hay una manera de combinar varias imágenes en una sola imagen usando solo JavaScript. ¿Es esto algo que Canvas podrá hacer? El efecto se puede hacer con postulación, pero ¿puedes combinarlos en una sola imagen para descargar?

actualización Oct 1, 2008:

Gracias por el consejo, yo estaba ayudando a alguien trabajar en un/css único sitio js, ​​con jQuery y estaban buscando tener algunos muelle-como efectos de imagen MacOS con múltiples imágenes que se superponen entre sí. La solución que se nos ocurrió fue solo el posicionamiento absoluto y el uso del efecto en una matriz <div> relativamente posicionado. Hubiera sido mucho más fácil combinar las imágenes y crear el efecto en esa imagen única.

Me hizo pensar en editores de imágenes en línea como Picnik y me pregunto si podría haber un editor de imágenes basado en navegador con capacidades de Photoshop escritas solo en javascript. Supongo que no es una posibilidad, ¿tal vez en el futuro?

Answer 1

Sé que esta es una vieja pregunta y OP encontró una solución alternativa, pero esto funcionará si las imágenes y el lienzo ya son parte de la 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> 

O, si desea cargar las imágenes sobre la marcha:

<canvas id="canvas"></canvas> 
<script type="text/javascript"> 
var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 
Image img1 = new Image(); 
Image 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

No creo que pueda o quiera hacer esto con javascript del lado del cliente ("combinándolos en una sola imagen para descargar"), porque se ejecuta en el cliente: incluso si pudiera combinarlos en un único archivo de imagen en el cliente, en ese momento ya ha descargado todas las imágenes individuales, por lo que la fusión no tiene sentido.

Answer 3

Si fueran un par de JPG, bajo su control, con un tamaño que es un múltiplo de 8 en ambas direcciones, probablemente. Eso no requeriría recodificación, simplemente reorganizando los bloques de píxeles.

Answer 4

Bueno, el problema es que no puede 'descargar' desde JavaScript, realmente no tiene mucho sentido, porque JavaScript se ejecuta en el cliente, y tiene sentido descargarlo del servidor. ¿Puede decirnos qué está tratando de lograr, su objetivo final? Podríamos encontrar mejores sugerencias.

Answer 5

Puede usar Pixastic para esto. El ejemplo de mezcla está aquí: http://www.pixastic.com/lib/docs/actions/blend/