写个给图片加水印的方法

在前端开发中，给图片加水印通常可以通过HTML、CSS和JavaScript来实现。不过，请注意，前端添加的水印可能容易被用户或工具移除。为了更强的保护，通常建议在服务器端进行水印处理。

以下是一个简单的前端JavaScript示例，使用HTML5的Canvas API来给图片添加水印：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片加水印示例</title>
</head>
<body>
    <input type="file" id="imageInput" accept="image/*">
    <canvas id="canvas"></canvas>
    <script>
        const imageInput = document.getElementById('imageInput');
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        imageInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            const reader = new FileReader();
            reader.onload = function(event) {
                const img = new Image();
                img.onload = function() {
                    // 设置canvas大小与图片一致
                    canvas.width = img.width;
                    canvas.height = img.height;
                    // 绘制原始图片
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    // 设置水印文本和样式
                    const watermarkText = 'Watermark';
                    ctx.font = '30px Arial';
                    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'; // 白色半透明
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    // 在图片上绘制水印文本，位置可以根据需要调整
                    ctx.fillText(watermarkText, img.width / 2, img.height / 2);
                };
                img.src = event.target.result; // 设置图片源为读取的文件数据
            };
            reader.readAsDataURL(file); // 读取文件数据为DataURL格式
        });
    </script>
</body>
</html>

这个示例中，我们创建了一个文件输入元素和一个Canvas元素。当用户选择一个图片文件后，我们使用FileReader API读取文件数据，并将其加载到一个Image对象中。然后，我们在Canvas上绘制这个Image对象，并在其上添加水印文本。最后，水印图片会显示在Canvas元素中。

请注意，这个示例只是一个简单的演示，实际应用中可能需要更多的错误处理和优化。另外，前端添加的水印可能不够安全，因此请根据实际情况选择是否使用前端添加水印的方案。

posted @ 2025-01-19 06:06  王铁柱6  阅读(54)  评论(0)    收藏  举报