头像裁剪 - gm图片处理包笔记
发布于 9 个月前 作者 NanShanJi 1457 次浏览 来自 分享

运行效果截图 (页面写的时候只用的 chrome 浏览器，IE9-不兼容) 1.gif

首先安装 GraphicMagick 或者 imageMagick (软件)

通过npm安装 gm 包

npm install gm

引入包

var fs = require(‘fs’); var gm = require(‘gm’);

以下列子中的 1.jpg 的图片属性为

  • 宽 3600 高 5400 大小 2.1M

var path = ‘./1.jpg’;

删除文件的一些配置信息 作者，拍摄日期，程序名称等一些信息

gm(path).noProfile();

调整图片大小

宽度为固定200，高度保持纵横比

gm(path).resize(200); // 200 * 300

高度为固定200，宽度保持纵横比

gm(path).resize(null, 200); // 133 * 200

两个值时以值小的为固定，值大的为纵横比

gm(path).resize(300, 200); // 133 * 200 gm(path).resize(200, 400); // 200 * 300

强制调整到指定大小

gm(path).resize(150, 160, ‘!’); // 150 * 160

按百分比调整图片大小 调整到原图的 50%

gm(path).resize(50, ‘%’); // 1800 * 2700

当图片大于 500 时进行调整

gm(path).resize(500, ‘>’); // 500 * 750

当图片小于 3700 时进行调整

gm(path).resize(3700, ‘<’); // 3700 * 5550 可以看出上面两个都是以宽度固定，高度自适应。

高度固定，宽度自适应

gm(path).resize(null, 3000, ‘>’); // 2000 * 3000

当图片 < | > 时 强制调整图片

gm(path).resize(2500, 3000, ‘>!’); // 2500 * 3000

获取图片的属性

获取图片的宽高

gm(path).size(function (err, value){ if (err) throw err; console.log(value); // value = { width: 3600, height: 5400 } })

返回图片的格式(类型)

gm(path).format(function (err, format){ if (err) throw err; console.log(format); // format = JPEG })

返回颜色的数量

gm(path).color(function (err, color){ if (err) throw err; console.log(color); // color = 154098 })

返回图片分辨率

gm(path).res(function (err, res){ if (err) throw err; console.log(res); // res = 72x72 pixels/inch (像素单位) })

返回图片所占大小

gm(path).filesize(function (err, filesize){ if (err) throw err; console.log(filesize); // filesize = 2.7Mi // 如果是kb的话单位是 2.7Ki // 大小是字节的话 返回值不带单位 27 // 只是举例用，返回什么单位根据图片大小自动带上的 })

返回图片所有信息

gm(path).identify(function (err, identify){ if (err) throw err; // console.log(identify); // 返回的是一个对象 图片全部可用信息 // 路径，大小，像素等 })

图片的编辑

把多张图片从上到下连接在一起

gm(path).append(’./3.jpg’, ‘3.gif’).write(’./a.jpg’, function (err){ if (err) throw err; });

把多张图片从左到右连接在一起

gm(path).append(’./3.jpg’).append(’./3.jpg’).write(’./a.jpg’, function (err){ if (err) throw err; });

增加 append 最后一个参数为 true 也可用做到上到下连接

gm(path).append(’./3.jpg’, ‘./3.jpg’, true).write(’./a.jpg’, function (err){ if (err) throw err; });

指定图片的要保存的位深度

  • 保存的位数越低图片所占内存就越小

gm(path).bitdepth(8).write(’./b.jpg’, function (err){ if (err) throw err; });

模糊图片

  • 参一模糊半径，参二标准模糊差

gm(path).blur(100, 200).write(’./bt.jpg’, function (err){ if (err) throw err; });

设置图片的边框

  • 参一为左右边框的宽度
  • 参二为上下边框的宽度
  • 默认边框颜色是米色

gm(path).border(100,40).write(’./bt.jpg’, function (err){ if (err) throw err; });

设定边框的颜色

gm(path).borderColor(’#000000’).border(100,40).write(’./bt.jpg’, function (err){ if (err) throw err; });

提取通道

  • 通道值有Red，Green，Blue，Opacity，Matte，Cyan，Magenta，Yellow, Black, Gray
  • 使用 Gray 可以获得黑白照

gm(path).channel(‘Black’).write(’./bt.jpg’, function (err){ if (err) throw err; });

创建一个简单的素描效果

  • 参数允许接收一个值 值越大效果越浓厚。
  • 默认不给值的效果就蛮好看的

gm(path).charcoal(10).write(’./bt.jpg’, function (err){ if (err) throw err; });

移除图片像素

  • 参一 从左到右需要移除的宽度
  • 参二 从上到下需要移除的高度
  • 原图尺寸 3600 * 5400 各自移除1000后得 2600 * 4400
  • 参三四 指的是偏移量 感觉没什么大的用途，可以省略的

gm(path).chop(1000, 1000, 300, 300).write(’./bt.jpg’, function (err){ if (err) throw err; });

使用指定的 r, g, b 参数来给 图片进行上色

gm(path).colorize(30, 45, 200).write(’./bt.jpg’, function (err){ if (err) throw err; });

设置图片的色彩类型

  • 常用的色彩类型有 RGB，CMYK，灰度(Gray)

gm(path).colorspace(‘GRAY’).write(’./bt.jpg’, function (err){ if (err) throw err; });

增加或者减少图片对比度

  • 使用 ±值来表示 增加或减少

gm(path).contrast(-5).write(’./bt.jpg’, function (err){ if (err) throw err; });

裁剪图片

  • 参一参二 为裁剪后的图片尺寸大小
  • 参三参四 为对应要裁剪图片的 x,y 偏移量

gm(path).crop(2000, 2000, 100, 100).write(’./bt.jpg’, function (err){ if (err) throw err; });

将图片转换成单色(黑白)

gm(path).monochrome().write(’./bt.jpg’, function (err){ if (err) throw err; });

旋转图片

  • 参一 图片背景颜色，四周三角形的留空(90度不会有)
  • 参二 旋转多少度 选填 <|> (< 当宽度小于高度时旋转, > 当宽度大于高度的时候旋转)

gm(path).rotate(‘black’, ‘50>’).write(’./bt.jpg’, function (err){ if (err) throw err; });

缩放图片

  • 实际和 resize 一样， 也可以使用 ‘!@<>’ 写在参三

gm(path).scale(100, 100).write(’./bt.jpg’, function (err){ if (err) throw err; });

制作文字水印

定义水印颜色

gm(path).fill(‘red’); 定义文字大小 gm(path).fontSize(52); 定义字体 gm(path).font(’./verdana.ttf’); // 需要对应的字体文件 定义字体同时定义大小 gm(path).font(’./verdana.ttf’, 50);

绘制文字

  • 参一, 参二 将文字绘制到图片中的x，y坐标
  • 参三 需要绘制的文本内容

gm(path).drawText(0, 0, “Message!”)

  • 参四为一个可选项 定义了一些常用的位置
  • NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast

gm(path).drawText(0, 0, “Message!”, ‘Center’)

添加水印例子

gm(path).fill(‘red’).font("./verdana.ttf", 500).drawText(0, 0, “GMagick!”, “center”).write(’./bt.jpg’, function (err){ if (err) throw err; });

2 回复

mark ，谢谢总结

挺全面的啊

回到顶部