Example of using gm circular cropping and merging images in Nodejs, nodejsgm

Example of using gm circular cropping and merging images in Nodejs, nodejsgm

Speaking of image processing under Nodejs, the first thought may be gm. The bottom layer of gm can be GraphicsMagic (in fact, it is also the origin of gm) or ImageMagick (in fact, GraphicsMagic itself is also separated from ImageMagic, it is now independent ). Although neither of the two tools is js implementation, additional installation is required. However, this tool is very common and may have been pre-installed on linux systems and is easy to install, therefore, you don't need to give up because you see it as a "third party. Although the two software are only the underlying layer, I don't need to worry about it. But in practice, I found that GraphicsMagic must be used. So here I will only introduce the installation and use of GraphicsMagics.

Install GaphicsMagic

GraphicsMagic website is: http://www.graphicsmagick.org/

Most tutorials on the official website and on the internet teach you how to compile them. You can install them directly through the software library, such

apt-get install graphicsmagic

If you want to learn how to use GraphicsMagic with command line, you can see here: http://www.bkjia.com/LINUXjishu/120332.html

Install gm under Nodejs

Gm is a node library, so it can be installed with npm

npm install gm

Official documents: http://aheckmann.github.io/gm/

Circular pruning Principle

Gm is the encapsulation of GraphicsMagic. Therefore, in theory, all functions of GraphicsMagic can be implemented through gm in the form of interfaces. Gm itself does not support circular pruning (at least I do not know how to implement it), which also means that it does not support the bottom layer directly.

Common functions of gm are scaling, square cropping, and format conversion.

Therefore, the core of circular cropping in this tutorial is to use SVG to construct a circular image and convert it to png through gm, that is, to use svg to transform the image format.

SVG can crop a circular image. There are two ways to crop a circular image on the Internet.

1. Use clip-path

Define a circular path, and then set clip-path in the image style. This way, image cropping is theoretically "cropping"

<svg>  <defs>    <clipPathid="clipPath">      <circlecx="5"cy="5"r="5"/>    </clipPath>  </defs>  <imagestyle="clip-path: url(#clipPath);"href="{{icon_img}}" rel="external nofollow" rel="external nofollow" x="0"y="0"width="10"height="10"/> </svg>

If you use clip-path, read this tutorial.

However, this configuration does not have any problems in the browser, but it is found that after conversion from gm to png, style is still square.

2. Use the circle label

<svg>  <defs>    <patternpatternUnits="userSpaceOnUse"id="raduisImage"x="0"y="0"width="10"height="10">      <imagehref="{{icon_img}}" rel="external nofollow" rel="external nofollow" x="0"y="0"width="10"height="10"/>    </pattern>  </defs>  <circlecx="5"cy="5"r="5"fill="url(#raduisImage)"></circle></svg>

First define a pattern, that is, the original image, then create a circle, and fill it with the pattern you just defined in the circle.

Principle of merging Images

After understanding the preceding cropping principle, merging becomes simple. Directly splice the image you want to synthesize in svg format. Although gm itself supports image synthesis, the use of compose or mosaic (see this tutorial) is not as clear as svg.

Note: I tried to add text through svg, but found that the Chinese text could not be recognized, so I can only add it through gm, and set the font when adding the text (see the code in the next chapter for details)

If you want to embed two circular images in a large image, you need to set two pattern. In this case, you have an experience:

1. Set x and y of pattern to 0 and 0.
2. The width and height of pattern are the same as those of the canvas.
3. The x and y of the image are set to their "actual locations", that is, the cx-r and cy-r of the circle. The r is cut because cx and cy refer to the circular center, x and y represent the upper left corner of the graph.

Code Implementation

const gm = require('gm')const fs = require('fs')let templateSVG = "/path/to/original.svg"let outputSVG = "/path/to/repalced.svg"let input = "/path/to/icon.png"let font = "/path/to/font.ttf"let fontColor = "white"let fontSize = 10fs.readFile(templateSVG,'utf-8',function(err,data){  if (err) throw err  var d = data.replace('{{icon_img}}',input)  fs.writeFile(outputSVG,d,function(err){    if (err) throw err    gm(outputSVG)    .font(font)    .fill(fontColor)    .fontSize(fontSize)    .drawText(textPosition[0], textPosition[1], text)//    .write(output,function(err){      if(err) cb(err)      // next    })  })})

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.