Je suis assez nouveau dans la toile et j'ai quelques problèmes.

J'essaye d'atteindre un objectif final: afficher deux images dans une seule toile; une image est l'arrière-plan, l'autre image est découpée en PNG et apparaît par-dessus.

Je suis à mi-chemin mais j'ai heurté un mur et je ne sais pas comment le dépasser.

J'ai créé un jsFiddle pour cela à http://jsfiddle.net/jhp79yg9/

      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');

      var sources = {
        img1: 'https://scontent-iad3-1.cdninstagram.com/hphotos-xaf1/t51.2885-15/11351598_1454928098145798_1274636321_n.jpg',
        img2: 'https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11379733_1139595366067106_273993739_n.jpg',
        mask: 'http://img12.deviantart.net/65e4/i/2013/003/6/6/png_floating_terrain_by_moonglowlilly-d5qb58m.png'
      };

      loadImages(sources, function(images) {
        context.drawImage(images.img2, 0, 0, 240, 240);
        
        context.drawImage(images.mask, 20, 95, 500, 349);
        context.globalCompositeOperation = 'source-in';
        context.drawImage(images.img1, 0, 0, 540, 540);

      });
<canvas id="canvas" width="540" height="540"></canvas>

Dans cet exemple, j'ai réduit la taille de la première image à 140x140 à partir de 540x540 juste pour que je puisse dire si ça gâche, ce que c'est.

Ce qui se passe, c'est qu'il n'affiche pas la deuxième image, il affiche la variable 'img1' deux fois au lieu d'afficher du tout 'img2'.

Quelqu'un peut-il offrir de l'aide?

Je ne peux pas non plus le dire, car il rend la même image, qui est au premier plan et qui est en arrière-plan. Une aide serait également appréciée (l'image coupée doit être au premier plan).

Merci!

3
robbclarke 22 juil. 2015 à 20:01

2 réponses

Meilleure réponse

Une autre approche consisterait à découper le masque du contenu actuel, puis à dessiner l'arrière-plan derrière le contenu actuel:

loadImages(sources, function(images) {
    context.drawImage(images.img2, 0, 0, 540, 540);
    context.globalCompositeOperation = 'destination-out';
    context.drawImage(images.mask, 20, 95, 500, 349);
    context.globalCompositeOperation = 'destination-atop';
    context.drawImage(images.img1, 0, 0, 540, 540);
})

http://jsfiddle.net/jhp79yg9/6/

4
Sebastian Nette 22 juil. 2015 à 17:28

Je ne pouvais pas comprendre clairement quelle est votre exigence, mais en faisant certaines hypothèses, j'espère que cela vous donnera ce dont vous avez besoin

context.drawImage(images.img2, 100, 180, 350, 350);
context.globalCompositeOperation = 'destination-atop';
context.drawImage(images.mask, 100, 180, 350, 350);
context.drawImage(images.img1, 0, 0, 540, 540);

http://jsfiddle.net/jhp79yg9/5/

2
Diode 22 juil. 2015 à 17:24