说到Nodejs下的图片处理可能第一想到就是gm，gm底层可以是GraphicsMagic（其实也是gm的由来），也可以是ImageMagick（其实GraphicsMagic本身也是从ImageMagic分割而来，现在独立了）。虽然这两个工具本身都不是js实现，所以需要额外安装，不过此工具非常常见，可能已经预装在linux系统下，而且安装也很方便，所以不用因为看到是“第三方”就放弃。虽然说这两个软件都只是底层，无需关心，可笔者在实践中发现必须得用GraphicsMagic，所以这里就只介绍GraphicsMagics的安装与使用。

GaphicsMagic 安装

GraphicsMagic 官网是： http://www.graphicsmagick.org/

官网和网上大多数教程都是教如何编译，可个人觉得可以直接通过软件库安装，比如

如果要学习用命令行的方式使用GraphicsMagic可以看这里：

官方文档： http://aheckmann.github.io/gm/

圆形剪裁原理

gm是对GraphicsMagic的封装，所以理论上GraphicsMagic有的功能都能通过gm以接口的形式实现。gm本身不支持圆形剪裁（至少笔者不知如何实现），同样意味着其底层也不直接支持。

gm比较常用的功能是：缩放、方形裁剪、格式转换。

所以本教程的圆形裁剪的核心是 借助SVG ，通过svg构建一个圆形的图片，然后通过gm转化为png，即利用svg变换图片格式。

SVG是可以实现圆形图片的裁剪的，网上查到有两种方式实现圆形裁剪

1、通过clip-path

定义一个圆形的路径，然后在图片的style中设置clip-path，也就是通过这个这样实现图片裁剪，理论上是真正意义上的“裁剪”

如果用clip-path可以看这个

可是这样的配置在浏览器上看没有丝毫问题，但是发现通过gm转化为png后，style没有任何效果，还是方形的。

2、通过circle标签

先定义一个图案，也就是原来的图片，然后创建个圆形，并用刚刚定义的图案填充在这个圆形里面即可。

合成图片原理

懂的上述剪裁的原理，合成就变得简单了。直接把想要合成的图片以svg的方式拼凑在一起即可。虽然gm本身支持图片合成，使用compose或者mosaic （详见这个 教程 ）不过感觉不如svg更加明了。

注意笔者尝试通过svg加上文字，不过发现中文字无法被识别，所以仍然只能通过gm添加，添加时需要设置字体（详见下一章代码实现）

如果要在一个大图里嵌入两张圆形的图片，则需要设置两个pattern，这时有个经验：

1. pattern的x和y设置为0，0
2. pattern的width和height设置的和 画布 一样
3. image的x，y设置为其 “实际位置” ，也就是对应 circle 的 cx-r 以及 cy-r ，剪 r 是因为cx和cy指的是圆形中心，而x,y是图形的左上角位置。

代码实现

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。