Masking an animated GIF loaded with loadImage() not working.

[sandersturing]

When loading an animated gif with loadImage() and applying a mask, the image is not masked. Doing the same thing with a still image obviously works:

Example in online editor

Good to add that there seems to be some inconsistency with how different browsers behave (which I could not reproduce myself):

• Chrome (MAC) does not show the mask at all
• Firefox (WIN) flickers the mask on and off every now and then (as mentioned in this forum post: Discourse: Masks not working on animated gifs?

Steps to reproduce:

• Load any animated GIF image (in preload, with loadImage)
• Load an image used as a mask
• Apply the mask to the animated GIF
• Display the animated GIF

Expected:

• The animated GIF should be masked out using the applied mask

Result:

• The animated GIF shows as is. Masks are however applied on static images (JPG, PNG) using the same code.

Thing I tried:

• re-applying the mask every frame before the image is being displayed
• Using different GIFS (different sizes, lengths etc.)

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[stalgiag]

Hi @sandersturing thanks for the well-written issue. This is an example of something that was simply forgotten. Often when new features are added (gifs in this case) it is easy to forget all of the different ways people will expect to be able to use them.

If someone wants to take this on they will need to update the mask function so that it:

1. check for .gifProperties and if present
2. take every frame in gifProperties.frames
3. Puts the result of the masking composite operation into gifProperties.frames.image

[sandersturing]

Hello @stalgiag, thanks for the reaction! Is this something I can implement myself locally for now?

[stalgiag]

This works okay in a pinch.

function preload() {
  gif = loadImage('gif.gif');
  mask = loadImage('mask.png');
}

function setup() {
  createCanvas(800, 800);
  background(200, 100, 100);
  pixelDensity(1);
  const pg = createGraphics(gif.width, gif.height);
  const ctx = pg.drawingContext;
  for (let i = 0; i < gif.gifProperties.frames.length; i++) {
    ctx.drawImage(mask.canvas, 0, 0);
    ctx.globalCompositeOperation = 'source-in';
    gif.drawingContext.putImageData(gif.gifProperties.frames[i].image, 0, 0);
    ctx.drawImage(gif.canvas, 0, 0);
    gif.drawingContext.clearRect(0, 0, gif.width, gif.height);
    gif.gifProperties.frames[i].image = ctx.getImageData(0, 0, gif.width, gif.height);
  }
}

[sandersturing]

@stalgiag Thank you so much, this works well. You're adding the mask to every frame beforehand and save that in the image object itself, right?

This will do perfectly for now. Hope it will be implemented in future releases.

Thanks again!

[yifanmai]

I just opened a PR #5508 that puts @stalgiag's code snippet into the mask method.