nodejs操作图片

目录

安装相关软件

首先还是需要安装imagemagick和graphicsmagick。我用的是mac，所以用homebrew

brew install imagemagick
brew install graphicsmagick
brew install ghostscript

安装npm包

npm i gm --save

常用操作

加载图片

//graphMagick
const gm = require('gm');
//imageMagick
const gm = require('gm').subClass({imageMagick: true});

设置大小

等比缩放

var imgObj = gm(imagePath).resize(width, height);

固定缩放

let width = 100, height = 100;
var imgObj = gm(imagePath).resize(width, height, "!");

"!"叹号，此时不管原图片比例如何，缩放后的图片大小都是width × height，这样就可能导致图片变形

条件缩放

var imgObj = gm(imagePath).resize(width, height, "<");

可以通过">"或"<"符号来控制原始图片是否进行缩放，例如在处理一批尺寸大小各异的图片，只想把尺寸大于给定的值图片才进行缩小。同时有条件缩放也可以与固定大小缩放联合起来用。

var imgObj = gm(imagePath).resize(width, height, "<!");

在图片上添加文字

添加中文

添加中文需要先加载字体，没找到ImageMagick自带的中文字体，这里就直接使用OSX的默认字体。

const font = "/Library/Fonts/华文黑体.ttf";
let x = 0, y = 0, color = "white";
var imgObj = gm(imagePath).fill(color).font(font,120).drawText(x, y, "硬件百科")

还可以结合gravity去摆放

let x = 100, y = 0, color = "white";
var imgObj = gm(imagePath).fill(color).font(font,120).drawText(x, y, "硬件百科", "North");

gravity支持东南西北，还有东南、西南、东北、西北、还有Center。这时候的偏移量是基本定位后位移。

图片叠加

在图片上面加个头像在右下角可以这样处理

var imgObj = gm(imagePath).composite(headimgPath).gravity("SouthEast").geometry(`+50+50`)

给文字添加圆角背景

思路是先按照文字长度和字体大小计算出背景大小，再把文字放上去

const font = "/Library/Fonts/华文黑体.ttf";
let text = "测试";
let width = text.length * fontSize + fontSize,
    height = fontSize + fontSize,
    margin = fontSize / 2,
    fontSize = 18;
let imgObj = gm(width, height, "none")
    .fill("#FAFAFA").drawRectangle(0, 0 , width , height, margin, margin)
    .fill("black").font(font, fontSize).drawText(margin, margin / 2 + fontSize, text);

输出

有三种输出：保存文件、输出二进制流、输出buffer。

const co = require('co');
const thunkify = require('thunkify');
co(function*(){
    // imgObj就是上面介绍的随便一种操作后的对象
    let buffer = yield thunkify(imgObj.toBuffer).call(imgObj, "PNG");
    yield thunkify(imgObj.write).call(imgObj, filePath);
})

结语

具体建议还是以文档为主

• gm包文档地址：https://www.npmjs.com/package/gm
• nodejs接口地址：http://aheckmann.github.io/gm/docs.html#manipulation

以后有机会再加上其他操作