如何用nodejs给图片添加半透明水印

发布时间：2022-02-23 09:43:06 作者：iii
来源：亿速云阅读：219

如何用Node.js给图片添加半透明水印

在数字时代，图片的使用变得越来越普遍，而保护图片版权和防止未经授权的使用也变得尤为重要。给图片添加水印是一种常见的保护手段。本文将详细介绍如何使用Node.js给图片添加半透明水印。

引言

水印是一种在图片上叠加的可见或不可见的标记，通常用于标识图片的来源或版权信息。半透明水印既能保护图片版权，又不会过度影响图片的视觉效果。本文将使用Node.js和一些常用的图像处理库来实现这一功能。

准备工作

在开始之前，确保你已经安装了Node.js和npm（Node.js的包管理器）。如果还没有安装，可以从Node.js官网下载并安装。

安装必要的依赖

我们将使用sharp库来处理图片。sharp是一个高性能的图像处理库，支持多种图像格式和操作。

首先，创建一个新的Node.js项目并安装sharp：

mkdir image-watermark
cd image-watermark
npm init -y
npm install sharp

加载图片

首先，我们需要加载要添加水印的图片。假设我们有一张名为input.jpg的图片。

const sharp = require('sharp');

async function loadImage() {
    try {
        const image = await sharp('input.jpg').toBuffer();
        return image;
    } catch (error) {
        console.error('Error loading image:', error);
    }
}

创建水印

接下来，我们需要创建水印。水印可以是文本或图片。这里我们以文本水印为例。

async function createWatermark() {
    const width = 200;
    const height = 100;
    const text = 'My Watermark';

    const svg = `
        <svg width="${width}" height="${height}">
            <text x="50%" y="50%" text-anchor="middle" font-size="20" fill="white">${text}</text>
        </svg>
    `;

    const watermark = await sharp(Buffer.from(svg))
        .resize(width, height)
        .toBuffer();

    return watermark;
}

添加水印到图片

现在，我们将水印添加到图片上。我们可以使用sharp的composite方法来实现这一点。

async function addWatermark(image, watermark) {
    try {
        const watermarkedImage = await sharp(image)
            .composite([{ input: watermark, gravity: 'southeast' }])
            .toBuffer();
        return watermarkedImage;
    } catch (error) {
        console.error('Error adding watermark:', error);
    }
}

调整水印透明度

为了使水印半透明，我们可以调整水印的透明度。sharp库允许我们通过设置blend选项来实现这一点。

async function addWatermark(image, watermark) {
    try {
        const watermarkedImage = await sharp(image)
            .composite([{ input: watermark, gravity: 'southeast', blend: 'over', opacity: 0.5 }])
            .toBuffer();
        return watermarkedImage;
    } catch (error) {
        console.error('Error adding watermark:', error);
    }
}

保存处理后的图片

最后，我们将处理后的图片保存到文件中。

async function saveImage(image, outputPath) {
    try {
        await sharp(image).toFile(outputPath);
        console.log(`Image saved to ${outputPath}`);
    } catch (error) {
        console.error('Error saving image:', error);
    }
}

完整代码示例

以下是完整的代码示例，展示了如何加载图片、创建水印、添加水印并保存处理后的图片。

const sharp = require('sharp');
const { Buffer } = require('buffer');

async function loadImage() {
    try {
        const image = await sharp('input.jpg').toBuffer();
        return image;
    } catch (error) {
        console.error('Error loading image:', error);
    }
}

async function createWatermark() {
    const width = 200;
    const height = 100;
    const text = 'My Watermark';

    const svg = `
        <svg width="${width}" height="${height}">
            <text x="50%" y="50%" text-anchor="middle" font-size="20" fill="white">${text}</text>
        </svg>
    `;

    const watermark = await sharp(Buffer.from(svg))
        .resize(width, height)
        .toBuffer();

    return watermark;
}

async function addWatermark(image, watermark) {
    try {
        const watermarkedImage = await sharp(image)
            .composite([{ input: watermark, gravity: 'southeast', blend: 'over', opacity: 0.5 }])
            .toBuffer();
        return watermarkedImage;
    } catch (error) {
        console.error('Error adding watermark:', error);
    }
}

async function saveImage(image, outputPath) {
    try {
        await sharp(image).toFile(outputPath);
        console.log(`Image saved to ${outputPath}`);
    } catch (error) {
        console.error('Error saving image:', error);
    }
}

async function main() {
    const image = await loadImage();
    const watermark = await createWatermark();
    const watermarkedImage = await addWatermark(image, watermark);
    await saveImage(watermarkedImage, 'output.jpg');
}

main();

总结

通过本文的介绍，我们学习了如何使用Node.js和sharp库给图片添加半透明水印。这种方法不仅简单易用，而且性能高效，适合处理大量图片。希望本文能帮助你更好地保护你的图片版权。

如果你有任何问题或建议，欢迎在评论区留言。感谢阅读！