img怎么加水印js

在JavaScript中给图片添加水印可以通过多种方法实现，主要包括使用HTML5的Canvas API、CSS样式和第三方库。这些方法的核心在于灵活性、易用性和兼容性。 以下将详细介绍如何通过这些方法在JavaScript中给图片添加水印。

一、使用HTML5的Canvas API

HTML5的Canvas API提供了强大的图像处理功能，可以用来添加水印。以下是具体步骤：

1.1、创建Canvas元素并加载图片

首先，需要创建一个Canvas元素，并将图片加载到该Canvas中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Watermark</title>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = 'path/to/your/image.jpg';
        img.onload = () => {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
        };
    </script>
</body>
</html>

1.2、添加水印文本

在图片加载完成后，可以在Canvas上绘制水印文本。

img.onload = () => {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    ctx.font = '48px serif';
    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
    ctx.fillText('Watermark Text', 50, 50);
};

1.3、添加图片水印

除了文本水印，还可以添加图片水印。

const watermarkImg = new Image();
watermarkImg.src = 'path/to/your/watermark.png';
watermarkImg.onload = () => {
    ctx.drawImage(watermarkImg, 10, 10, 100, 100);
};

二、使用CSS样式

CSS样式也可以用来实现简单的水印效果，不过这种方法只适用于静态页面，不适用于图像处理。

2.1、创建HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Watermark</title>
    <style>
        .watermarked-image {
            position: relative;
            display: inline-block;
        }
        .watermarked-image img {
            display: block;
        }
        .watermark-text {
            position: absolute;
            top: 10px;
            left: 10px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 48px;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div class="watermarked-image">
        <img src="path/to/your/image.jpg" alt="Image">
        <div class="watermark-text">Watermark Text</div>
    </div>
</body>
</html>

三、使用第三方库

有许多第三方库可以帮助你更方便地添加水印。例如，watermark.js是一个流行的选择。

3.1、安装和使用watermark.js

首先，需要安装watermark.js：

npm install watermarkjs

然后，在你的JavaScript文件中导入并使用它：

import watermark from 'watermarkjs';
watermark(['path/to/your/image.jpg'])
    .image(watermark.text.lowerRight('Watermark Text', '48px serif', 'rgba(255, 255, 255, 0.5)', 0, 0))
    .then(img => document.body.appendChild(img));

四、综合应用实例

结合以上方法，实现一个综合应用实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Watermark</title>
    <style>
        .watermarked-image {
            position: relative;
            display: inline-block;
        }
        .watermarked-image img {
            display: block;
        }
        .watermark-text {
            position: absolute;
            top: 10px;
            left: 10px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 48px;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div class="watermarked-image">
        <canvas id="myCanvas"></canvas>
        <div class="watermark-text">Watermark Text</div>
    </div>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = 'path/to/your/image.jpg';
        img.onload = () => {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            ctx.font = '48px serif';
            ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
            ctx.fillText('Watermark Text', 50, 50);
            const watermarkImg = new Image();
            watermarkImg.src = 'path/to/your/watermark.png';
            watermarkImg.onload = () => {
                ctx.drawImage(watermarkImg, 10, 10, 100, 100);
            };
        };
    </script>
</body>
</html>

通过以上步骤，您可以在JavaScript中为图片添加水印。无论是通过Canvas API、CSS样式，还是第三方库，都能实现不同的水印效果，满足各种需求。