Nodejs下使用gm圆形裁剪并合成图片的示例


Posted in NodeJs onFebruary 22, 2018

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

GaphicsMagic 安装

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

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

apt-get install graphicsmagic

如果要学习用命令行的方式使用GraphicsMagic可以看这里:https://3water.com/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,这时有个经验:

  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
    })
  })
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
nodejs教程之异步I/O
Nov 21 NodeJs
nodejs实现遍历文件夹并统计文件大小
May 28 NodeJs
nodejs创建web服务器之hello world程序
Aug 20 NodeJs
Nodejs高扩展性的模板引擎 functmpl简介
Feb 13 NodeJs
nodejs中使用HTTP分块响应和定时器示例代码
Mar 19 NodeJs
nodejs利用ajax实现网页无刷新上传图片实例代码
Jun 06 NodeJs
手把手教你把nodejs部署到linux上跑出hello world
Jun 19 NodeJs
详解HTTPS 的原理和 NodeJS 的实现
Jul 04 NodeJs
详解nodejs的express如何自动生成项目框架
Jul 12 NodeJs
nodeJS服务器的创建和重新启动的实现方法
May 12 NodeJs
Nodejs对postgresql基本操作的封装方法
Feb 20 NodeJs
nodejs简单抓包工具使用详解
Aug 23 NodeJs
nodejs微信扫码支付功能实现
Feb 17 #NodeJs
nodejs+express搭建多人聊天室步骤
Feb 12 #NodeJs
nodeJs实现基于连接池连接mysql的方法示例
Feb 10 #NodeJs
NodeJS简单实现WebSocket功能示例
Feb 10 #NodeJs
nodejs使用redis作为缓存介质实现的封装缓存类示例
Feb 07 #NodeJs
nodejs中Express与Koa2对比分析
Feb 06 #NodeJs
nodejs实现的连接MySQL数据库功能示例
Jan 25 #NodeJs
You might like
信用卡效验程序
2006/10/09 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
PDO::commit讲解
2019/01/27 PHP
Javascript 去除数组的重复元素
2010/05/04 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
pyqt和pyside开发图形化界面
2014/01/22 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
Django 反向生成url实例详解
2019/07/30 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
Python @property装饰器原理解析
2020/01/22 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
董事长岗位职责
2013/11/30 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
《学棋》教后反思
2014/04/14 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
瘦西湖导游词
2015/02/03 职场文书
学习与创新自我评价
2015/03/09 职场文书
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers
MySQL 开窗函数
2022/02/15 MySQL