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

最新推荐文章于 2023-10-24 20:30:58 发布

修复BUG中

最新推荐文章于 2023-10-24 20:30:58 发布

阅读量3.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Nodejs 文章标签： node.js

本文链接：https://blog.youkuaiyun.com/qq_37604998/article/details/127325101

Nodejs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Node.js的Sharp库将多张图片合成为一张图片。通过定义画布大小及每张图片的位置与旋转角度，实现复杂图像布局。具体包括创建画布、设置背景颜色、确定各图片坐标等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发过程中，我们有时候需要对图片进行处理，给一个图片添加水印、多个图片合成为一图片等操作，所以我们介绍下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);