How to make GIF Crop correctly with GM

3 min read

The GM library available for Nodes is a very simple to use and quite powerful image working tool.

How to make GIF Crop correctly with GM – How To – WebMediums

This library uses ImageMagic or Graphicsmagic, we have found cases that we use this library have problems to make a cut on a gif and siemrpe goes wrong, many people have this same problem, and the solution is quite simple.

An error is the cause of all the males in Graphicsmagic

If you are using the gm library with Graphicsmagic you will not be able to create a correct crop on a gif, it seems that Graphicsmagic contains an error when realizing this type of actions on GIF images.

To be able to make a crop correctly on a gif image we will have to use this library (GM) with the ImageMagic class, and we will pass parameters so that gif does not get out of bounds or contain streaks or deformations that usually happen if they do not apply The following parameters.

import _gm from 'gm';
const gm = _gm.subClass ({imageMagick: true});
const imageInstance = gm ('/ file.gif');
imageInstance.coalesce ();
imageInstance.gravity ('Center');
imageInstance.resize (opts.width, opts.height, '^');
imageInstance.crop (opts.width, opts.height);
imageInstance.repage ('+');

Well, with this code in most cases there is no problem in resizing GIF`s by cropping.

Let's explain a bit that each piece of code is done in broad strokes so that I understand a little what is happening.

const gm = _gm.subClass ({imageMagick: true}); Here we are telling the library to use the ImageMagic class, this is necessary since as we have said Graphicsmagic contains a bug to apply the coalesce function.

const imageInstance = gm ('/ file.gif'); Here we are obtaining the image in an instance of the library to start working with it.

Now is where comes what fixes almost everything:

imageInstance.coalesce (); This is a function that has a large number of images, an image, a magic image, a graphic image, a function that can not be used to optimize the image. If the layers stick with each other, frames will disappear, etc.

imageInstance.gravity ('Center');
imageInstance.resize (opts.width, opts.height, '^');
imageInstance.crop (opts.width, opts.height);

The above code is made by cropping telling you an image that the center of the dimensions is applied to the following functions, this way there is nothing to see and that is as accurate as possible as far as possible clear, due to the aspect ratio No it will always be the best idea to create a crop. The resizing of the function makes it possible to establish an aspect ratio, in this way, in this way, and not to calculate the width or height. automatically

imageInstance.repage ('+'); With this function we are going to tell you to reorder all the pixels since sometimes there are blanks or black spaces, in this way the function of elimination.