GIF generation is not working correctly

[tech4GT]

Gif generation is picking up the images produced in the thumbnails too!(brightness, contrast, saturation, rotate and crop).
We just want the step outputs in the gif and not these preview images.
cc @jywarren @Mridul97

[gitmate]

GitMate.io thinks possibly related issues are #213 (Crop Module not working correctly), #427 (Download and download as gif button not working in image sequencer), #285 (Colorbar generation module), #436 (Enhance gif view), and #386 (Link in the description does not work as required).

[gitmate]

GitMate.io thinks possibly related issues are #213 (Crop Module not working correctly), #427 (Download and download as gif button not working in image sequencer), #285 (Colorbar generation module), #436 (Enhance gif view), and #386 (Link in the description does not work as required).

[harshkhandeparkar]

@tech4GT, in which file is the gif generation done?

[harshkhandeparkar]

I actually found it in demo.js. It is a pretty easy fix. It is linked to my last rearrange-sequence-buttons PR. Should I fix this?

[tech4GT]

image-sequencer/examples/demo.js

Lines 96 to 168 in d5aac98

	var isWorkingOnGifGeneration = false;
	$('.js-view-as-gif').on('click', function(event) {
	// Prevent user from triggering generation multiple times
	if (isWorkingOnGifGeneration) return;
	isWorkingOnGifGeneration = true;
	var button = event.target;
	button.disabled = true;
	try {
	// Select all images from previous steps
	var imgs = document.getElementsByClassName("img-thumbnail");
	var imgSrcs = [];
	for (var i = 0; i < imgs.length; i++) {
	imgSrcs.push(imgs[i].src);
	}
	var options = {
	'gifWidth': imgs[0].width,
	'gifHeight': imgs[0].height,
	'images': imgSrcs,
	'frameDuration': 7,
	}
	gifshot.createGIF(options, function(obj) {
	if (!obj.error) {
	// Final gif encoded with base64 format
	var image = obj.image;
	var animatedImage = document.createElement('img');
	animatedImage.id = "gif_element";
	animatedImage.src = image;
	var modal = $('#js-download-gif-modal');
	$("#js-download-as-gif-button").one("click", function() {
	// Trigger download
	download(image, "index.gif", "image/gif");
	// Close modal
	modal.modal('hide');
	})
	var gifContainer = document.getElementById("js-download-modal-gif-container");
	// Clear previous results
	gifContainer.innerHTML = '';
	// Insert image
	gifContainer.appendChild(animatedImage);
	// Open modal
	modal.modal();
	button.disabled = false;
	isWorkingOnGifGeneration = false;
	}
	});
	}
	catch (e) {
	console.error(e);
	button.disabled = false;
	isWorkingOnGifGeneration = false;
	}
	});

[tech4GT]

Yeah go ahead @harshkhandeparkar :)