Puoi combinare più immagini in una singola usando JavaScript?

Question

Mi chiedo se c'è un modo per combinare più immagini in una singola immagine usando solo JavaScript. È qualcosa che Canvas sarà in grado di fare. L'effetto può essere fatto con il positing, ma puoi combinarli in un'unica immagine per il download?

Aggiornamento 1 ottobre 2008:

Grazie per il consiglio, stavo aiutando qualcuno a lavorare su un sito solo js / css, con jQuery e stavano cercando di avere alcuni effetti di immagine simili a dock di MacOS con più immagini che si sovrappongono. La soluzione che abbiamo trovato è stata solo il posizionamento assoluto e l'utilizzo dell'effetto su un genitore <div> relativamente posizionato. Sarebbe stato molto più semplice combinare le immagini e creare l'effetto su quella singola immagine.

Mi ha fatto pensare agli editor di immagini online come Picnik e mi chiedevo se potesse esserci un'immagine basata su browser editor con funzionalità photoshop scritto solo in javascript. Immagino che non sia una possibilità, forse in futuro?

Answer 1

So che questa è una vecchia domanda e l'OP ha trovato una soluzione alternativa, ma funzionerà se le immagini e il canvas fanno già parte della pagina 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>

Oppure, se si desidera caricare le immagini al volo:

<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

Non credo che tu possa o vorrai farlo con il lato client javascript (" combinandoli in una singola immagine per il download "), perché è in esecuzione sul client: anche se potresti combinarli in un unico file di immagine sul client, a quel punto hai già scaricato tutte le singole immagini, quindi l'unione è inutile.

Answer 3

Puoi usare Pixastic per questo. L'esempio di fusione è qui: http://www.pixastic.com/lib/docs/actions/blend/

Answer 4

MarvinJ fornisce il metodo combinaByAlpha () in cui combina più immagini usando il suo canale alfa. Pertanto, devi solo avere le tue immagini in un formato che supporti la trasparenza, come PNG, e utilizzare quel metodo, come segue:

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

image1:

image2:

image3:

Risultato:

Esempio eseguibile:

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 fossero una coppia di JPG, sotto il tuo controllo, con una dimensione che è un multiplo di 8 in entrambe le direzioni, probabilmente. Ciò non richiederebbe la ricodifica, ma solo il rimescolamento dei blocchi di pixel.

Answer 6

Bene, il problema è che non puoi "scaricare" da JavaScript, non ha molto senso, perché JavaScript viene eseguito sul client e ha senso scaricare solo dal server. Puoi dirci cosa stai cercando di raggiungere, il tuo obiettivo finale? Potremmo essere in grado di trovare suggerimenti migliori.