# 今日水印风格的HTML图片处理工具
以下是一个类似"今日水印"的简单图片处理工具的HTML代码，它允许用户上传图片并添加自定义水印：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易图片水印工具</title>
<style>
body {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
color: #333;
}
.container {
background-color: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
.upload-area {
border: 2px dashed #ccc;
border-radius: 8px;
padding: 30px;
text-align: center;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.3s;
}
.upload-area:hover {
border-color: #4CAF50;
}
#imagePreview {
max-width: 100%;
max-height: 400px;
margin: 20px auto;
display: block;
border-radius: 8px;
}
.controls {
margin: 20px 0;
}
.control-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 6px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 12px 20px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
width: 100%;
margin-top: 10px;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
.download-btn {
background-color: #2196F3;
}
.download-btn:hover {
background-color: #0b7dda;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>简易图片水印工具</h1>
<div class="upload-area" id="uploadArea">
<p>点击或拖拽图片到此处</p>
<p><small>支持 JPG、PNG 格式</small></p>
<input type="file" id="fileInput" accept="image/*" style="display: none;">
</div>
<div id="previewContainer" class="hidden">
<img id="imagePreview" alt="预览图片">
<div class="controls">
<div class="control-group">
<label for="watermarkText">水印文字</label>
<input type="text" id="watermarkText" placeholder="输入水印文字" value="简易水印">
</div>
<div class="control-group">
<label for="fontSize">字体大小</label>
<select id="fontSize">
<option value="16">小</option>
<option value="24" selected>中</option>
<option value="32">大</option>
</select>
</div>
<div class="control-group">
<label for="textColor">文字颜色</label>
<input type="color" id="textColor" value="#000000">
</div>
<div class="control-group">
<label for="opacity">透明度 (%)</label>
<input type="range" id="opacity" min="10" max="100" value="50">
</div>
<div class="control-group">
<label for="position">位置</label>
<select id="position">
<option value="top-left">左上</option>
<option value="top-right">右上</option>
<option value="center">中央</option>
<option value="bottom-left" selected>左下</option>
<option value="bottom-right">右下</option>
</select>
</div>
<button id="addWatermarkBtn">添加水印</button>
<button id="downloadBtn" class="download-btn hidden">下载图片</button>
</div>
</div>
</div>
<script>
// 获取DOM元素
const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('fileInput');
const previewContainer = document.getElementById('previewContainer');
const imagePreview = document.getElementById('imagePreview');
const addWatermarkBtn = document.getElementById('addWatermarkBtn');
const downloadBtn = document.getElementById('downloadBtn');
// 水印控件
const watermarkText = document.getElementById('watermarkText');
const fontSize = document.getElementById('fontSize');
const textColor = document.getElementById('textColor');
const opacity = document.getElementById('opacity');
const position = document.getElementById('position');
let originalImage = null;
let watermarkedImage = null;
// 点击上传区域触发文件选择
uploadArea.addEventListener('click', () => {
fileInput.click();
});
// 拖拽上传
uploadArea.addEventListener('dragover', (e) => {
e.preventDefault();
uploadArea.style.borderColor = '#4CAF50';
});
uploadArea.addEventListener('dragleave', () => {
uploadArea.style.borderColor = '#ccc';
});
uploadArea.addEventListener('drop', (e) => {
e.preventDefault();
uploadArea.style.borderColor = '#ccc';
if (e.dataTransfer.files.length) {
const file = e.dataTransfer.files[0];
if (file.type.match('image.*')) {
handleFile(file);
}
}
});
// 文件选择处理
fileInput.addEventListener('change', (e) => {
if (e.target.files.length) {
handleFile(e.target.files[0]);
}
});
// 处理上传的图片文件
function handleFile(file) {
const reader = new FileReader();
reader.onload = (event) => {
imagePreview.src = event.target.result;
originalImage = new Image();
originalImage.src = event.target.result;
previewContainer.classList.remove('hidden');
};
reader.readAsDataURL(file);
}
// 添加水印
addWatermarkBtn.addEventListener('click', () => {
if (!originalImage) return;
// 创建canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 设置canvas尺寸与图片相同
canvas.width = originalImage.width;
canvas.height = originalImage.height;
// 绘制原始图片
ctx.drawImage(originalImage, 0, 0);
// 设置水印样式
ctx.font = `${fontSize.value}px Arial`;
ctx.fillStyle = textColor.value;
ctx.globalAlpha = opacity.value / 100;
// 计算水印位置
const text = watermarkText.value;
const textWidth = ctx.measureText(text).width;
let x, y;
switch (position.value) {
case 'top-left':
x = 10;
y = parseInt(fontSize.value) + 10;
break;
case 'top-right':
x = canvas.width - textWidth - 10;
y = parseInt(fontSize.value) + 10;
break;
case 'center':
x = (canvas.width - textWidth) / 2;
y = canvas.height / 2;
break;
case 'bottom-left':
x = 10;
y = canvas.height - 10;
break;
case 'bottom-right':
x = canvas.width - textWidth - 10;
y = canvas.height - 10;
break;
}
// 绘制水印文字
ctx.fillText(text, x, y);
// 更新预览
watermarkedImage = new Image();
watermarkedImage.src = canvas.toDataURL('image/png');
imagePreview.src = watermarkedImage.src;
// 显示下载按钮
downloadBtn.classList.remove('hidden');
});
// 下载图片
downloadBtn.addEventListener('click', () => {
if (!watermarkedImage) return;
const link = document.createElement('a');
link.download = 'watermarked-image.png';
link.href = watermarkedImage.src;
link.click();
});
</script>
</body>
</html>
```
## 功能说明
1. **图片上传**：支持点击上传或拖拽上传图片
2. **水印设置**：
- 可自定义水印文字内容
- 调整字体大小（小/中/大）
- 选择文字颜色
- 设置透明度
- 选择水印位置（左上、右上、中央、左下、右下）
3. **预览与下载**：实时预览添加水印的效果并下载处理后的图片
## 使用方法
1. 将上述代码保存为HTML文件
2. 在浏览器中打开该文件
3. 上传需要添加水印的图片
4. 调整水印参数并点击"添加水印"按钮
5. 点击"下载图片"保存处理后的图片
这个工具保留了今日水印的简洁风格，同时提供了基础的水印功能。您可以根据需要进一步扩展功能，如添加多行水印、图片滤镜效果等。