said that when it comes to image processing under Nodejs, maybe the first thing is GM. GM can be GraphicsMagic at the bottom and also ImageMagick. Although the two tools themselves are not JS implementations, they need extra installation, but this tool is very common. It may have been installed in the Linux system at the same time, and the installation is also very convenient, so it doesn't need to be abandoned because it is "third party". Although these two softwares are all at the bottom and do not need to be concerned, the author finds that GraphicsMagic must be used in practice, so here is the installation and use of GraphicsMagics.


is installed

GraphicsMagic website:

website and online most of the tutorial is to teach how to compile, can feel can be directly through the software installation, such as

 apt-get install graphicsmagic

if you want to learn to use the command line using the GraphicsMagic can be seen here:

Nodejs GM

gm installation is a node library, so NPM

 NPM install can be installed gm

official documents:

gm circular cutting principle It is the encapsulation of GraphicsMagic, so in theory, some of the functions of GraphicsMagic can be implemented in the form of GM through the interface. GM itself does not support round cutting (at least I do not know how to do it), which also means that the bottom is not directly supported. The commonly used functions of

gm are: scaling, square cutting, and format conversion.

. So the core of the circular clipping of this tutorial is to build a circular picture by SVG with SVG and transform it into PNG through GM, that is, using SVG to transform picture format.

SVG can achieve circular picture cutting, found on the Internet there are two ways to achieve circular cutting

1, a circular path defined by clip-path

, and then set the clip-path in the picture of style, also is through this image clipping, the theory is the true meaning of the "cut"

 < 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 clip-path can look at the

tutorial is such a configuration in the browser without the slightest question The question is, but it is found that after converting to PNG through GM, style has no effect or square.


 < with the circle tag; 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> 

to define a pattern, that is the original picture, and then create a circular, and just fill in this definition can be circular inside.

synthetic picture principle

understand the principle of the cutting, synthesis becomes simple. The images that you want to be synthesized can be pieced together in a SVG way. Although GM itself supports picture synthesis, uses compose or mosaic (see this tutorial), it doesn't feel better than SVG.

SVG the author attempts to add text, but cannot be found in text recognition, so still can only use GM to add, add to set the font (see next chapter code)

if you want to embed a two round picture in a picture, you need to set up two pattern, then there is a

  1. pattern experience:

    X and Y is set to 0, 0
  2. pattern and width height and
  3. image set the canvas x y is set to the actual position, is corresponding to circle cx-r and cy-r r for CX, shear and CY refers to the circular center, and X, y is the angular position of the upper left figure.

 const GM code ('gm') = require 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 = 10 fs.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})})}) all above is the 

, we hope to learn I hope you can support the scripting home.

you may be interested in the article:

This paper fixed link: | Script Home | +Copy Link

Article reprint please specify:Examples of using GM round clipping and synthesizing pictures under Nodejs | Script Home

You may also be interested in these articles!