您提到的水印样式看起来是典型的"今日水印"风格 - 带有日期时间戳和位置信息的图片水印。以下是这种风格的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;
}
#imagePreview {
max-width: 100%;
max-height: 400px;
margin: 20px auto;
display: block;
border-radius: 8px;
}
.controls {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
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;
grid-column: span 2;
}
.download-btn {
background-color: #2196F3;
}
.checkbox-group {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.checkbox-group input {
width: auto;
margin-right: 10px;
}
</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="locationText">位置信息</label>
<input type="text" id="locationText" placeholder="例如: 北京市朝阳区">
</div>
<div class="control-group">
<label for="dateFormat">日期格式</label>
<select id="dateFormat">
<option value="Y年m月d日 H:i:s">2025年07月15日 14:30:22</option>
<option value="Y-m-d H:i:s">2025-07-15 14:30:22</option>
<option value="Y/m/d H:i:s">2025/07/15 14:30:22</option>
</select>
</div>
<div class="control-group">
<label for="textColor">文字颜色</label>
<input type="color" id="textColor" value="#FFFFFF">
</div>
<div class="control-group">
<label for="bgColor">背景颜色</label>
<input type="color" id="bgColor" value="#000000">
</div>
<div class="control-group">
<label for="opacity">透明度 (%)</label>
<input type="range" id="opacity" min="10" max="100" value="70">
</div>
<div class="control-group">
<label for="fontSize">字体大小</label>
<select id="fontSize">
<option value="16">16px</option>
<option value="20" selected>20px</option>
<option value="24">24px</option>
</select>
</div>
<div class="checkbox-group">
<input type="checkbox" id="autoDateTime" checked>
<label for="autoDateTime">自动添加当前日期时间</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="addLogo">
<label for="addLogo">添加右下角logo</label>
</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 locationText = document.getElementById('locationText');
const dateFormat = document.getElementById('dateFormat');
const textColor = document.getElementById('textColor');
const bgColor = document.getElementById('bgColor');
const opacity = document.getElementById('opacity');
const fontSize = document.getElementById('fontSize');
const autoDateTime = document.getElementById('autoDateTime');
const addLogo = document.getElementById('addLogo');
let originalImage = null;
let watermarkedImage = null;
// 初始化位置信息为当前城市(需要用户授权)
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${position.coords.latitude}&lon=${position.coords.longitude}`)
.then(response => response.json())
.then(data => {
if (data.address) {
let location = '';
if (data.address.city) location += data.address.city;
if (data.address.district) location += data.address.district;
locationText.value = location || '未知位置';
}
});
});
}
// 点击上传区域触发文件选择
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);
}
// 格式化日期
function formatDate(format) {
const date = new Date();
const pad = (n) => n.toString().padStart(2, '0');
return format
.replace('Y', date.getFullYear())
.replace('m', pad(date.getMonth() + 1))
.replace('d', pad(date.getDate()))
.replace('H', pad(date.getHours()))
.replace('i', pad(date.getMinutes()))
.replace('s', pad(date.getSeconds()));
}
// 添加水印
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);
// 准备水印文本
let watermarkText = '';
if (locationText.value) {
watermarkText += locationText.value + ' ';
}
if (autoDateTime.checked) {
watermarkText += formatDate(dateFormat.value);
}
if (watermarkText) {
// 设置水印样式
ctx.font = `bold ${fontSize.value}px Arial, "Microsoft YaHei"`;
ctx.fillStyle = bgColor.value;
ctx.globalAlpha = opacity.value / 100;
// 计算文本尺寸
const textMetrics = ctx.measureText(watermarkText);
const textWidth = textMetrics.width;
const textHeight = parseInt(fontSize.value) + 10;
// 水印背景位置(右下角，留10px边距)
const x = canvas.width - textWidth - 20;
const y = canvas.height - textHeight - 10;
// 绘制半透明背景
ctx.fillRect(x - 5, y - (textHeight/2), textWidth + 10, textHeight + 5);
// 绘制文字
ctx.fillStyle = textColor.value;
ctx.fillText(watermarkText, x, y + (textHeight/2));
}
// 添加logo(模拟)
if (addLogo.checked) {
ctx.font = `bold 24px Arial`;
ctx.fillStyle = '#FFFFFF';
ctx.globalAlpha = 0.7;
ctx.fillText('LOGO', canvas.width - 80, canvas.height - 20);
}
// 更新预览
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-' + new Date().getTime() + '.jpg';
link.href = watermarkedImage.src;
link.click();
});
</script>
</body>
</html>
```
### 主要特点
1. **经典今日水印风格**：
- 底部带有日期时间和位置信息的水印
- 半透明黑色背景+白色文字
- 右下角可选的logo区域
2. **实用功能**：
- 自动获取当前位置信息(需用户授权)
- 实时日期时间戳(可自定义格式)
- 多种自定义选项(颜色、透明度、字体大小)
3. **用户体验**：
- 拖拽上传图片
- 实时预览效果
- 一键下载处理后的图片
### 使用方法
1. 上传图片(点击或拖拽)
2. 位置信息会自动尝试获取(可手动修改)
3. 调整水印参数(日期格式、颜色、透明度等)
4. 点击"添加水印"查看效果
5. 满意后点击"下载图片"保存
这个工具完整还原了类似今日水印的样式效果，同时提供了更多自定义选项。如需添加真实的logo，可以在代码中替换为您的logo图片URL。