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入门详解(多篇文章结合)
Mar 07 NodeJs
基于NodeJS的前后端分离的思考与实践(二)模版探索
Sep 26 NodeJs
nodejs实现获取当前url地址及url各种参数值
Jun 25 NodeJs
浅谈Nodejs观察者模式
Oct 13 NodeJs
详解nodejs express下使用redis管理session
Apr 24 NodeJs
NodeJs使用Mysql模块实现事务处理实例
May 31 NodeJs
nodejs 最新版安装npm 的使用详解
Jan 18 NodeJs
nodejs爬虫初试superagent和cheerio
Mar 05 NodeJs
nodejs 日志模块winston的使用方法
May 02 NodeJs
NodeJS加密解密及node-rsa加密解密用法详解
Oct 12 NodeJs
Nodejs模块的调用操作实例分析
Dec 25 NodeJs
Nodejs让异步变成同步的方法
Mar 02 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
PHP伪静态页面函数附使用方法
2008/06/20 PHP
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
xml转json的js代码
2012/08/28 Javascript
JS中表单的使用小结
2014/01/11 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
简单谈谈python的反射机制
2016/06/28 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
一年级班主任寄语
2014/01/19 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
新闻稿格式范文
2015/07/18 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技