SoFunction
Updated on 2025-03-09

Example of using gm circle cropping and synthesising pictures under Nodejs

When it comes to image processing under Nodejs, the first thing that comes to mind is gm. The underlying layer of gm can be GraphicsMagic (in fact, it is also the origin of gm) or ImageMagick (in fact, GraphicsMagic itself is also divided from ImageMagic and is now independent). Although neither of these two tools themselves are implemented by JS, it requires additional installation, but this tool is very common and may be pre-installed on the Linux system and is also very convenient to install, so you don’t have to give up just because you see it is a "third party". Although both software are only the underlying layer and there is no need to care, the author found in practice that GraphicsMagic must be used, so here we will only introduce the installation and use of GraphicsMagics.

GaphicsMagic Installation

GraphicsMagic's official website is:/

Most tutorials on the official website and online teach how to compile, but I personally think that they can be installed directly through the software library, for example

apt-get install graphicsmagic

If you want to learn to use GraphicsMagic in the command line, you can see here:https:///LINUXjishu/

GM installation under Nodejs

gm is a node library, so it can be installed using npm

npm install gm

Official Documentation:/gm/

Circular cutting principle

gm is an encapsulation of GraphicsMagic, so in theory, some functions of GraphicsMagic can be implemented in the form of an interface through gm. gm itself does not support circular tailoring (at least I don't know how to implement it), which also means that its underlying layer does not directly support it.

The most commonly used functions of gm are: scaling, square cropping, format conversion.

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

SVG can realize the cutting of circular pictures. There are two ways to realize circular cropping on the Internet.

1. Pass clip-path

Define a circular path, and then set clip-path in the picture style, that is, through this, the image crop is realized, which is theoretically the true "cropping"

<svg>
  <defs>
    <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, you can see thisTutorial

However, there is no problem with this configuration in the browser, but it is found that after converting GM to PNG, the style has no effect and is still square.

2. Through the circle tag

<svg>
  <defs>
    <patternpatternUnits="userSpaceOnUse"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 picture, then create a circle, and fill it in the circle with the pattern you just defined.

Synthetic picture principle

If you understand the above principles of tailoring, synthesis becomes simple. Just piece together the pictures you want to synthesize in svg. Although GM itself supports image synthesis, it uses compose or mosaic (see this tutorial for details), it feels not as clear as svg.

Note that the author tried to add text through svg, but found that Chinese characters cannot be recognized, so they can still be added through gm. The font needs to be set when adding (see the code implementation in the next chapter for details)

If you want to embed two circular pictures in a large picture, you need to set two patterns. At this time, you have an experience:

  1. The x and y of the pattern are set to 0, 0
  2. The width and height of the pattern are set the same as the canvas
  3. The x and y of the image are set to its "actual position", that is, cx-r and cy-r of the corresponding circle. The clip r is because cx and cy refer to the center of the circle, while x and y are the upper left corner position of the figure.

Code implementation

const gm = require('gm')
const fs = require('fs')
let templateSVG = "/path/to/"
let outputSVG = "/path/to/"
let input = "/path/to/"
let font = "/path/to/"
let fontColor = "white"
let fontSize = 10

(templateSVG,'utf-8',function(err,data){
  if (err) throw err
  var d = ('{{icon_img}}',input)
  (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 to everyone's study and I hope everyone will support me more.