nodejs图片处理工具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?

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • node.js版本管理工具n无效的原理和解决方法

    简介 n 是 node 的一个模块,可以用它来管理 node 的各种版本.类似 Python 中的 pyenv 和 Ruby 的 rbenv.n 的作者是著名的TJ大神. 通过 npm 安装 n: $ npm install -g n 查看当前 node 版本: $ node -v v4.2.4 通过 n 安装指定版本: $ n 4.4.4 install : node-v4.4.4 mkdir : /opt/node/n/versions/node/4.4.4 fetch : https://

  • 详解基于node.js的脚手架工具开发经历

    前言 我们团队的前端项目是基于一套内部的后台框架进行开发的,这套框架是基于vue和ElementUI进行了一些定制化包装,并加入了一些自己团队设计的模块,可以进一步简化后台页面的开发工作. 这套框架拆分为基础组件模块,用户权限模块,数据图表模块三个模块,后台业务层的开发至少要基于基础组件模块,可以根据具体需要加入用户权限模块或者数据图表模块.尽管vue提供了一些脚手架工具vue-cli,但由于我们的项目是基于多页面的配置进行开发和打包,与vue-cli生成的项目结构和配置有些不一样,所以创建项目

  • nodejs简单抓包工具使用详解

    nodejs简单抓包工具使用详解

    前言 就是简简单单写程序的我为什么需要抓包? 其实在平时写demo的时候需要用到一些图片和文本的资源的,但是需求量比较大,这个时候就想去网站上面直接复制啊,然后图片另存为啊,什么的一系列繁琐的操作. 但是现在不需要了,你只要看到这篇文章,你就很轻松了.本项目Github地址: https://github.com/xiaoqiuxiong/reptileDemo 1.在你的电脑桌面新建一个reptileDemo文件夹. 然后进入文件夹,然后在改文件夹目录下打开cmd.输入下图所示回车,连续按回车

  • node.js 基于cheerio的爬虫工具的实现（需要登录权限的爬虫工具）

    公司有过一个需求,需要拿一个网页的的表格数据,数据量达到30w左右:为了提高工作效率. 结合自身经验和网上资料.写了一套符合自己需求的nodejs爬虫工具.也许也会适合你的. 先上代码.在做讲解 'use strict'; // 引入模块 const superagent = require('superagent'); const cheerio = require('cheerio'); const Excel = require('exceljs'); var baseUrl = '';

  • 利用n工具轻松管理Node.js的版本

    利用n工具轻松管理Node.js的版本

    前言 相信对于学习Node.js的小伙伴们都知道,现在 Node 的版本更新很快,目前最新稳定版已经更新到 v7.6.0 了,而生产环境一般选择使用 LTS(Long-term Support)版本,目前最新的是 v6.10.0. LTS本地下载:点击这里 新版的 Node 7.x.x 有非常有用的更新,那就是支持了 --harmony-async-await.这样就不用依赖 babel 来使用 async/await 特性了. 但是,如何让 7.x.x 和 LTS 的 6.x.x 并存呢?就需

  • 浅谈node.js 命令行工具(cli)

    一. 先了解一下package.json 每个项目的根目录都有一个 package.json 文件,定义了这个项目所需要的各种模块,以及项目的配置信息,下面是一个比较完整的package.json文件 { "name": "vue-cli", "version": "2.9.3", "description": "A simple CLI for scaffolding Vue.js projec

  • 详解使用 Node.js 开发简单的脚手架工具

    详解使用 Node.js 开发简单的脚手架工具

    前言 像我们熟悉的 vue-cli,react-native-cli 等脚手架,只需要输入简单的命令 vue init webpack project,即可快速帮我们生成一个初始项目.在实际工作中,我们可以定制一个属于自己的脚手架,来提高自己的工作效率. 为什么需要需要脚手架? 减少重复性的工作,不再需要复制其他项目再删除无关代码,或者从零创建一个项目和文件. 根据交互动态生成项目结构和配置文件等. 多人协作更为方便,不需要把文件传来传去. 思路 要开发脚手架,首先要理清思路,脚手架是如何工作的

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

    在做H5应用中,有时候会涉及到一些图片加工处理的操作,nodejs有一个很好的后台图片处理module,就是这里说的gm.gm有官方文档,但感觉写得太抽象,反而看不懂了.这里把一些常见的用法写下,供大家参考. 安装 首先要安装 GraphicsMagick或者ImageMagick,然后 npm install --save gm GraphicsMagick和ImageMagick的区别 GraphicsMagick是从ImageMagick中分离出来的,推荐下载ImageMagick 加载G

  • iOS中UIImagePickerController图片选取器的用法小结

    UIImagePickerController用于管理可自定义的,系统支持的用于获取设备上图片和视频的用户界面.同时可以用于在App中选择存储的图片和视频.一个UIImagePickerController管理用户交互并且将这些交互结果传递给一个代理对象.该类不能被继承和修改,除了自定义cameraOverlayView外. 先简单讲解下UIImagePickerController的一些属性,再上代码. 一.常用属性 (1)sourceType 控制器展示的选择界面的类型, 包含三个枚举值 复

  • Android开发之图片切割工具类定义与用法示例

    本文实例讲述了Android开发之图片切割工具类定义与用法.分享给大家供大家参考,具体如下: 该工具类比较常见于拼图游戏中使用.这里演示了类基本的定义与使用方法. 图片切割工具类定义: public class ImageSplitter { /** * 将图片切成 , piece *piece * * @param bitmap * @param piece * @return */ public static List<ImagePiece> split(Bitmap bitmap, in

  • C#邮件定时群发工具Atilia用法实例

    C#邮件定时群发工具Atilia用法实例

    本文实例讲述了C#邮件定时群发工具Atilia用法.分享给大家供大家参考.具体如下: 一.Atilia可以做什么 Atilia是一个基于命令行的C#程序,可以发送邮件给一个或多个人.Atilia通过QQ的SMTP服务发送邮件,可以发送附件,可以在配置文件中手动配置收信人. 二.运行Atilia需要什么 在Atilia应用程序的同一目录下,有如下文件 1)一个Attachments文件夹,Atilia会将里面所有的子文件(不含子文件夹及其中文件)视作附件发送给收信人 2)AddressBook.x

  • PHP实现可添加水印与生成缩略图的图片处理工具类

    PHP实现可添加水印与生成缩略图的图片处理工具类

    本文实例讲述了PHP实现可添加水印与生成缩略图的图片处理工具类.分享给大家供大家参考,具体如下: ImageTool.class.php <?php class ImageTool { private $imagePath;//图片路径 private $outputDir;//输出文件夹 private $memoryImg;//内存图像 public function __construct($imagePath, $outputDir = null) { $this->imagePath

  • Android图片处理工具类BitmapUtils

    Android图片的处理工具类BitmapUtils,供大家参考,具体内容如下 项目中经常会用到图片,所以在这先简单的总结一下.闲言少叙,上代码. package com.lvstudio.myapp.utils; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import

  • Python切片工具pillow用法示例

    本文实例讲述了Python切片工具pillow用法.分享给大家供大家参考,具体如下: 切片:使用切片将源图像分成许多的功能区域 因为要对图片进行切片裁剪,所以用到切片工具必不可少,在ubuntu下有很多的图片处理工具,如 GIMP(Ubuntu的下的Photoshop),shotwell,shotter等等. 但是我想吧一张图片剪裁下来,用那些工具不怎么方便(其实可能是我没有找到而已),于是上网搜索资料,发现各式各类的工具,其中发现了pollow这款工具. 算是Python下的一个模块吧,这个模

  • C++语言中std::array的用法小结(神器用法)

    摘要:在这篇文章里,将从各个角度介绍下std::array的用法,希望能带来一些启发. td::array是在C++11标准中增加的STL容器,它的设计目的是提供与原生数组类似的功能与性能.也正因此,使得std::array有很多与其他容器不同的特殊之处,比如:std::array的元素是直接存放在实例内部,而不是在堆上分配空间:std::array的大小必须在编译期确定:std::array的构造函数.析构函数和赋值操作符都是编译器隐式声明的--这让很多用惯了std::vector这类容器的程

  • linux shell 解析命令行参数及while getopts用法小结

    目录 linux shell 解析命令行参数|getpots getpots linux shell 解析命令行参数|getpots demo: #!/bin/bash func() { echo "Usage:" echo "test.sh [-j S_DIR] [-m D_DIR]" echo "Description:" echo "S_DIR,the path of source." echo "D_DIR,

  • Node.js打包管理工具NPM用法

    目录 一.NPM使用介绍 二.NPM全局安装和本地安装 本地安装: 全局安装: 本地安装与全局安装命令: 三.npm安装package.json 四.npm安装模块 五.模块的其他操作 六.版本号 七.npm常用命令 八.使用淘宝的npm镜像 九.安装报错 一.NPM使用介绍 NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: (1)允许用户从NPM服务器下载别人编写的第三方包到本地使用. (2)允许用户从NPM服务器下载并安装别人编

随机推荐