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调用cmd命令实现复制目录
May 04 NodeJs
nodejs 的 session 简单使用
Jun 06 NodeJs
Nodejs从有门道无门菜鸟起飞必看教程
Jul 20 NodeJs
浅谈Nodejs中的作用域问题
Dec 26 NodeJs
详解nodejs中的process进程
Mar 19 NodeJs
nodejs入门教程二:创建一个简单应用示例
Apr 24 NodeJs
nodejs 搭建简易服务器的图文教程(推荐)
Jul 18 NodeJs
nodejs前端自动化构建环境的搭建
Jul 26 NodeJs
详解Nodejs 通过 fs.createWriteStream 保存文件
Oct 10 NodeJs
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
Nov 01 NodeJs
Nodejs + sequelize 实现增删改查操作
Nov 07 NodeJs
Nodejs实现微信分账的示例代码
Jan 19 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
SMARTY学习手记
2007/01/04 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
JS backgroundImage控制
2009/05/19 Javascript
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
英国网上购买门:Direct Doors
2018/06/07 全球购物
校园歌手大赛策划书
2014/01/17 职场文书
《小池塘》教学反思
2014/02/28 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
唐山大地震观后感
2015/06/05 职场文书
白银帝国观后感
2015/06/17 职场文书
公司保密管理制度
2015/08/04 职场文书
德劲DE1102数字调谐收音机机评
2022/04/07 无线电