在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;
        }
    })
}

最后,生成的图片效果图如下:

在nodejs中使用gm进行合图操作_第1张图片

你可能感兴趣的:(游戏开发,nodejs,工具)