Nodejs下使用gm圆形裁剪并合成图片的示例
说到Nodejs下的图片处理可能第一想到就是gm，gm底层可以是GraphicsMagic（其实也是gm的由来），也可以是ImageMagick（其实GraphicsMagic本身也是从ImageMagic分割而来，现在独立了）。虽然这两个工具本身都不是js实现，所以需要额外安装，不过此工具非常常见，可能已经预装在linux系统下，而且安装也很方便，所以不用因为看到是“第三方”就放弃。虽然说这两个软件都只是底层，无需关心，可笔者在实践中发现必须得用GraphicsMagic，所以这里就只介绍GraphicsMagics的安装与使用。
GaphicsMagic 安装
GraphicsMagic 官网是： http://www.graphicsmagick.org/
官网和网上大多数教程都是教如何编译，可个人觉得可以直接通过软件库安装，比如
apt-get install graphicsmagic
如果要学习用命令行的方式使用GraphicsMagic可以看这里：https://www.jb51.net/LINUXjishu/120332.html
Nodejs下的gm安装
gm是一个node库，所以可用npm安装
npm install gm
官方文档： http://aheckmann.github.io/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，这时有个经验：
- pattern的x和y设置为0，0
- pattern的width和height设置的和 画布 一样
- 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
})
})
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在开发中我们有时候需要每隔 一段时间发送一次电子邮件，或者在某个特定的时间进行发送邮件，无需手动去操作，基于这样的情况下我们需要用到了定时任务。本文就来用Express实现定时发送邮件吧2023-04-04
在本篇文章里小编给大家整理了一篇关于Node.js 缓冲区（Buffer）模块的方法及实例分析，对此有兴趣的朋友们可以跟着学习下。2022-01-01
这篇文章主要介绍了node.js中的path.basename方法使用说明,本文介绍了path.basename的方法说明、语法、使用实例和实现源码,需要的朋友可以参考下2014-12-12
这篇文章主要为大家详细介绍了nodejs和php分别实现图片访问实时处理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了Node.js完整实现一个博客系统的流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
nodejs 实现MQTT协议的服务器端和客户端的双向交互的过程
这篇文章主要介绍了nodejs 实现MQTT协议的服务器端和客户端的双向交互的过程,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
这篇文章主要介绍了Nodejs文件上传的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
今天小编就为大家分享一篇npm全局模块卸载及默认安装目录修改方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了nodejs基础之多进程,结合实例形式分析了nodejs多进程的概念、原理、相关函数使用方法及操作注意事项,需要的朋友可以参考下2018-12-12
这篇文章主要为大家介绍了ChatGPT编程秀之最小元素的设计示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
最新评论