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

本文介绍如何使用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);

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值