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的10个性能优化技巧
Jul 15 NodeJs
nodejs教程之制作一个简单的文章发布系统
Nov 21 NodeJs
nodejs实现遍历文件夹并统计文件大小
May 28 NodeJs
nodeJs链接Mysql做增删改查的简单操作
Feb 04 NodeJs
详解nodejs中的process进程
Mar 19 NodeJs
NodeJs实现定时任务的示例代码
Dec 05 NodeJs
NodeJS安装图文教程
Apr 19 NodeJs
Nodejs中怎么实现函数的串行执行
Mar 02 NodeJs
Nodejs中的require函数的具体使用方法
Apr 02 NodeJs
NodeJs crypto加密制作token的实现代码
Nov 15 NodeJs
用Nodejs实现在终端中炒股的实现
Oct 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 skymvc 一款轻量、简单的php
2011/06/28 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
10款实用的PHP开源工具
2015/10/23 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
JavaScript 继承的实现
2009/07/09 Javascript
web前端开发也需要日志
2010/12/09 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
javascript基本常用排序算法解析
2017/09/27 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
Python continue继续循环用法总结
2018/06/10 Python
Python面向对象编程基础实例分析
2020/01/17 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
爽歪歪广告词
2014/03/20 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
大学生作弊检讨书
2014/09/11 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书