!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title自定义图片水印工具/title style body { font-family: PingFang SC, Microsoft YaHei, sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; background-color: #f0f2f5; color: #333; } .container { max-width: 900px; width: 100%; background: white; padding: 30px; border-radius: 15px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); text-align: center; } h1 { margin-bottom: 20px; color: #1890ff; } /* 设置区域样式 */ .settings { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-bottom: 20px; padding: 20px; background: #fafafa; border-radius: 8px; } .input-group { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 500px; } input[typetext] { flex: 1; padding: 10px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 16px; } .upload-area { border: 2px dashed #40a9ff; padding: 30px; border-radius: 8px; cursor: pointer; margin-bottom: 20px; transition: all 0.3s; } .upload-area:hover { background-color: #e6f7ff; border-color: #1890ff; } #fileInput { display: none; } .btn-group { margin: 20px 0; } button { background-color: #1890ff; color: white; border: none; padding: 12px 25px; border-radius: 6px; cursor: pointer; font-size: 16px; transition: background 0.3s; } button:hover { background-color: #40a9ff; } button:disabled { background-color: #bfbfbf; cursor: not-allowed; } #downloadBtn { background-color: #52c41a; } #downloadBtn:hover { background-color: #73d13d; } #previewContainer { margin-top: 20px; max-height: 600px; overflow: auto; border: 1px solid #eee; border-radius: 4px; display: none; } canvas { max-width: 100%; display: block; margin: 0 auto; } .tip { margin-top: 15px; font-size: 13px; color: #888; } /style /head body div classcontainer h1图片水印生成器/h1 !-- 输入设置区 -- div classsettings div classinput-group label forwatermarkText水印内容/label input typetext idwatermarkText placeholder请输入水印文字... value仅供xxx合同使用 /div p stylefont-size: 12px; color: #999;修改文字后水印会自动即时更新/p /div !-- 上传区 -- div classupload-area iddropZone onclickdocument.getElementById(fileInput).click() p点击或拖拽图片到此处上传/p input typefile idfileInput acceptimage/* /div !-- 操作区 -- div classbtn-group button iddownloadBtn disabled保存加水印后的图片/button /div !-- 预览区 -- div idpreviewContainer canvas idcanvas/canvas /div p classtip安全提示图片处理完全在您的浏览器本地完成不会传输到任何服务器。/p /div script const fileInput document.getElementById(fileInput); const watermarkInput document.getElementById(watermarkText); const canvas document.getElementById(canvas); const ctx canvas.getContext(2d); const downloadBtn document.getElementById(downloadBtn); const previewContainer document.getElementById(previewContainer); let originalImage null; // 用于缓存原始图片方便随时更改文字 // 监听文件上传 fileInput.addEventListener(change, function(e) { const file e.target.files[0]; if (!file) return; const reader new FileReader(); reader.onload function(event) { const img new Image(); img.onload function() { originalImage img; // 存入缓存 draw(); // 执行绘制 }; img.src event.target.result; }; reader.readAsDataURL(file); }); // 监听输入框变化实时更新 watermarkInput.addEventListener(input, function() { if (originalImage) { draw(); } }); // 核心绘制函数 function draw() { if (!originalImage) return; const text watermarkInput.value || ; // 1. 设置画布尺寸 canvas.width originalImage.width; canvas.height originalImage.height; // 2. 绘制原图 ctx.drawImage(originalImage, 0, 0); // 3. 如果没填文字则不画水印 if (!text) return; // 4. 设置水印样式 // 根据图片宽度动态计算字号避免字太小 const fontSize Math.max(16, Math.round(canvas.width / 25)); ctx.font ${fontSize}px Microsoft YaHei, sans-serif; ctx.fillStyle rgba(180, 180, 180, 0.4); // 灰色40%透明度 ctx.textAlign center; ctx.textBaseline middle; // 5. 绘制平铺水印 const angle -45 * Math.PI / 180; // 旋转角度 // 计算平铺间距 const stepX text.length * fontSize * 0.8 100; // 水平间距随文字长度变化 const stepY fontSize * 8; // 垂直间距 ctx.save(); // 遍历覆盖整个画布扩大范围以覆盖旋转后的空白 for (let x -canvas.width; x canvas.width * 2; x stepX) { for (let y -canvas.height; y canvas.height * 2; y stepY) { ctx.save(); ctx.translate(x, y); ctx.rotate(angle); ctx.fillText(text, 0, 0); ctx.restore(); } } ctx.restore(); // 显示预览和下载按钮 previewContainer.style.display block; downloadBtn.disabled false; } // 下载功能 downloadBtn.addEventListener(click, function() { // 使用 png 保持清晰度如果图片太大也可以改用 image/jpeg const dataURL canvas.toDataURL(image/png); const link document.createElement(a); link.download watermark_${new Date().getTime()}.png; link.href dataURL; link.click(); }); // 支持拖拽上传 const dropZone document.getElementById(dropZone); dropZone.ondragover () { dropZone.style.backgroundColor #e6f7ff; return false; }; dropZone.ondragleave () { dropZone.style.backgroundColor #fff; return false; }; dropZone.ondrop (e) { e.preventDefault(); dropZone.style.backgroundColor #fff; const file e.dataTransfer.files[0]; if (file file.type.startsWith(image/)) { const dt new DataTransfer(); dt.items.add(file); fileInput.files dt.files; fileInput.dispatchEvent(new Event(change)); } }; /script /body /html使用方法将上面的代码复制并保存为 watermark.html。用任何现代浏览器Chrome, Edge, Firefox, Safari打开该文件。选择图片等待生成预览。点击保存按钮。