这篇文章主要介绍了nodejs图片处理工具gm用法小结,详细的介绍了gm的使用,还有图片处理的实例,非常具有实用价值,需要的朋友们下面随着小编来一起学习学习吧

在做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?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
华南厂将出(bu)售(mai)给立讯精密?知情人士:尚未敲定

华南厂将出(bu)售(mai)给立讯精

针对媒体关于欧菲光华南厂将出(bu)售(mai)给立讯精密的消息,知情
罗永浩回应坚果暂停手机业务:坚果没了是好事

罗永浩回应坚果暂停手

罗永浩在个人微博上对坚果暂停手机业务一事作出评论,他
欧菲光被传出(bu)售(mai)华南厂 传闻当事方立讯精密称不知情

欧菲光被传出(bu)售(mai)华南厂

消息面上,当日下午,有媒体报道称,欧菲光华南厂(欧菲光广州
支付宝、微信支付会被拆分吗?监管划了两条垄断红线

支付宝、微信支付会被

央行表示,对于严重影响市场健康发展的第三方支付机构,可
蚂蚁集团保险事业群尹铭离职,曾带领做出相互宝、定损宝

蚂蚁集团保险事业群尹

1月20日,21世纪经济报道记者获悉,蚂蚁集团副总裁、蚂蚁
大润发、盒马旗下两个盒小马“打架”,阿里新零售意欲何为?

大润发、盒马旗下两个

此次大润发收购盒小马全部股权,意味着阿里将盒小马的经
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,