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

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

npm install --save gm
1
用法说明
图片尺寸

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资料!

http://aheckmann.github.io/gm/docs.html

http://www.graphicsmagick.org/GraphicsMagick.html

最新文章

  1. js屏幕尺寸 笔记
  2. [SharePoint 2007/2010]Query SharePoint Calendar Event
  3. selenium之 定位以及切换frame(iframe)
  4. SQL 报错信息整理及解决方案(持续更新)
  5. laravel, Composer和autoloading
  6. dublin core实例
  7. android开发之Parcelable使用详解
  8. 多文件工程的编译-Makefile的简便写法
  9. OAthe2 Login use OkHttpClient and OAuth2RestTemplate
  10. oracle 修改数据文件路径
  11. Eclipse下egit插件的使用
  12. Logstash读取Kafka数据写入HDFS详解
  13. chrome插件的开发
  14. 数独_erlang解题代码
  15. SQLI DUMB SERIES-3
  16. pyinstaller linux系统下打包python源文件
  17. curl 详解【转】
  18. Spring Boot 踩坑之路之 Configuration Annotation Proessor not found in classpath
  19. LODOP内嵌挡住浏览器的div弹出层
  20. 一道非常易错的js面试题

热门文章

  1. Java代码优化总结(持续更新)
  2. Symantec Backup Exec Agent 推送错误Error connecting to the remote computer. Ensure that the computer is available, has WMI enabled and is not blocked by a firewall
  3. Oracle EBS compile PLD PLL files.
  4. EOS之eosio.token合约的部署和发放token
  5. iOS开发创建UI的耗时操作处理
  6. Hello Flask
  7. php配置文件php.ini的详细解析
  8. 使用Razor Generator构建模块化ASP.NET MVC应用程序
  9. aliyun mysql
  10. Spring 的application.properties项目配置与注解