在nodejs中使用gm进行合图操作
在nodejs中使用gm进行合图操作
在node.js中，可以通过GraphicsMagic进行图片操作，那么，首先，我们就来安装GraphicsMagic：
参考资料：GraphicsMagick在mac系统上的用brew的装配
这里简单对安装方式进行一下说明
流程如下：
安装jpeg包 brew install libjpeg
安装jasper包 brew install jasper
安装libpng brew install libpng
安装freetype包 brew install freetype
安装GraphicsMagick 自动安装：brew install GraphicsMagick
如果想要重新安装，就把 install 命令换成 reinstall 即可 。
下面开始进行代码逻辑的编写：
首先，引用gm库，然后，定义一个背景图片，暂时就叫做bg.png吧，然后，找到几张图片，放到1个数组中，我这里随便找了一些图片，数据如下：
fileNames = [ '+.png',',.png', '-.png', '0.png', '1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png', '8.png', '9.png', 'W.png', '?.png' ];
这里可以随便设置，只要存在这个图片即可。
然说，找到一张背景图bg.png，我这里找到了一个大小是1x1的黑色图片，然后，通过这个bg.png生成一张bg1.png图片，再把fileNames对应的图片绘制到bg1.png上面。下面附上生成bg1.png的代码逻辑：
var gm = require("gm");
gm("bg.png")
.resize(1024, 1024, "!")
.noProfile()
.write("bg1.png", (error) => {
if (error) {
console.log("背景图生成失败" + error);
return;
}
});
这里的resize，就是说把读取的bg.png图片设置成1024x1024的大小，这个"!"，表示强制设置大小，也就是说，原图片可能会被拉伸。noProfile是移出图片的配置文件，这个，我也说不太清楚。
当这些操作执行完了之后，再直接调用write方法，就可以在同级目录下，生成一张bg1.png图片了。
接下来，我们说一下，怎么把这些图片，合到bg1.png上面，这里，实际上要调用gm的一个draw方法。
如果我们要把1.png绘制到bg1.png上，就执行这个方法就行
var gm = require("gm");
gm("bg1.png")
.draw("image Over 0, 0, 80, 100,'1.png'")
.write("bg1.png", (error) => {
if (error) {
console.log("绘制合图失败");
return;
}
})
这里的.draw是进行绘制操作，然后，这个.write跟上面是一致的，表示生成bg1.png文件。此外，字符串中有5个参数，前面的2个0表示1.png的左上角相对于bg1.png的左上角的x、y坐标，第三个参数80表示图片宽度是80，第4个参数100表示1.png的高度，最后一个参数1.png就不用说了，就是我们要在bg1.png上绘制的那个图片。
如果我们想要把2个图片，绘制到bg1.png上，那么，我们可以按照如下方式操作：
var gm = require("gm");
gm("bg1.png")
.draw("image Over 0, 0, 80, 100,'1.png'")
.draw("image Over 80, 100, 30, 40,'2.png'")
.write("bg1.png", (error) => {
if (error) {
console.log("绘制合图失败");
return;
}
})
那么，有的时候，我们不可能只是想要绘制固定个图片，因此，我们要用下面的方式来实现：
var gm = require("gm");
let fileNames = [ '+.png',',.png', '-.png', '0.png', '1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png', '8.png', '9.png', 'W.png', '?.png' ];
let func = gm("bg1.png");
let x = 0;
let y = 0;
let sizeCount = 0;
let width = 80;
let height = 100;
for (let i = 0; i < fileNames.length; i++) {
let imageName = fileNames[i];
let str = "image Over " + x + ", " + y + ", " + i * width + ", " + i * height + ",'" + imageName + "'";
x += width;
y += height;
func.draw(str);
}
func.write("bg1.png", (error) => {
if (error) {
console.log("绘制合图失败");
return;
}
})
这样写的，就相当于是我们先获取了gm(“bg1.png”)这个方法，将他赋给func
let func = gm("bg1.png");
然后，再反复执行 func.draw(drawStr)方法，依次将图片绘制到bg1.png上，直到最后1个绘制完成之后，再执行func.write()方法。
到这里，基本上算是实现了我们的一个阶段性目标。但是，还有一个严重的问题，我们不可能每次在执行操作的时候，都提前知道图片的大小，所以，最好是能动态计算图片大小，然后动态填充，这样更合理一些。下面给出计算图片大小的处理方式：
gm("1.png")
.size((error, size) => {
console.log("w=" + size.width + " h=" + size.height);
});
这样就获取到了图片的宽度。但是，获取图片大小，是个异步回调，因此，这里考虑等待所有的图片的size都计算好了之后，才做合图操作。
var fileNames = [ '+.png',',.png', '-.png', '0.png', '1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png', '8.png', '9.png', 'W.png', '?.png' ];
var fileSizes = [];
// 计算图片的大小
function foreachDrawImage() {
let sizeCount = 0;
for (let i = 0; i < fileNames.length; i++) {
let imageName = fileDir + "/" + fileNames[i];
gm(imageName)
.size((error, size) => {
fileSizes[i] = size;
sizeCount += 1;
// 所有图片的大小都计算完了，才去绘制图片，并生成fnt文件
if (sizeCount == fileNames.length) {
drawImage();
}
});
}
}
// 绘制图片
function drawImage() {
let func = gm("bg1.png");
let x = 0;
let y = 0;
let sizeCount = 0;
for (let i = 0; i < fileNames.length; i++) {
let imageName = fileNames[i];
let size = fileSizes[i];
let str = "image Over " + x + ", " + y + ", " + size.width + ", " + size.height + ",'" + imageName + "'";
x += size.width;
y += size.height;
func.draw(str);
}
func.write("bg1.png", (error) => {
if (error) {
console.log("绘制合图失败");
return;
}
})
}
最后，生成的图片效果图如下：
