How to save a transparent gif （without background）？

p5.js Libraries
1

When the png is ok（without background，transparent）.，I use canvas to save the gif，but I always get a gif with a black background .
I used a method to replace black with transparency, but there will still be black residue on the graph ( I have used “clear()” )
I think maybe it have a better way to save the gif ？

      var gif = new GIF({
        workers: 2,
        quality: 10,
        transparent: 0xffffff
      });

      var canvasElement = document.getElementById('defaultCanvas0');
      var context = canvasElement.getContext('2d');
      console.log(canvasElement)
      for (var i = 0; i< 10; i++) {
        console.log(i)
        gif.addFrame(canvasElement, {delay: 10});
      }

      gif.on('finished', function(blob) {
        console.log(blob)
        console.log('download')
        const a = document.createElement("a");
        const url = window.URL.createObjectURL(blob);
        const filename = 'rain.gif';
        a.href = url;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(url);
      });
    
      gif.render();
    },
  }
1 Like
2

Hi,

Welcome to the community! :slight_smile:

First of all, it’s better to insert code directly inside your message by using the </> button on the forum rather than putting an image.

Is it pseudo code? Because the syntax looks like JavaScript but there’s some errors…

3

okey，i change the question…

1 Like
4

GIF does not support alpha transparency. It has only on/off pixels. Pixels are either transparent or fully opaque. It means that there’s no antialiasing for transparency and that causes borders to pixelate and sometimes showing the background color.
It’s how the file format is defined and there’s no way around it.

1 Like
5

emmmmm，maybe I need to save the mov？… :thinking:

6

I guess it depends on how you create imagery and what you intend to do with it. If you can save imagery frame by frame then I would save them as png and use suitable external program to create animated PNG or movie.

I don’t know if Processing has support for direct movie making.

7

Oh, I see. emmmmm， :thinking: I can use adobe or other way to make the many png change into the gif ,but my user is hard to make the translucen GIF。okey，I think I will make the Order PNGs into Compressed package.

8

Prosessing IDE has a Tools->Movie Maker, but it makes movs(?). I have tried animated gifs, but files have been far too big and I ended using better compressed video formats. Web is full of (free) tools to make animated gifs from files. You can use at least Adobe Photoshop to make videos from images, but it is a bit cumbersome in CS6. Later version might be nicer but I haven’t used them nor Premiere.

1 Like
9

There is a nice photoshop (circa 2020 version) tutorial titled “Creating Animated GIFs in Photoshop” on LinkedIn learning on how to animate images with transparent background. Very straightforward.
:nerd_face:

10

未标题-4

11

@ffewaghdfh, are you using p5.js? In the web browser?

12

yes，I know gif need to in web，I have deployed （superficial. I found some websites that are made of p5js. The effect is very good, but the GIF cannot be saved. So I’m going to solve this problem…

13

No, what I mean is, there are two related languages

  1. Processing, which is Java-based, and runs on the desktop:
PImage img;
void setup() {
  size(400,400);
}
void draw() {
  background(220);
}
  1. p5.js, which is JavaScript based, and runs on the browser:
var img;
function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(220);
}

Which are you using for your project? Because it has been unclear, you are getting a mix of answers for both. But they are different, and the same thing won’t work in both languages.

1 Like
14

I am using p5.js. :raising_hand_man: