web-dev-qa-db-fra.com

Fusionner l'image en utilisant Javascript

Est-il possible de fusionner des photos en utilisant javascript?

Par exemple, si vous avez 2 fichiers d'images rectangle .jpg ou .png de la même taille, est-il possible de les aligner côte à côte et de produire une copie fusionnée des deux dans un nouveau fichier image .jpg ou .png?

javascriptimage-processingimage-manipulation
29
footprint.

Vous pouvez utiliser JavaScript pour les "fusionner" en un seul canevas et convertir ce canevas en image.

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imageObj1 = new Image();
var imageObj2 = new Image();
imageObj1.src = "1.png"
imageObj1.onload = function() {
   ctx.drawImage(imageObj1, 0, 0, 328, 526);
   imageObj2.src = "2.png";
   imageObj2.onload = function() {
      ctx.drawImage(imageObj2, 15, 85, 300, 300);
      var img = c.toDataURL("image/png");
      document.write('<img src="' + img + '" width="328" height="526"/>');
   }
};

Pour des raisons de sécurité, vos deux images doivent être sur le même domaine avec votre fichier JavaScript (ie http://123.com/1.png, http://123.com/2.png Et http://123.com/script.js) Sinon la fonction toDataURL() va générer une erreur.

48
Huỳnh Quốc Phong

Huỳnh Quốc Phong a partiellement raison:

Vous pouvez utiliser Canvas pour fusionner des images. Mais ils peuvent provenir d'autres domaines. Chargez simplement les photos dans votre dom. Une fois que les images sont chargées (peuvent être vérifiées avec javascript, voir ci-dessous), vous pouvez les utiliser dans votre toile.

var canvas = canvasBuild.getContext('canvasObj');
var img = document.getElementById('mergePic1');
canvas.drawImage(img, 0, 0);

Pour vérifier si les images ont été chargées, je recommanderais d'utiliser le plugin jQuery http://desandro.github.io/imagesloaded/ - mais cela peut aussi se faire sans.

9
Alex

Vous pouvez utiliser la bibliothèque JavaScript Pixastic pour combiner, filtrer et fusionner plusieurs images. http://www.pixastic.com/lib/docs/actions/blend/

Mais cela ne fonctionne que dans les navigateurs modernes qui prennent en charge l'élément Canvas. Malheureusement, IE8 ne prend pas cela en charge.

2
Felix Gertz

Je sais que c'est un ancien poste, mais je l'ai rencontré à la recherche d'une solution à cette question, moi-même. Même plus, je voulais pouvoir télécharger les images qui devraient être utilisées (sans avoir besoin de s'appuyer sur une logique côté serveur).

J'ai créé un violon ( http://jsfiddle.net/davidwalton/4pjreyfb/6/ ) qui s'appuie sur ceci:

Comment faire un simple téléchargement d'image en utilisant Javascript/HTML

J'ai ensuite ajouté la logique de Huỳnh Quốc Phong ci-dessus ( Fusionner l'image en utilisant Javascript ):

HTML:

<input class="file1" type="file" data-image-selector=".image1" />
<input class="file2" type="file" data-image-selector=".image2" />
<br />
<img class="image1 hidden" alt="medium image 1" />
<img class="image2 hidden" alt="medium image 2" />
<br />
<input class="btn-merge" type="button" value="Merge!" />
<br />
<img class="merged-image hidden" alt="merged image" />
<canvas id="canvas" class="hidden"></canvas>

JS:

$('.file1, .file2').on('change', function() {
  var reader = new FileReader(),
    imageSelector = $(this).data('image-selector');

  if (this.files && this.files[0]) {
    reader.onload = function(e) {
      imageIsLoaded(e, imageSelector)
    };
    reader.readAsDataURL(this.files[0]);
  }
});

$('.btn-merge').on('click', merge);

function imageIsLoaded(e, imageSelector) {
  $(imageSelector).attr('src', e.target.result);
  $(imageSelector).removeClass('hidden');
};

function merge() {
    var canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d'),
      imageObj1 = new Image(),
      imageObj2 = new Image();

    imageObj1.src = $('.image1').attr('src');
  imageObj1.onload = function() {
    ctx.globalAlpha = 1;
    ctx.drawImage(imageObj1, 0, 0, 328, 526);
    imageObj2.src = $('.image2').attr('src');;
    imageObj2.onload = function() {
        ctx.globalAlpha = 0.5;
      ctx.drawImage(imageObj2, 15, 85, 300, 300);
      var img = canvas.toDataURL('image/jpeg');
      $('.merged-image').attr('src', img);
      $('.merged-image').removeClass('hidden');
    }
  };
}

De plus, il incorpore un peu de transparence juste pour permettre l'utilisation de deux jpeg.

Notez que tout le positionnement et le dimensionnement de l'image est géré via les fonctions ctx.drawImage(). La démo sera moche, mais elle devrait prouver le concept. :)

J'espère que cela vous sera utile!

2
David Walton