nodejs图片处理工具gm用法小结


Posted in NodeJs onDecember 12, 2018

在做H5应用中,有时候会涉及到一些图片加工处理的操作,nodejs有一个很好的后台图片处理module,就是这里说的gm。gm有官方文档,但感觉写得太抽象,反而看不懂了。这里把一些常见的用法写下,供大家参考。

安装   

首先要安装 GraphicsMagick或者ImageMagick,然后

npm install --save gm

GraphicsMagick和ImageMagick的区别

GraphicsMagick是从ImageMagick中分离出来的,推荐下载ImageMagick

加载GraphicsMagick(大小4.72 MB)

var gm = require('gm')

加载ImageMagick(大小23.8 MB)

var gm = require('gm').subClass({imageMagick: true})// 注意使用的区别

除了加载有区别,其他使用方式完全一样

用法说明

图片尺寸

gm('img.png')
.size(function (err, size) {
 if (!err)
  console.log(size.width > size.height ? 'wider' : 'taller than you');
});

图片伸缩

可以只依据宽、高或者同时将宽高都放缩。

gm("img.png").resize(width)//保持宽高比
gm("img.png").resize(null, height)//保持宽高比
gm("img.png").resize(width, height, '!')//参数'!'用于忽略宽高比

图片旋转

将图片旋转degrees,背景填充color。

gm("img.png").rotate(color, degrees)
gm("img.png").rotate('green', 45)

图片裁剪

从图片的(x, y)位置开始,裁剪出一个宽为width,高为height的图片来。

gm("img.png").crop(width, height, x, y)

图片拼接(mosaic)

gm()
 .in('-page', '+0+0')
 .in('bg.jpg')
 .in('-page', '+10+20') // location of smallIcon.jpg is x,y -> 10, 20
 .in('smallIcon.jpg')
 .mosaic()
 .write('tesOutput.jpg', function (err) {
  if (err) console.log(err);
 });

图片合成(compose)

gm()
.command("composite") 
.in("-gravity", "center")
.in(change_image_url)
.in(base_image_url)
.write( output_file, function (err) {
 if (!err) 
  console.log(' hooray! ');
 else
  console.log(err);
});

不太清楚图片拼接(mosaic)与合成(compose)有什么区别,gm提供了两条命令,对于简单的图片合成,好像都可以使用。

图片拼接(append)

gm中使用append也可以实现图片的拼接,与mosaic、compose不同的是,这里的拼接应该是不能覆盖的。缺省参数ltr表示拼接方向,布尔变量,true表示从左到右,false表示从上到下,默认false。

gm("img.png").append(img [, img, ltr])
gm("img.png").append("another.jpg", "third.gif")//从上到下拼接
gm("img.png").append("another.jpg", "third.gif", true)//从左到右拼接

图片注释

在图片的(x, y)位置绘制文字。

gm("img.png").drawText(10, 50, "from scratch")

创建图片

gm(200, 400, "#ddff99f3")
.drawText(10, 50, "from scratch")
.write("/path/to/brandNewImg.jpg", function (err) {
 // ...
});

总结

gm具有强大的图片处理功能,nodejs还是借助于gm工具来实现的图片处理,对于需要后台处理图片的情形,这个是挺有用的。

gm提供的各个函数其实可以复合使用,就是说,先读取(gm)图片后,可以先进行拼接(mosaic, compose, append),然后裁剪(crop),放缩(resize)到指定大小后,最后才保存(write)下来。

gm的官方文档感觉过于简陋,网上的关于nodejs gm用法的资料也不多,本文将一些基本的用法总结下来,学到到新的持续更新。

另外,欢迎大家总结nodejs gm资料!

附gm参考资料

node gm github

nodejs gm官方文档

stackoverflow : How to do composite with gm node.js?

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

NodeJs 相关文章推荐
NodeJS Express框架中处理404页面一个方式
May 28 NodeJs
使用forever管理nodejs应用教程
Jun 03 NodeJs
Nodejs中使用captchapng模块生成图片验证码
May 18 NodeJs
NodeJS实现图片上传代码(Express)
Jun 30 NodeJs
nodejs开发微信小程序实现密码加密
Jul 11 NodeJs
nodejs之get/post请求的几种方式小结
Jul 26 NodeJs
Nodejs进阶之服务端字符编解码和乱码处理
Sep 04 NodeJs
nodejs项目windows下开机自启动的方法
Nov 22 NodeJs
nodejs微信开发之授权登录+获取用户信息
Mar 17 NodeJs
nodejs对mongodb数据库的增加修删该查实例代码
Jan 05 NodeJs
Nodejs实现WebSocket代码实例
May 19 NodeJs
node快速搭建后台的实现步骤
Feb 18 NodeJs
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
Dec 06 #NodeJs
NodeJs实现简单的爬虫功能案例分析
Dec 05 #NodeJs
nodejs 使用 js 模块的方法实例详解
Dec 04 #NodeJs
使用koa-log4管理nodeJs日志笔记的使用方法
Nov 30 #NodeJs
nodejs 使用nodejs-websocket模块实现点对点实时通讯
Nov 28 #NodeJs
NodeJs 文件系统操作模块fs使用方法详解
Nov 26 #NodeJs
详解从NodeJS搭建中间层再谈前后端分离
Nov 13 #NodeJs
You might like
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
source.php查看源文件
2006/12/09 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
javascript 写类方式之九
2009/07/05 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
Python写入CSV文件的方法
2015/07/08 Python
怎样使用Python脚本日志功能
2016/08/14 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
在keras中实现查看其训练loss值
2020/06/16 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
结婚喜宴主持词
2014/03/14 职场文书
元旦促销方案
2014/03/15 职场文书
自主招生自荐信格式
2015/03/04 职场文书
黄埔军校观后感
2015/06/10 职场文书
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB