精华 【原创分享】Nodejs跨平台轻量级图片编解码库【增加Jpeg质量调整】
发布于 4 年前 作者 yourke 22006 次浏览 最后一次编辑是 3 个月前 来自 分享

Fork me on GitHub

var images = require("images");

images("input.jpg")                     //加载图像文件
    .size(400)                          //等比缩放图像到400像素宽
    .draw(images("logo.png"), 10, 10)   //在(10,10)处绘制Logo
    .save("output.jpg", {               //保存图片到文件,图片质量为50
        quality : 50
	});

Features 功能特性

  • 轻量级:无需安装任何图像处理库。
  • 跨平台:Windows下发布了编译好的.node文件,下载就能用。
  • 方便用:jQuery风格的API,简单可依赖。

Installation 安装

`$ npm install images`

API 接口

node-images 提供了类似jQuery的链式调用API,您可以这样开始:

/* 从指定文件加载并解码图像 */
images(file)

/* 创建一个指定宽高的透明图像 */
images(width, height)

/* 从Buffer数据中解码图像 */
images(buffer[, start[, end]])

/* 从另一个图像中复制区域来创建图像 */
images(image[, x, y, width, height])

.fill(red, green, blue[, alpha])

以指定颜色填充图像 eg:images(200, 100).fill(0xff, 0x00, 0x00, 0.5)

.draw(image, x, y)

在当前图像( x , y )上绘制 image 图像

.encode(type[, config])

以指定格式编码当前图像到Buffer,config为图片设置,目前支持设置JPG图像质量 eg:images("input.png").encode("jpg", {operation:50}) 返回填充好的Buffer 注意:该操作将会切断调用链
参考:.save(file[, type[, config]])

.save(file[, type[, config]])

编码并保存当前图像到 file ,如果type未指定,则根据 file 自动判断文件类型,config为图片设置,目前支持设置JPG图像质量 eg:images("input.png").save("output.jpg", {operation:50})

.size([width[, height]])

获取或者设置图像宽高,如果height未指定,则根据当前宽高等比缩放

.width([width])

获取或设置图像宽度

.height([height])

获取或设置图像高度

images.setLimit(width, height)

设置库处理图片的大小限制,设置后对所有新的操作生效(如果超限则抛出异常)。

65 回复

需要安装 imagemagick 之类的图形软件么?

不需要,直接封装的libpng,jpeglib等图像编解码库,windows下发布的是编译后的文件,不需要再次编译。

这个库真心不错,建议能加上裁剪和另存为指定格式的功能~持续关注

裁减可以通过 copyFromImage(image, x, y, width, height) 来实现; 目前已经支持保存为PNG32位格式,其他格式支持会尽快加上。

为什么是 new images.Image(),以后还会有其他API?

嗯,确实有点不好用,改成类似jQuery的链式调用方式了,也不需要显示的调用new images.Image()了,你看行不。

跟你那个比怎么样?

支持,希望lz多新增些功能,丰富了 ,换用你的

不错, 很实用的功能

增加了调整图片大小的功能,计划再做Jpg格式的编码。还有什么需求呢? @hylin

@yourke 增加其它常用格式当然是必须的,比如jpg,bmp,gif等 另外,能在图片上直接绘制文字,设置图片质量(上传时降低质量减小大小),旋转等等,呵呵

@a272121742 我没做个类似功能的东西啊,我只是做了个生成验证码的

@hylin 嗯,已经做了jpg的编码和质量调整了。其他格式尽快加上,为了保持轻量,绘制文本和高级的图像处理考虑用插件的形式来扩展 ^_^。

编译好的.node文件放在哪个位置?我看到LIB目录下全是JS,不知道要把它摆哪儿才能被 require

就放到 build/Release 下就好。

终于有WIN下可以直接使用的了。。

不过,能加上绘制文字的功能吗?

win7 64 位安装失败… Microsoft Windows [版本 6.1.7601] 版权所有 © 2009 Microsoft Corporation。保留所有权利。

images@1.1.3 install D:\imagestest\node_modules\images node install.js

events.js:72 throw er; // Unhandled ‘error’ event ^ Error: spawn ENOENT at errnoException (child_process.js:975:11) at Process.ChildProcess._handle.onexit (child_process.js:766:34) npm ERR! images@1.1.3 install: node install.js npm ERR! cmd "/c" "node install.js" failed with 8 npm ERR! npm ERR! Failed at the images@1.1.3 install script. npm ERR! This is most likely a problem with the images package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! node install.js npm ERR! You can get their info via: npm ERR! npm owner ls images npm ERR! There is likely additional logging output above.

npm ERR! System Windows_NT 6.1.7601 npm ERR! command “C:\Program Files\nodejs\\node.exe” “C:\Program Files\nod ejs\node_modules\npm\bin\npm-cli.js” “install” "images" npm ERR! cwd D:\imagestest npm ERR! node -v v0.10.4 npm ERR! npm -v 1.2.18 npm ERR! code ELIFECYCLE npm ERR! npm ERR! Additional logging details can be found in: npm ERR! D:\imagestest\npm-debug.log npm ERR! not ok code 0

D:\imagestest>

transparency support?

在ubuntu, macosx上安装出错。缺啥支持包?

$ npm install images
npm http GET https://registry.npmjs.org/images
npm http 200 https://registry.npmjs.org/images
npm http GET https://registry.npmjs.org/images/-/images-1.1.3.tgz
npm http 200 https://registry.npmjs.org/images/-/images-1.1.3.tgz

> images@1.1.3 install /Users/yliu0/dev/node_modules/images
> node install.js

  CXX(target) Release/obj.target/images/src/Image.o
  CXX(target) Release/obj.target/images/src/Png.o
../src/Png.cc:10:10: fatal error: 'png.h' file not found
#include <png.h>
         ^
1 error generated.
make: *** [Release/obj.target/images/src/Png.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2

嗯,支持Alpha透明通道。

非windows平台下依赖 giflib,libjpeg-turbo,libpng,zlib,你可以尝试在MAC下编译一下这些库。

感谢分享!

cenntos5.9报错

images@1.1.3 install /opt/node_modules/images node install.js

gyp http GET http://nodejs.org/dist/v0.10.7/node-v0.10.7.tar.gz gyp http 200 http://nodejs.org/dist/v0.10.7/node-v0.10.7.tar.gz make: Entering directory /opt/node_modules/images/build' CXX(target) Release/obj.target/images/src/Image.o CXX(target) Release/obj.target/images/src/Png.o ../src/Png.cc:10:17: 警告:png.h:没有那个文件或目录 ../src/Png.cc:23: 错误:变量或字段 ‘read_from_memory’ 声明为 void ../src/Png.cc:23: 错误:‘png_structp’ 在此作用域中尚未声明 ../src/Png.cc:23: 错误:‘png_bytep’ 在此作用域中尚未声明 ../src/Png.cc:23: 错误:‘png_size_t’ 在此作用域中尚未声明 ../src/Png.cc:23: 错误:initializer 表达式列表被看作复合表达式 ../src/Png.cc:23: 错误:expected ‘,’ or ‘;’ before ‘{’ token make: *** [Release/obj.target/images/src/Png.o] 错误 1 make: Leaving directory/opt/node_modules/images/build’ gyp ERR! build error gyp ERR! stack Error: make failed with exit code: 2 gyp ERR! stack at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:267:23) gyp ERR! stack at ChildProcess.EventEmitter.emit (events.js:98:17) gyp ERR! stack at Process.ChildProcess._handle.onexit (child_process.js:789:12) gyp ERR! System Linux 2.6.18-348.6.1.el5 gyp ERR! command “node” “/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js” "rebuild" gyp ERR! cwd /opt/node_modules/images gyp ERR! node -v v0.10.7 gyp ERR! node-gyp -v v0.9.5 gyp ERR! not ok npm ERR! weird error 1 npm ERR! not ok code 0

相当棒,收藏了。

非win32平台下依赖 giflib,libjpeg-turbo,libpng 这些库。 ../src/Png.cc:10:17: 警告:png.h:没有那个文件或目录 看样子是缺少头文件,可能需要安装相应的 dev 版本

支持图片的裁剪和缩放吗

另外为什么好多人使用都报错呢, 确定跨平台吗

嗯,支持

var from = images("input.jpg");
images(from, 0, 0, 200, 100) // 从input.jpg复制200x100的矩形区域
    .size(50)                //等比缩放图像到50像素宽
    .save("output.jpg",{     //保存到output.jpg,图片质量为50
        quality : 50
    });

嗯,是跨平台的, win32平台下直接发布了.node库文件无需编译,可以直接使用。 其他平台下需要从源码编译。依赖 giflib,libjpeg-turbo,libpng 这几个库,报错大都是因为环境配置问题。

顶下, 持续关注这个module, 顶起楼主

这个与gm有何不同?看上去挺像的

这个不需要安装 GraphicsMagick 或者 ImageMagick.

@yourke 我还是比较信任GraphicsMagick的,毕竟性能啊各方便都属上乘,安装一下也不难。。。

@yourke ubuntu上找不到这些包

麻烦问下:我从github直接下载,然后node install.js 提示CreateProcessW: 这个,然后就没动静了。。这个是什么问题?

你好我想在我的odroid上使用你这个插件可否给我提供一下帮助,qq370951629

npm install images npm http GET https://registry.npmjs.org/images npm http 304 https://registry.npmjs.org/images

images@1.1.3 install /root/test/node_modules/images node install.js

make: Entering directory /root/test/node_modules/images/build' CXX(target) Release/obj.target/images/src/Image.o CXX(target) Release/obj.target/images/src/Png.o ../src/Png.cc: In function ‘ImageState decodePng(PixelArray*, ImageData*)’: ../src/Png.cc:94: 错误:‘png_const_bytep’在此作用域中尚未声明 make: *** [Release/obj.target/images/src/Png.o] 错误 1 make: Leaving directory/root/test/node_modules/images/build’ gyp ERR! build error gyp ERR! stack Error: make failed with exit code: 2 gyp ERR! stack at ChildProcess.onExit (/usr/local/node/0.10.21/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:267:23) gyp ERR! stack at ChildProcess.EventEmitter.emit (events.js:98:17) gyp ERR! stack at Process.ChildProcess._handle.onexit (child_process.js:789:12) gyp ERR! System Linux 2.6.32-358.6.2.el6.x86_64 gyp ERR! command “node” “/usr/local/node/0.10.21/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js” "rebuild" gyp ERR! cwd /root/test/node_modules/images gyp ERR! node -v v0.10.21 gyp ERR! node-gyp -v v0.10.10 gyp ERR! not ok npm ERR! weird error 1 npm ERR! not ok code 0

请问Linux下如何编译?

可惜只是jpg啊,如果支持比较多的格式就好了

png,gif等

好像我断章取义了,貌似是可以用于png之类的?这我到时候得研究研究,说不定能弄到项目的资源服务中。

希望加入文字水印 这样才比较完善

顶一个 绘制文字 功能

@yourke 顶一个 绘制文字 功能

依然木有配置成功.

同centos5.9,那些包我似乎都装了.

F:\nodejs\letu>npm install npm http GET https://registry.npmjs.org/images npm http 304 https://registry.npmjs.org/images

images@1.1.3 install F:\nodejs\letu\node_modules\images node install.js

events.js:72 throw er; // Unhandled ‘error’ event ^ Error: spawn ENOENT at errnoException (child_process.js:980:11) at Process.ChildProcess._handle.onexit (child_process.js:771:34) npm ERR! weird error 8 npm ERR! not ok code 0

windows平台安装报错,现在这个包还在维护吗?
E:\story>npm install images

npm http GET https://registry.npmjs.org/images

npm http 304 https://registry.npmjs.org/images

images@1.1.3 install E:\story\node_modules\images

node install.js

events.js:72

    throw er; // Unhandled 'error' event

          ^

Error: spawn ENOENT

at errnoException (child_process.js:988:11)

at Process.ChildProcess._handle.onexit (child_process.js:779:34)

npm ERR! images@1.1.3 install: `node install.js
npm ERR! Exit status 8

npm ERR!

npm ERR! Failed at the images@1.1.3 install script.

npm ERR! This is most likely a problem with the images package,

npm ERR! not with npm itself.

npm ERR! Tell the author that this fails on your system:

npm ERR! node install.js

npm ERR! You can get their info via:

npm ERR! npm owner ls images

npm ERR! There is likely additional logging output above.

npm ERR! System Windows_NT 6.1.7601

npm ERR! command “C:\Program Files\nodejs\\node.exe” “C:\Program Files\nod ejs\node_modules\npm\bin\npm-cli.js” “install” “images”

npm ERR! cwd E:\story

npm ERR! node -v v0.10.26

npm ERR! npm -v 1.4.3

npm ERR! code ELIFECYCLE

npm ERR!

npm ERR! Additional logging details can be found in:

npm ERR! E:\story\npm-debug.log

npm ERR! not ok code 0

需要的几个功能木有啊。。。 1.文字。。 2.返回图片流。。

能获取图片的灰度吗

可惜没有像素级的处理接口:(

这个东西需要python2.4以上3.0以下的编译环境

不错啊 现在有文字绘制功能了吗

要是能支持DrawText就好了,就能实现文字水印了

看了readme最终也没有明白此API是否基于promise,尝试调用then告诉我不支持,貌似也没有提供支持回调方法,望楼主详细说明呀

@wanglihui 不是基于 promise 的,这个库的所有方法基本都是同步的。如果要实现异步读取和保存文件,可以这样

//异步读取
fs.readFile("a.jpg", function(data){
    var img = image(data);
	// img.XXXX()
	
	var saveData = img.encode("jpg", {operation:50});
	//异步写入
	fs.writeFile("b.jpg", saveData, function(){
	    //写入完成的回调
	});
});

楼主,请问这个库还在更新吗,我正好需要一个

@stepjacky 在啊。 49 downloads in the last day 370 downloads in the last week 1,110 downloads in the last month

支持楼主!好东西收藏了 发自 CNodeJs ionic

支持水印吗

这个东西太好了,我用在项目里,不过出现一个问题,请楼主解惑 @yourke 我部署到不能联网的机器上时,发现启动网站报错,说需要下载一个dll,我是winserver2003 请问这个文件能否离线下好后直接用,由于安全原因客户那里不允许上网!

咦,可以用来加水印,mark。

压缩完之后。。保存。方向为什么改变了呢?。。就是本来应该是长816,宽612,。。。但是save之后。。反了

为什么会有 锯齿?怎么取消锯齿呢

回到顶部