Nodejs使用sharp图片处理之多图合成

在开发过程中，我们有时候需要对图片进行处理，给一个图片添加水印、多个图片合成为一图片等操作，所以我们介绍下nodejs使用sharp来处理上述问题。
对于上述问题的话，就是多图合并为一个图片，首先我们要知道最终输出画板的宽高，然后里面每一个图片的宽高、在画板的位置【上边距、左边距】、旋转的角度等信息。

 具体信息可以如下所示：
{
    "title": "Sharp合成图片",
    "width": 1960,
    "height": 1208,
    "layers": [
        {
            "url":"1.jpg",
            "left": 0,
            "top": 0,
            "rotate": 0
        },
        {
            "url":"2.jpg",
            "left": 100,
            "top": 500,
            "rotate": 40
        }
    ]
}

在sharp提供的官方文档中提供了composite来进行多图合成，合成的具体步骤如下所示

	// 合成数据
	const data = {
        "title": "Sharp合成图片", // 图片名称
        "width": 1960, // 画板宽度
        "height": 1208, // 画板高度
        "layers": [
            {
                "url":"1.jpg", // 根据地址项目中要能够找到该路径的图片
                "left": 0,
                "top": 0,
                "rotate": 0,
                "blend": "over", // 图片混合模式-如不需指定则不用添加该参数
            },
            {
                "url":"2.jpg",
                "left": 100,
                "top": 500,
                "rotate": 40,
                "blend": "over",
            }
        ]
    }

    // 指定输入文件路径
    const url = `${__dirname}/image/out/${data['title']}.jpg`

    // 组装合成数据
    let info = [];
    for (let i = 0; i < data['layers'].length; i++) {
        info.push({
            input: data['layers'][i]['url'],
            blend: data['layers'][i]['blend'],
            top: data['layers'][i]['top'],
            left: data['layers'][i]['left'],
        });
    }

    // 合成图片
    await sharp({ // 创建画板
        create: {
            data['width'], // 画板宽度
            data['height'], // 画板高度
            channels: 4,
            background: { r: 255, g: 255, b: 255, alpha: 1 } // 画板背景色
        },
    })
        .composite(info)
        .toFile(url);