Convert PNG to Animated Gif with calling Gifsicle command in code

Question

I need to run Gifsicle command through JavaScript while developing plugin for Sketch. Trying to convert PNG image sequence to Animated GIF.

First I create temporary folder form images (works)
Then running OSX sips command to make PNG to GIF conversion process and got single GIF files (works)
Then trying to use Gifsicle command to make animated GIF from single GIF files in folder. I got only empty Animated GIF file from Gifsicle. (failed)

Here is code:

function convertPngToGif (exportFileName, exportFolder) {

// Create Temporary folder for conversion process
var fileManager = NSFileManager.defaultManager();
var uniqueID = NSProcessInfo.processInfo().globallyUniqueString();
var tmpPathUrl = NSTemporaryDirectory();
var tmpFolder = tmpPathUrl.stringByAppendingPathComponent(uniqueID);
fileManager.createDirectoryAtPath_withIntermediateDirectories_attributes_error(tmpFolder, true, null, null);

// Path to gifsicle
var gifConverter = utils.scriptLibraryPath + "/gifsicle";

// Create bash arguments
var convertGifImages = "find \"" + exportFolder + "\" -name '*.png' -exec sips -s format gif -o \"" + tmpFolder + "\" {}.gif {} \\;"
var convertGifAnimation = "find \"" + tmpFolder + "\" -name '*.gif' -execdir bash -c '\"" + gifConverter + "\" --delay=10 '*.gif' > \"" + exportFolder + '/' + exportFileName + '.gif' + "\"' \\;"

var convertTask = NSTask.alloc().init();
var createTask = NSTask.alloc().init();

// Create GIF Image Sequence from exist PNG images
convertTask.setLaunchPath("/bin/bash");
convertTask.setArguments(["-c", convertGifImages]);
convertTask.launch();
convertTask.waitUntilExit();

// Create GIF animation from converted images
createTask.setLaunchPath("/bin/bash");
createTask.setArguments(["-c", convertGifAnimation]);
createTask.launch();
createTask.waitUntilExit();

// Remove temporary folder
fileManager.removeItemAtPath_error_(tmpFolder, null);
}

Note while testing: I have tried Gifsicle commands. It doesn't create that empty file with output '-o' command, but with using '>' it will create that empty file.

Through Terminal it Works

I have tried through Terminal this whole command manually as it appears in function string and it creates animated GIF properly:

find "/GifImagesFolder/" -name '*.gif' -exec "/GifSicleFolder/gifsicle" --delay=10 *.gif -o "/OutputFolder/Example.gif" \;

I guess it's related about that bash command, because it works through Terminal but not from code.

score 0 · Accepted Answer · answered Jan 10 '16 at 16:55

There is already plugin called Generate-GIF for Sketch that uses this PNG to Animated GIF workflow and using Gifsicle. I tested it again but it doesn't work neither for me anymore in version Sketch 3.4.2. So I realized that I've using old AppStrore version, because Sketch moved away from AppStore a while ago. After updated to new Sketch 3.4.4 version everything works properly. I'm not sure if that was the actual problem, because I remember that I've used GIF exporting before in Sketch already.

Anyway, the right answer lies within the question. Sorry about the confusing but maybe this still helps someone if get stuck with same problem.

Convert PNG to Animated Gif with calling Gifsicle command in code

1 Answers1