Pouvez-vous combiner plusieurs images en une seule en utilisant JavaScript?

Question

Je me demande s’il est possible de combiner plusieurs images en une seule image à l’aide de JavaScript. Est-ce quelque chose que Canvas sera capable de faire? L’effet peut être fait avec la pose, mais pouvez-vous les combiner en une seule image à télécharger?

Mise à jour du 1er octobre 2008:

Merci pour le conseil, j’aidais quelqu'un avec un travail uniquement sur js / css, jQuery et ils cherchaient à obtenir des effets d’image ressemblant à un dock MacOS avec plusieurs images superposées. La solution que nous avons proposée consistait simplement en un positionnement absolu et en utilisant l’effet sur un parent <div> relativement positionné. Il aurait été beaucoup plus facile de combiner les images et de créer un effet sur cette image unique.

Cela m'a alors amené à réfléchir aux éditeurs d'images en ligne comme Picnik et à me demander s'il pouvait y avoir une image basée sur un navigateur. éditeur avec des capacités de photoshop écrit uniquement en javascript. Je suppose que ce n’est pas une possibilité, peut-être à l’avenir?

Answer 1

Je sais que cette question est ancienne et que le PO a trouvé une solution de contournement, mais cela fonctionnera si les images et le canevas font déjà partie de la page 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, si vous souhaitez charger les images à la volée:

<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

Je ne pense pas que vous puissiez ou voudriez faire cela avec le javascript côté client (& "; les combiner en une seule image à télécharger &"), car il est exécuté sur le client: même si vous pouvez les combiner en un seul fichier image sur le client. À ce stade, vous avez déjà téléchargé toutes les images individuelles. La fusion est donc inutile.

Answer 3

Vous pouvez utiliser Pixastic pour cela. L'exemple de mélange est ici: http://www.pixastic.com/lib/docs/actions/blend/

Answer 4

MarvinJ fournit la méthode combineByAlpha () qui combine plusieurs images à l'aide de ses canal alpha. Par conséquent, il vous suffit de disposer vos images dans un format compatible avec la transparence, tel que PNG, et d'utiliser cette méthode, comme suit:

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

image1:

image2:

image3:

Résultat:

Exemple d'exécution:

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

S'ils étaient une paire de JPG, sous votre contrôle, avec une taille multiple de 8 dans les deux sens, probablement. Cela ne nécessiterait pas de recodage, mais simplement un remaniement des blocs de pixels.

Answer 6

Le problème est que vous ne pouvez pas "télécharger" à partir de JavaScript. Cela n'a pas vraiment de sens, car JavaScript s'exécute sur le client et il est donc logique de télécharger à partir du serveur. Pouvez-vous nous dire ce que vous essayez d'atteindre, votre objectif final? Nous pourrions peut-être proposer de meilleures suggestions.