JS操作图片的利器：Jimp VS GM

前段时间，笔者有一个项目需求，需要在一张图片上面添加文件，并另存为一张新的图片。刚开始的时候，笔者使用的是大名鼎鼎的jimp。
。

其功能能满足我的要求，而且其license是MIT，不依赖于第三方的可执行程序，纯粹的javascript的实现，目前有6809颗，可以说是相当于受欢迎的，而且在其里面提的任何的问题，其开发人员都会在8个小时内回复我，的的确确在功能上是非常的满意，也满足我的功能需求。比如，下面就是一个示范的代那个码，用来在一张已知的图片上添加特定的文字。

var Jimp = require('jimp');
Jimp.loadFont("C:\\nodejs\\node_modules\\jimp\\fonts\\montserrat\\montserrat-28-white\\montserrat-28-white.fnt").then(function(font) {image.print(font,24, 24, 'Hello Jim').print(font,24, 180, '08/05/2018');Jimp.loadFont("C:\\nodejs\\node_modules\\jimp\\fonts\\open-sans\\open-sans-36-white\\open-sans-36-white.fnt").then(function(font) {Jimp.loadFont("C:\\nodejs\\node_modules\\jimp\\fonts\\montserrat\\montserrat-36-white\\montserrat-36-white.fnt").then(function(font) {image.print(font, 24, 220, 'Welcome Tom')image.print(font, 24, 220, 'Welcome Peter').resize(266,139).write('target.png');});

其还支持各种自己定义的字体。按理来说，其应该功成名就，满足我的要求。但是
等项目完成之后，我才发现，其性能满足不了我的要求，因为我的项目需要在1秒内生成10张左右的带自定义字的图片；使用Jimp，每生成一张图片，要花将近1秒的时间。

后面经过研究，发现gm的效率非常的高。在1秒内完全能够同时生成10张带文字的合成图片。

其Github地址为：https://github.com/aheckmann/gm

从上面看出，其有5225个星，和Jimp得到的赞誉也是不相上下。不过，其是利用javascript调用第三方的可执行程序实现的，所以其效率当然比jimp要快一个数量级。在使用前要安装：GraphicsMagick 或者 ImageMagick

安装完之后，其代码的使用也是非常的简单，下面是其在一张已知的图片上继续添加文字的示范代码。

var fs = require('fs'), gm = require('gm');
let start=new Date().getTime();
gm('\assets\\test.png')
.stroke("#ffffff")
//.drawCircle(10, 10, 20, 10)
.font("Helvetica.ttf", 28)
.drawText(30, 20, "GMagick!")
.write("drawing.png", function (err) {console.log(err)if (!err) console.log('done');let start1=new Date().getTime();console.log("*******",start1-start)
});

是不是带也很简单简洁，不过唯一麻烦一点的就是要装一个第三方的可执行程序：GraphicsMagick 或者 ImageMagick，不过其运行的性能和效率是杠杠的。

好了，夜深了，笔者也要休息了，下次再续！

JS操作图片的利器：Jimp VS GM相关推荐

使用JS操作CSS实现JS改变背景图片
使用JS操作CSS实现JS改变背景图片在写一个后台管理系统的界面时候,想要实现每次刷新界面或者访问界面时候会重新加载一张图片并且每次都不一样,于是乎就去想了个方法去实现它,最终方案是通过js来改变d ...
前端js操作截取/裁剪图片
前端js操作截取/裁剪图片主要使用canvas相关api来实现图片裁剪在vue中使用 <template><div><img :src="imgSrc&qu ...
使用node.js实现图片压缩
1 images模块介绍处理图片往往会遇到图片压缩的问题,使用Windows系统自带的画图软件或者其它图像处理软件一般都能够实现图片的压缩,但是只能是单张处理,如果涉及到大批量的图片压缩的话,一张一 ...
你不知道的JS专栏 - 避免bug利器纯函数
你不知道的JS专栏 - 避免bug利器纯函数目录: 纯函数的概念及基本认识纯函数在实际开发中的使用案例纯函数在框架中的使用, 以及框架中的纯函数思想纯函数的概念及基本认识纯函数定义 - 不依 ...
“是男人就下一百层”h5游戏全网最详细教学、全代码，js操作
"是男人就下一百层"h5游戏全网最详细教学.全代码,js操作博主的话游戏展示编程工具介绍游戏代码代码讲解 js 第一步切换div的显示与隐藏 js 第二步在菜单页面用 ...
JS操作Excel读取和写入（模板操作）
前一段时间一直在做报表,所以肯定会用到Excel的操作,但是在网上查阅资料有关JS操作excel较少,有的话,也都是老生常谈或很零碎的一些东西.本人是在实际项目中摸索出,JS读写Excel(模板)数据 ...
js实现图片上传预览及进度条
js实现图片上传预览及进度条原文js实现图片上传预览及进度条最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
十分钟教会你原生JS压缩图片，极其精简版
十分钟教会你原生JS压缩图片,极其精简版原文链接:https://blog.csdn.net/yasha97/article/details/83629510 (一)实现思路先通过input标签获 ...
2个js实现图片轮播效果（用）
第一个(使用) 不过要注意在web.config中将该location的位置的访问权限设为allow user="*",设置了deny user="?"或&qu ...

JS操作图片的利器：Jimp VS GM

JS操作图片的利器：Jimp VS GM相关推荐

最新文章

热门文章