Nodejs下使用gm圆形裁剪并合成图片
Comment说到Nodejs下的图片处理可能第一想到就是gm,gm底层可以是GraphicsMagic(其实也是gm的由来),也可以是ImageMagick(其实GraphicsMagic本身也是从ImageMagic分割而来,现在独立了)。虽然这两个工具本身都不是js实现,所以需要额外安装,不过此工具非常常见,可能已经预装在linux系统下,而且安装也很方便,所以不用因为看到是“第三方”就放弃。虽然说这两个软件都只是底层,无需关心,可笔者在实践中发现必须得用GraphicsMagic,所以这里就只介绍GraphicsMagics的安装与使用。
GaphicsMagic 安装
GraphicsMagic 官网是:http://www.graphicsmagick.org/
官网和网上大多数教程都是教如何编译,可个人觉得可以直接通过软件库安装,比如1
apt-get install graphicsmagic
如果要学习用命令行的方式使用GraphicsMagic可以看这里:http://blog.csdn.net/pzw_0612/article/details/52299776
Nodejs下的gm安装
gm是一个node库,所以可用npm安装1
npm install gm
官方文档:http://aheckmann.github.io/gm/
圆形剪裁原理
gm是对GraphicsMagic的封装,所以理论上GraphicsMagic有的功能都能通过gm以接口的形式实现。gm本身不支持圆形剪裁(至少笔者不知如何实现),同样意味着其底层也不直接支持。
gm比较常用的功能是:缩放、方形裁剪、格式转换。
所以本教程的圆形裁剪的核心是借助SVG,通过svg构建一个圆形的图片,然后通过gm转化为png,即利用svg变换图片格式。
SVG是可以实现圆形图片的裁剪的,网上查到有两种方式实现圆形裁剪
通过clip-path
定义一个圆形的路径,然后在图片的style中设置clip-path,也就是通过这个这样实现图片裁剪,理论上是真正意义上的“裁剪”1
2
3
4
5
6
7
8<svg>
<defs>
<clipPath id="clipPath">
<circle cx="5" cy="5" r="5" />
</clipPath>
</defs>
<image style="clip-path: url(#clipPath);" href="{{icon_img}}" x="0" y="0" width="10" height="10" />
</svg>如果用clip-path可以看这个教程
可是这样的配置在浏览器上看没有丝毫问题,但是发现通过gm转化为png后,style没有任何效果,还是方形的。通过circle标签
1 | <svg> |
先定义一个图案,也就是原来的图片,然后创建个圆形,并用刚刚定义的图案填充在这个圆形里面即可。
合成图片原理
懂的上述剪裁的原理,合成就变得简单了。直接把想要合成的图片以svg的方式拼凑在一起即可。虽然gm本身支持图片合成,使用compose或者mosaic (详见这个教程)不过感觉不如svg更加明了。
注意 笔者尝试通过svg加上文字,不过发现中文字无法被识别,所以仍然只能通过gm添加,添加时需要设置字体(详见下一章代码实现)
如果要在一个大图里嵌入两张圆形的图片,则需要设置两个pattern,这时有个经验:
- pattern的x和y设置为0,0
- pattern的width和height设置的和画布一样
- image的x,y设置为其“实际位置”,也就是对应
circle
的cx-r
以及cy-r
,剪r
是因为cx和cy指的是圆形中心,而x,y是图形的左上角位置。
代码实现
1 | const gm = require('gm') |