Como hacer un Crop a un GIF correctamente con GM
La libreria GM disponible para Node es una herramineta de manipulación de imágenes muy sencilla de usar y bastante potente.
Esta libreria usa ImageMagic o Graphicsmagic, nos hemos encontrado con casos que al usar esta libreria tenemos problemas al hacer un crop sobre un gif y siemrpe sale mal, mucha gente tiene este mismo problema, y la solucion es bastante sencilla.
Un Bug es el causante de todos los males en Graphicsmagic
Si estas usando la libreria gm con Graphicsmagic no vas a poder realziar un crop correcto sobre un gif, al parecer Graphicsmagic contiene un bug al realziar este tipo de accioens sobre imagenes GIF.
Para poder realizar un crop de manera correcta sobre una imagen gif vamos a tener que usar esta libreria (GM) con la clase ImageMagic, y vamos a pasarle algunos parametros para que el gif no se descuadre ni contenga rayas o deformaciones que suelen pasar si no se aplican los siguientes parametros.
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('+');
Bien, con este codigo en la mayoria de los casos no tendras ningún problema al redimensionar GIF`s haciendo un crop.
Vamos a explicar un poco que realiza a grandes rasgos cada trozo de codigo para que entendais un poco que es lo que sucede.
const gm = _gm.subClass({ imageMagick: true }); Aqui le estamos diciendo a la libreria que use la clase ImageMagic, esto es necesario dado que como hemos dicho Graphicsmagic contiene un bug ha aplicar la función coalesce.
const imageInstance = gm('/file.gif'); Aqui estamos obteniendo la imagen en uan instancia de la libreria para empezar a trabajar con ella.
Ahora es donde viene lo que arregla casi todo:
imageInstance.coalesce(); Esta función lo que a grandes rasgos le dice a ImageMagic y a Graphicsmagic, es que no use sus optimizadores para mejorar la imagen asi que solo ara lo que le pidamos, de no aplicarle esta función en este orden ademas, la imagen saldra borrosa y veras como si las capas se pegaran unas con otra, desapreceran frames etc.
imageInstance.gravity('Center');
imageInstance.resize(opts.width, opts.height, '^');
imageInstance.crop(opts.width, opts.height);
El codigo anterior lo que realiza es el crop diciendole a ImageMagic que coja el centro de las dimensiones aplicadas en las sigueintes funciones, de esta menra no saldra un lado u otro y saldra lo más exacta posible dentro de lo posible claro, debido al aspect ratio no siempre sera la mejor idea realziar un crop. La funcion resize hace primero un escalado hacia arriba para hacercarnos lo mas posible a las dimensiones que queremos manteniendo el aspect ratio, para luego aplicarle el crop, de esta manera n otenemos que andar calculando el ancho o alto que debemos aplicar y lo hace la libreria automaticamente.
imageInstance.repage('+'); Con esta función le vamos a decir que reordene todos los pixeles puesto que aveces quedan espacios en blanco o en negro, de esta manera la funcion repage los eliminara.
