在没有任何库的情况下从多个图像在 Javascript 中制作 GIF

Question

Is there any way to make GIFs in Javascript without any library? I've searched half the internet and found nothing.

Answer 1

Note to potential downvoters

I know that this is a low-quality question. However, I believe that the usual reasons for not answering have been invalidated. Seeing as it has been almost a month since it was asked, I doubt I'll be doing their homework as it would probably be past due for weeks at this point. And as for them not taking the time to research this myself, I'm fixing the problem at its source by teaching them how to research it.

Answer

Note that I'm answering this assuming that you know some Javascript, but not all of it, and that you want to learn how to write code that you might not yet know how to do . If you're just looking for the solution, then feel free to copy-paste it or whatever. But reading through this and understanding the process I used to tackle this problem, like how to think through it and look things up, will help you in the future. If you learn how to learn, you'll be a lot better off.

Now, first of all, we need a way to display images. I know from experience that there are two main methods to do this. One involves using the canvas element to draw the image; this is the more complicated method. Method 2 uses the image tag , <img> . I assume this is the method you want. If you didn't know how to draw an image using HTML and Javascript, a simple google search ( here's another ) can clear that up. (Actually, the second one mostly returns the canvas method-- but you probably knew about the image tag already anyways.)

Next we need a way to change what image is displayed. Well, that should be as simple as changing the thing that tells the image what to display in the first place. The top result from the first example search is a nice documentation page -- perfect. Reading through, I get to this part:

HTML Images Syntax

In HTML, images are defined with the tag.

The tag is empty, it contains attributes only, and does not have a closing tag.

The src attribute specifies the URL (web address) of the image:

<img src="url">

Well that looks like it's what controls what the image is. So we simply have to make a Javascript script that changes this property regularly. To do this right, we need a JS method that will wait for a specified amount of time. Searching "javascript wait" in Google, I see the second result is from the same source webpage that told me about images, so I'll go with that one. In the docs, I see this:

The setInterval() Method

The setInterval() method repeats a given function at every given time-interval.

window.setInterval(function, milliseconds);

The window.setInterval() method can be written without the window prefix.

The first parameter is the function to be executed.

The second parameter indicates the length of the time-interval between each execution.

(It even gives an example!)

This seems to be what we want. Using this method, I can make a simple code to change between two images every second (explanatory comments to the right, scroll to see them better):

 function changePicture(){ //Make the function that will change the pictures var picture = document.getElementById('picture1'); //Get the picture element from the HTML if(picture.src == "https://vignette.wikia.nocookie.net/starpolar/images/9/96/Paul_blart.jpg/revision/latest?cb=20150419171412"){ //If it's the Paul Blart picture then: picture.src = "https://i.ytimg.com/vi/A5KWYdrOXDk/movieposter.jpg"; //Set it to the Bee Movie } else { //If it's not Paul Blart (and is therefore probably the Bee Movie image): picture.src = "https://vignette.wikia.nocookie.net/starpolar/images/9/96/Paul_blart.jpg/revision/latest?cb=20150419171412"; //Set it to Paul Blart } } setInterval(changePicture, 1000); //Use the new method we learned about to schedule our picture-changing function to happen once every second

 <!--This is the image that we will change.--> <img id="picture1" src="https://vignette.wikia.nocookie.net/starpolar/images/9/96/Paul_blart.jpg/revision/latest?cb=20150419171412"/>

Now, that's a good start-- we can change between 2 different totally definitely random images.

But we need more. We don't want to code in every new image manually; what we need is an array . It's hard to know that through a search, but if you've taken a primer course or learned some JS on your own you should be pretty familiar with arrays and would probably realize that they are a good option here. So we set up the array with all the images we want it to change between (scroll to the right to see it all):

var gifImages = ["https://vignette.wikia.nocookie.net/starpolar/images/9/96/Paul_blart.jpg/revision/latest?cb=20150419171412","https://i.ytimg.com/vi/A5KWYdrOXDk/movieposter.jpg","http://content.tv3.ie/content/images/0647/1_165781.jpg","https://upload.wikimedia.org/wikipedia/en/thumb/4/47/Spongebob-squarepants.svg/1200px-Spongebob-squarepants.svg.png","http://i0.kym-cdn.com/entries/icons/mobile/000/016/958/Dankkkk.jpg"];

Then we need to change our original function. It should cycle through this array of images; to do this, we'll need to make a variable to hold the position in the array.

var currentFrame = 0; //Call it a frame because we're making a gif and every image (so every array index) will be a frame
function changePicture(){
    currentFrame++;
}

This should work for now, let's test it:

 //Set up the array of frames var gifImages = ["https://vignette.wikia.nocookie.net/starpolar/images/9/96/Paul_blart.jpg/revision/latest?cb=20150419171412","https://i.ytimg.com/vi/A5KWYdrOXDk/movieposter.jpg","http://content.tv3.ie/content/images/0647/1_165781.jpg","https://upload.wikimedia.org/wikipedia/en/thumb/4/47/Spongebob-squarepants.svg/1200px-Spongebob-squarepants.svg.png","http://i0.kym-cdn.com/entries/icons/mobile/000/016/958/Dankkkk.jpg"]; var currentFrame = 0; //Call it a frame because we're making a gif and every image (so every array index) will be a frame function changePicture(){ document.getElementById("picture1").src = gifImages[currentFrame]; //Get the gif element and set its source to the current frame currentFrame++; //Increase the current frame by 1 } setInterval(changePicture,1000);

 <!--This is the image that we will change.--> <img id="picture1" src="https://vignette.wikia.nocookie.net/starpolar/images/9/96/Paul_blart.jpg/revision/latest?cb=20150419171412"/>

You should notice 2 things. The first is that the images have wildly different sizes and length/width ratios, resulting is the image changing size every time. The second thing you should notice is that when we run out of images, it doesn't loop back. Oops! (Side note: I actually made this mistake. Don't be discouraged by mistakes, we all make them!)

To remedy the first problem, we can look back to the HTML images documentation and see that there are two properties that can help us: width and height . These will lock the image into the specified dimensions. Frame sizes shouldn't be much of a problem with an actual gif, since the frames would probably all be the same size, but it doesn't hurt to be safe:

<img id="picture1" width="100px" height="100px" src="https://vignette.wikia.nocookie.net/starpolar/images/9/96/Paul_blart.jpg/revision/latest?cb=20150419171412"/>

The second problem is a bit harder. But looking through the code, we should be able to spot the bug fairly quickly. (Note: An experienced developer such as myself might be able to see a problem like this in a small, simple program almost instantly. Don't be discouraged if you can't; we all started somewhere and becoming a 1337 hax0r comes with time.)

If we look at how our program operates, we could say it works like this:

• Loop forever:
  • Set the image to the current frame
  • Increase the frame

It becomes apparent that while we have a limited number of frames, we keep increasing the current one without going back down! Our progress through the gif would look like this (skipping to every 3rd frame and assuming 10 frames total):

|---------

---|------

------|---

---------|

---------- | <-- ???? oh no

This can be solved with a simple if statement that resets the current frame to 0 when we go past the end of our gif (line above is also shown for clarity):

currentFrame++; //Increase the current frame by 1
if(currentFrame >= gifImages.length){ //If we've gone past the end of our array of frames, then:
    currentFrame = 0; //Reset back to frame 0
}

With those changes, our gif looks like this:

 //Set up the array of frames var gifImages = ["https://vignette.wikia.nocookie.net/starpolar/images/9/96/Paul_blart.jpg/revision/latest?cb=20150419171412","https://i.ytimg.com/vi/A5KWYdrOXDk/movieposter.jpg","http://content.tv3.ie/content/images/0647/1_165781.jpg","https://upload.wikimedia.org/wikipedia/en/thumb/4/47/Spongebob-squarepants.svg/1200px-Spongebob-squarepants.svg.png","http://i0.kym-cdn.com/entries/icons/mobile/000/016/958/Dankkkk.jpg"]; var currentFrame = 0; //Call it a frame because we're making a gif and every image (so every array index) will be a frame function changePicture(){ document.getElementById("picture1").src = gifImages[currentFrame]; //Get the gif element and set its source to the current frame currentFrame++; //Increase the current frame by 1 if(currentFrame >= gifImages.length){ //If we've gone past the end of our array of frames, then: currentFrame = 0; //Reset back to frame 0 } } setInterval(changePicture,1000);

 <!--This is the image that we will change.--> <img id="picture1" width="100px" height="100px" src="https://vignette.wikia.nocookie.net/starpolar/images/9/96/Paul_blart.jpg/revision/latest?cb=20150419171412"/>

Now all we need to do is get the right frames into the array and speed it up! For a real gif, assuming this is a website you're making, the files will probably be named something like gif-frame-1 , gif-frame-2 , gif-frame-3 , etc. Because of this, we can automate making the array, putting it into a for loop:

var gifImages = [];
for(var i=0;i<200;i++){ //Change 200 to the number of frames your gif has
    gifImages[i] = "pictures/gif-frame-"+i+".png";
}

That code probably won't work with your website right away-- you have to change around the names of the images and number of frames and things-- but it should help you. If you specify where these pictures are, how they're named, how many there are, etc. then I could help you more, but I don't have enough information to write that part. Also note that this can be sped up about 50 times faster than it's going at the moment, but it looks weird without real frames to be used. For now, we can consider our final code to be:

 //Set up the array of frames var gifImages = ["https://vignette.wikia.nocookie.net/starpolar/images/9/96/Paul_blart.jpg/revision/latest?cb=20150419171412","https://i.ytimg.com/vi/A5KWYdrOXDk/movieposter.jpg","http://content.tv3.ie/content/images/0647/1_165781.jpg","https://upload.wikimedia.org/wikipedia/en/thumb/4/47/Spongebob-squarepants.svg/1200px-Spongebob-squarepants.svg.png","http://i0.kym-cdn.com/entries/icons/mobile/000/016/958/Dankkkk.jpg"]; var currentFrame = 0; //Call it a frame because we're making a gif and every image (so every array index) will be a frame function changePicture(){ document.getElementById("picture1").src = gifImages[currentFrame]; //Get the gif element and set its source to the current frame currentFrame++; //Increase the current frame by 1 if(currentFrame >= gifImages.length){ //If we've gone past the end of our array of frames, then: currentFrame = 0; //Reset back to frame 0 } } setInterval(changePicture,100);

 <!--This is the image that we will change.--> <img id="picture1" width="100px" height="100px" src="https://vignette.wikia.nocookie.net/starpolar/images/9/96/Paul_blart.jpg/revision/latest?cb=20150419171412"/>

It's possible to touch it up (for example, you could move the function inside the setInterval itself) but this should work fine.

I hope this answer has helped you to learn how to figure these things out!

Answer 2

I ended up just writing a script to replace the image in a div every second. It's not technically a gif, but it works very similarly.

                    eval('var frame' + word + ' = 0;');
                    var bigFrame = 0;
               
                setInterval(function(){ //everysecond
                    var noSpaces = input.replace(/\s/g, '');
    
                        var cLetter = noSpaces[bigFrame];
                        var thisSource = 'media/signs/alphabet/' + cLetter + '.jpeg';
                        $('#video').attr("src", thisSource);
                        $('#video').attr("alt", thisSource);
                        $('#video').attr("height", "350");
    
                        if(bigFrame + 1 >= noSpaces.length){
                            bigFrame = 0;
                        } else{
                            bigFrame = bigFrame +1;
                        }
    
                    for(word = 0; word < wordList.length; word ++){ //for every word
                        var currentFrame = eval('frame' + word);
                        currentWord = wordList[word];
                        currentWord = currentWord.toLowerCase();
                        console.log('current word is ' + currentWord);
                        var letterList = currentWord.split('');
                        var currentLetter = letterList[currentFrame];
                        var currentSource = 'media/signs/alphabet/' + currentLetter + '.jpeg';
                        var currentImage = "#" + eval('"image' + word + '"');
                        $(currentImage).attr("src", currentSource);
                        $(currentImage).attr("alt", currentSource);
                        $(currentImage).attr("height", "200");
                        if(currentFrame + 1 >= letterList.length){
                            eval('frame' + word + ' = 0');
                        } else{
                            eval('frame' + word + ' = currentFrame + 1;');
                        }
                    }
                }, 1000);

I don't know if this is helpful, or even understandable, but it might help someone. Also, I haven't bothered to edit the code, so there are definitely bits that won't make sense and weird variable names.