<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片转BASE64</title>
<style>
body {
max-width: 800px;
margin: 20px auto;
padding: 0 20px;
font-family: Arial, sans-serif;
}
.container {
border: 2px dashed #ccc;
padding: 20px;
text-align: center;
margin-bottom: 20px;
}
#result {
word-break: break-all;
background: #f5f5f5;
padding: 10px;
margin-top: 20px;
border: 1px solid #ddd;
}
.btn {
background: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn:hover {
background: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>图片转BASE64工具</h2>
<input type="file" id="fileInput" accept="image/*">
<!-- 新增水印设置 -->
<div style="margin: 10px 0;">
<input type="text" id="watermarkText" placeholder="自定义水印文字（默认显示时间）" style="padding: 5px;">
<input type="color" id="watermarkColor" value="#ff0000">
<select id="watermarkPosition">
<option value="topRight">右上角</option>
<option value="center">居中</option>
<option value="bottomRight">右下角</option>
<option value="bottomLeft">左下角</option>
</select>
</div>
<button class="btn" onclick="copyToClipboard()">复制BASE64</button>
<div id="result"></div>
<!-- 新增：BASE64转图片功能 -->
<h2>BASE64转图片</h2>
<textarea id="base64Input" placeholder="请粘贴BASE64字符串" style="width: 100%; height: 100px; margin: 10px 0;"></textarea>
<button class="btn" onclick="showImage()">预览图片</button>
<div id="imagePreview" style="margin-top: 20px;">
<img id="previewImg" style="max-width: 100%; display: none;">
</div>
</div>
<script>
const fileInput = document.getElementById('fileInput');
const result = document.getElementById('result');
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
// 创建 canvas
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
// 绘制原图
ctx.drawImage(img, 0, 0);
// 获取当前时间
const now = new Date();
const timeString = now.toLocaleString('zh-CN');
// 设置水印文字
const watermarkText = document.getElementById('watermarkText').value || timeString;
const watermarkColor = document.getElementById('watermarkColor').value;
const position = document.getElementById('watermarkPosition').value;
ctx.font = '24px Arial';
ctx.fillStyle = watermarkColor;
ctx.globalAlpha = 0.5;
// 计算水印位置
let x, y;
const textWidth = ctx.measureText(watermarkText).width;
switch(position) {
case 'topRight':
x = canvas.width - textWidth - 20;
y = 40; // 距离顶部的距离
break;
case 'center':
x = (canvas.width - textWidth) / 2;
y = canvas.height / 2;
break;
case 'bottomRight':
x = canvas.width - textWidth - 20;
y = canvas.height - 20;
break;
case 'bottomLeft':
x = 20;
y = canvas.height - 20;
break;
}
// 绘制水印
ctx.fillText(watermarkText, x, y);
// 转换为 base64
result.textContent = canvas.toDataURL(file.type);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
});
function copyToClipboard() {
if (result.textContent) {
navigator.clipboard.writeText(result.textContent)
.then(() => alert('BASE64已复制到剪贴板！'))
.catch(err => console.error('复制失败：', err));
}
}
// 新增：BASE64转图片功能
function showImage() {
const base64Input = document.getElementById('base64Input');
const previewImg = document.getElementById('previewImg');
const base64String = base64Input.value.trim();
if (!base64String) {
alert('请输入BASE64字符串！');
return;
}
try {
// 如果输入的是完整的Data URL，直接使用
// 如果只是BASE64字符串，则添加前缀
const imgSrc = base64String.startsWith('data:image')
? base64String
: 'data:image/png;base64,' + base64String;
previewImg.src = imgSrc;
previewImg.style.display = 'block';
// 处理加载错误
previewImg.onerror = function() {
alert('无效的BASE64图片数据！');
previewImg.style.display = 'none';
};
} catch (error) {
alert('转换失败：' + error.message);
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号