Nodejs下使用gm圆形裁剪并合成图片的示例
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
Nodejs下使⽤gm圆形裁剪并合成图⽚的⽰例
说到Nodejs下的图⽚处理可能第⼀想到就是gm,gm底层可以是GraphicsMagic(其实也是gm的由来),也可以是ImageMagick(其实GraphicsMagic本⾝也是从ImageMagic分割⽽来,现在独⽴了)。
虽然这两个⼯具本⾝都不是js实现,所以需要额外安装,不过此⼯具⾮常常见,可能已经预装在linux系统下,⽽且安装也很⽅便,所以不⽤因为看到是“第三⽅”就放弃。
虽然说这两个软件都只是底层,⽆需关⼼,可笔者在实践中发现必须得⽤GraphicsMagic,所以这⾥就只介绍GraphicsMagics的安装与使⽤。
GaphicsMagic 安装
官⽹和⽹上⼤多数教程都是教如何编译,可个⼈觉得可以直接通过软件库安装,⽐如
apt-get install graphicsmagic
Nodejs下的gm安装
gm是⼀个node库,所以可⽤npm安装
npm install gm
圆形剪裁原理
gm是对GraphicsMagic的封装,所以理论上GraphicsMagic有的功能都能通过gm以接⼝的形式实现。
gm本⾝不⽀持圆形剪裁(⾄少笔者不知如何实现),同样意味着其底层也不直接⽀持。
gm⽐较常⽤的功能是:缩放、⽅形裁剪、格式转换。
所以本教程的圆形裁剪的核⼼是借助SVG ,通过svg构建⼀个圆形的图⽚,然后通过gm转化为png,即利⽤svg变换图⽚格式。
SVG是可以实现圆形图⽚的裁剪的,⽹上查到有两种⽅式实现圆形裁剪
1、通过clip-path
定义⼀个圆形的路径,然后在图⽚的style中设置clip-path,也就是通过这个这样实现图⽚裁剪,理论上是真正意义上的“裁剪”
<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>
如果⽤clip-path可以看这个
可是这样的配置在浏览器上看没有丝毫问题,但是发现通过gm转化为png后,style没有任何效果,还是⽅形的。
2、通过circle标签
<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>
先定义⼀个图案,也就是原来的图⽚,然后创建个圆形,并⽤刚刚定义的图案填充在这个圆形⾥⾯即可。
合成图⽚原理
懂的上述剪裁的原理,合成就变得简单了。
直接把想要合成的图⽚以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是图
形的左上⾓位置。
代码实现
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 = 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
})
})
})
以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。