In H5 applications, sometimes some image processing operations are involved. Nodejs has a good background image processing module, which is called GM. GM has official documents, but I feel that they are too abstract to understand. Here are some common usages for your reference.

Installation

First install < a > graphicsmagick < / a > or < a > ImageMagick < / a >, and then

npm install --save gm

Adjust picture size

gm(\' img.png \')
.size(function (err, size) {
if (!err)
console.log(size.width > size.height ? \'wider\' : \'taller than you\');
});

Image scaling

You can scale width and height only according to width, height or both.

gm(\" img.png \"< / span > < span >) < / span > < span >. < / span > < span > Reset < / span > < span > (< / span > width < span >) < / span > < span > / / maintain aspect ratio
gm(\" img.png \"< / span > < span >) < / span > < span >. < / span > < span > Reset < / span > < span > (< / span > < span > null < / span > < span >, < / span > height < span >) < / span > < span > / / maintain aspect ratio
gm(\" img.png \"< / span > < span >) < / span > < span >. < / span > < span > Reset < / span > < span > (< / span > width < span >, < / span > height < span >, < / span > < span > \ '! \' < / span > < span >) < / span > / / the parameter \ '! \' is used to ignore the aspect ratio

Picture rotation

Rotate the image to degrees and fill the background with color.

gm(\" img.png \").rotate(color, degrees)
gm(\" img.png \").rotate(\'green\', 45)

Image clipping

Starting from the (x, y) position of the image, cut out an image with width and height.

gm(\" img.png \").crop(width, height, x, y)

Mosaic (mosaic)

gm()
.in(\'-page\', \'+0+0\')
.in(\' bg.jpg \')
.in(\'-page\', \'+10+20\') // location of  smallIcon.jpg  is x,y -> 10, 20
.in(\' smallIcon.jpg \')
.mosaic()
.write(\' tesOutput.jpg \', function (err) {
if (err) console.log(err);
});

Picture composition

gm()
.command(\"composite\")
.in(\"-gravity\", \"center\")
.in(change_ image_ url)
.in(base_ image_ url)
.write( output_ file, function (err) {
if (!err)
console.log(\' hooray! \');
else
console.log(err);
});

It’s not clear what’s the difference between mosaic and compose. GM provides two commands. It seems that they can be used for simple image synthesis.

Image mosaic (append)

Using append in GM can also realize image stitching. Different from mosaic and compose, the stitching here should not be covered. The default parameter LTR is the splicing direction, boolean variable, true is from left to right, false is from top to bottom, and the default is false.

gm(\" img.png \").append(img [, img, ltr])
gm(\" img.png \").append(\" another.jpg \", \" third.gif \"< / span > < span >) < / span > < span > / / splicing from top to bottom
gm(\" img.png \").append(\" another.jpg \", \" third.gif \"< / span > < span >, < / span > < span > true < / span > < span >) < / span > < span > / / splicing from left to right

Picture notes

Draw text in the (x, y) position of the picture.

gm(\" img.png \").drawText(10, 50, \"from scratch\")

Create picture

gm(200, 400, \"#ddff99f3\")
.drawText(10, 50, \"from scratch\")
.write(\"/path/to/ brandNewImg.jpg \", function (err) {
// ...
});

summary
GM has a powerful image processing function, nodejs or with the help of GM tools to achieve image processing, for the need for background processing of images, this is very useful.
In fact, the functions provided by GM can be used in combination. That is to say, after reading (GM) images, you can mosaic (mosaic, compose, append), then crop (crop), shrink (size) to the specified size, and finally save (write).
The official document of GM is too simple, and there is not much information about the usage of nodejs GM on the Internet. This paper summarizes some basic usage and learns new continuous updates.
node gm github
Nodejs GM official document
stackoverflow : How to do composite with gm node.js?

Please indicate：Free Editor Online Photoshop » Nodejs image processing tool gm usage