La combinaison de deux images sur une toile en HTML5

Je suis en train de travailler avec l'élément HTML5 canvas. Disons que j'ai 2 données images des objets que je veux combiner pour être en mesure de mettre sur une toile. Supposons que je n'aime pas la façon dont ces images se combinent. Les deux données images des objets ont exactement le même nombre de pixels et la forme.

Quelle est la meilleure façon de combiner les deux images?

Je me dis que je peux écrire une boucle for et itérer sur les données images tableau manuellement et de les combiner et de définir chaque valeur rgba par pixel, mais je me demandais si il ya une meilleure façon? J'ai besoin de cette opération pour arriver le plus rapidement possible.

Merci d'avance.

  • Ce n' "combiner" signifie? Vous voulez un largués au-dessus de l'autre de sorte que vous ne pouvez pas le voir? Vous voulez un superposées au-dessus de l'autre? Vous voulez des mises bout-à-bout?
  • Je veux tomber les uns sur les autres. La plupart des pixels dans ces images sont complètement transparents. Donc, si image1 a un cercle noir sur la moitié gauche, et image2 a un carré sur la moitié droite de l', je tiens à combiner si je reçois 1 image avec un cercle sur la gauche et un carré sur la droite.
InformationsquelleAutor ctown4life | 2010-10-07
  1. 7

    Si vous cherchez simplement à superposer une image sur une autre, vous voulez probablement faire quelque chose comme ceci:

    ctx.drawImage(image1, x, y);
//adjust globalAlpha as needed, or skip if the image has its own transparency
ctx.globalAlpha = 0.5;
ctx.drawImage(image2, x, y);

    OU, selon l'effet que vous recherchez:

    ctx.drawImage(image1, x, y);
ctx.globalCompositeOperation = "lighten"; //many other possibilities here
ctx.drawImage(image2, x, y);

    Ce sera probablement plus rapide que de dessiner pixel par pixel à travers le get/putImageData méthodes, mais de combien est le navigateur-dépendante.

    • Le questionneur dit (dans un commentaire) que les pixels de l'image sont pour la plupart transparentes, donc je ne pense pas que l'alpha de composition ou le fonctionnement même besoin d'être réglé.
    • C'est correct. Je vais mettre à jour le commentaire dans la première série de code.
    InformationsquelleAutor C-Mo