¿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 la publicación, pero ¿puede combinarlos en una sola imagen para descargar?

Actualización 1 de octubre de 2008:

Gracias por el consejo, estaba ayudando a alguien a trabajar en un sitio solo js / css, con jQuery y buscaban tener algunos efectos de imagen tipo MacOS con varias imágenes que se superpongan entre sí. La solución que se nos ocurrió fue un posicionamiento absoluto y el uso del efecto en un padre <div> relativamente posicionado. Hubiera sido mucho más fácil combinar las imágenes y crear el efecto en esa única imagen.

Luego me hizo pensar en editores de imágenes en línea como Picnik y me preguntaba si podría haber una imagen basada en el navegador editor 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 pregunta antigua y el OP encontró una solución alternativa, pero esto funcionará si las imágenes y el lienzo ya forman 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');
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

No creo que pueda o quiera hacer esto con javascript del lado del cliente (" combinándolos en una sola imagen para descargar "), porque se está ejecutando en el cliente: incluso si puede combinarlos en un solo 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

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

Answer 4

MarvinJ proporciona el método combineByAlpha () en el que combina múltiples imágenes usando su canal alfa. Por lo tanto, solo necesita tener sus imágenes en un formato que admita la transparencia, como PNG, y usar ese método, de la siguiente manera:

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

imagen1:

image2:

imagen3:

Resultado :

Ejemplo ejecutable:

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

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, solo reorganizar los bloques de píxeles.

Answer 6

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