Scribd
Upload
17 views2 pages

JPG to Animated GIF Converter Tool

This document contains code to convert multiple images to an animated GIF. It uses an input field to select JPEG images, then loads each image onto a canvas. It draws the image, creates a frame from the canvas data URL, and stores the frames in an array. Once all images are loaded, it plays the frames to create the animation and alerts when complete.

Uploaded by

Patel Gaurang
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
17 views2 pages

JPG to Animated GIF Converter Tool

This document contains code to convert multiple images to an animated GIF. It uses an input field to select JPEG images, then loads each image onto a canvas. It draws the image, creates a frame from the canvas data URL, and stores the frames in an array. Once all images are loaded, it plays the frames to create the animation and alerts when complete.

Uploaded by

Patel Gaurang
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image to Animated GIF Converter</title>
</head>
<body>
<input type="file" id="imageInput" accept="image/jpeg" multiple>
<br>
<button onclick="convertToAnimatedGif()">Convert to Animated GIF</button>
<br>
<canvas id="animationCanvas" style="display: none;"></canvas>

<script>
function convertToAnimatedGif() {
var imageInput = [Link]('imageInput');

if (![Link] || [Link] === 0) {


alert('Please select one or more JPG images');
return;
}

var canvas = [Link]('animationCanvas');


var ctx = [Link]('2d');
var img = new Image();
var frames = [];

function loadImage(index) {
if (index < [Link]) {
var reader = new FileReader();
[Link] = function(e) {
[Link] = function() {
[Link] = [Link];
[Link] = [Link];

// Draw the image on the canvas


[Link](0, 0, [Link], [Link]);
[Link](img, 0, 0, [Link], [Link]);

// Create a frame using the canvas content

[Link](createFrame([Link]('image/jpeg')));

// Load the next image


loadImage(index + 1);
};

[Link] = [Link];
};
[Link]([Link][index]);
} else {
// All images loaded, start the animation
playFrames(frames, ctx);
}
}

function createFrame(dataURL) {
return dataURL;
}

function playFrames(frames, ctx) {


var currentIndex = 0;

function drawFrame() {
// Display the frame dataURL (you may want to perform
additional processing here)
alert('Frame ' + (currentIndex + 1) + ': ' +
frames[currentIndex]);

currentIndex++;

if (currentIndex < [Link]) {


requestAnimationFrame(drawFrame);
} else {
// Animation complete
alert('Animation complete!');
}
}

drawFrame();
}

loadImage(0);
}
</script>
</body>
</html>

You might also like