设为首页收藏本站
切换到窄版

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
理想阁»网站 › -= 实用工具区=- › 『精品软件』 › 图片加文字水印软件工具
返回列表 发新帖
查看: 4|回复: 0

[Windows] 图片加文字水印软件工具

[复制链接]
酸奶不吃鱼

139

主题

16

回帖

1万

积分

VIP会员

积分
10158

VIP会员资源整合达人专属

威望
78
阁豆
9818
最后登录
2026-7-28
在线时间
19 小时
发表于 6 天前 | 显示全部楼层 |阅读模式
加入VIP会员，获阁豆，赠积分，送勋章，下载无限制，获论坛最高级会员权限 !
图片加文字水印软件工具
给图片加水印，日常多用于证件照加文字水印，一个简单的网页即可

软件成品下载地址：
游客，如果您要查看本帖隐藏内容请回复


源代码：
  1. [hide]<!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  6.   <title>批量文字水印工具</title>
  7.   <style>
  8.     * { box-sizing: border-box; margin: 0; padding: 0; }
  9.     body { font-family: 'Microsoft YaHei', SimSun, sans-serif; background: #f7f8fa; }
  10.     .navbar {
  11.       width: 100%; background: #2E65BD; color: #fff; padding: 0;
  12.       box-shadow: 0 2px 8px #e0e6f6; display: flex; align-items: center;
  13.       justify-content: space-between; height: 54px; position: sticky; top: 0; z-index: 100;
  14.     }
  15.     .navbar .nav-left { font-size: 20px; font-weight: bold; letter-spacing: 2px; margin-left: 140px; }
  16.     .navbar .back-link { position: absolute; left: 40px; text-decoration: none; color: #fff; font-size: 15px; }
  17.     .navbar .back-link:hover { text-decoration: underline; }
  18.     .container { max-width: 1400px; margin: 20px auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px #eee; padding: 24px 28px; }
  19.     h2 { font-size: 22px; margin-bottom: 6px; }
  20.     .desc { color: #666; font-size: 14px; margin-bottom: 16px; line-height: 1.6; }


  23.     .toolbar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
  24.     .toolbar .btn { white-space: nowrap; }


  27.     .toggle-wrap { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; cursor: pointer; user-select: none; }
  28.     .switch { position: relative; display: inline-block; width: 36px; height: 20px; }
  29.     .switch input { opacity: 0; width: 0; height: 0; }
  30.     .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #ccc; transition: .2s; border-radius: 20px; }
  31.     .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background: #fff; transition: .2s; border-radius: 50%; }
  32.     .switch input:checked + .slider { background: #409eff; }
  33.     .switch input:checked + .slider:before { transform: translateX(16px); }
  34.     .switch input:disabled + .slider { opacity: 0.5; cursor: not-allowed; }


  37.     .main-layout { display: flex; gap: 16px; align-items: stretch; }
  38.     .left-panel { flex: 0 0 140px; min-width: 0; display: flex; flex-direction: column; }
  39.     .right-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; }


  42.     .settings-panel {
  43.       background: #f7f7fb; border-radius: 8px; padding: 16px 20px;
  44.       margin-bottom: 14px; box-shadow: 0 1px 3px #eee;
  45.     }
  46.     .settings-panel h3 { font-size: 15px; margin-bottom: 10px; color: #333; }
  47.     .form-row { display: flex; flex-wrap: nowrap; gap: 10px; align-items: flex-end; margin-bottom: 0; overflow-x: auto; }
  48.     .form-group { display: flex; flex-direction: column; flex-shrink: 0; }
  49.     .form-group label { font-size: 12px; color: #555; margin-bottom: 3px; }
  50.     .form-group input, .form-group select {
  51.       height: 34px; padding: 4px 10px; border: 1px solid #ccc; border-radius: 6px;
  52.       font-size: 13px; min-width: 90px;
  53.     }
  54.     .form-group input[type="number"] { width: 80px; }
  55.     .form-group input[type="range"] { min-width: 120px; height: auto; }
  56.     .color-wrap { display: flex; align-items: center; gap: 6px; }
  57.     .color-wrap input[type="color"] { height: 34px; width: 36px; border: 1px solid #ccc; border-radius: 6px; padding: 2px; cursor: pointer; }
  58.     .color-wrap .color-hex { font-size: 12px; color: #666; }


  61.     .btn { background: #409eff; color: #fff; border: none; border-radius: 6px; padding: 8px 16px; cursor: pointer; font-size: 13px; transition: background 0.2s; }
  62.     .btn:hover { background: #3a8ee6; }
  63.     .btn:active { background: #2d7cd6; }
  64.     .btn-success { background: #67c23a; }
  65.     .btn-success:hover { background: #5daf34; }
  66.     .btn-warn { background: #e6a23c; }
  67.     .btn-warn:hover { background: #cf9236; }
  68.     .btn-danger { background: #f56c6c; }
  69.     .btn-danger:hover { background: #e25c5c; }
  70.     .btn-sm { padding: 6px 12px; font-size: 12px; }


  73.     .thumb-section { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
  74.     .thumb-header {
  75.       display: flex; justify-content: space-between; align-items: center;
  76.       margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #eee;
  77.     }
  78.     .thumb-header h3 { font-size: 15px; color: #333; }
  79.     .thumb-header .count { font-size: 13px; color: #888; }
  80.     .thumb-grid {
  81.       display: flex; flex-direction: column;
  82.       gap: 8px; overflow-y: auto; flex: 1; padding: 2px;
  83.       max-height: calc(100vh - 260px);
  84.     }
  85.     .thumb-card {
  86.       border: 2px solid #e8e8e8; border-radius: 6px; overflow: hidden;
  87.       cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
  88.       background: #fafafa; position: relative; flex-shrink: 0;
  89.     }
  90.     .thumb-card:hover { border-color: #a0c4ff; }
  91.     .thumb-card.active { border-color: #409eff; box-shadow: 0 0 0 2px rgba(64,158,255,0.3); }
  92.     .thumb-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
  93.     .thumb-card .thumb-name {
  94.       font-size: 10px; color: #555; padding: 3px 4px;
  95.       white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  96.       text-align: center; background: #f5f5f5;
  97.     }
  98.     .thumb-card .thumb-remove {
  99.       position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
  100.       border-radius: 50%; background: rgba(245,108,108,0.85); color: #fff;
  101.       border: none; font-size: 11px; cursor: pointer; display: none;
  102.       align-items: center; justify-content: center; line-height: 1;
  103.     }
  104.     .thumb-card:hover .thumb-remove { display: flex; }
  105.     .thumb-empty {
  106.       text-align: center; padding: 40px 10px;
  107.       color: #bbb; font-size: 13px;
  108.     }


  111.     .preview-section {
  112.       background: #f7f7fb; border-radius: 8px; padding: 16px;
  113.       flex: 1; display: flex; flex-direction: column;
  114.     }
  115.     .preview-header {
  116.       display: flex; justify-content: space-between; align-items: center;
  117.       margin-bottom: 10px;
  118.     }
  119.     .preview-header h3 { font-size: 15px; color: #333; }
  120.     .preview-header .preview-name { font-size: 12px; color: #888; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  121.     .preview-canvas-wrap {
  122.       flex: 1; display: flex; align-items: center; justify-content: center;
  123.       background: repeating-conic-gradient(#e8e8e8 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
  124.       border-radius: 6px; overflow: hidden; min-height: 400px;
  125.     }
  126.     .preview-canvas-wrap canvas {
  127.       max-width: 100%; max-height: calc(100vh - 320px); display: block;
  128.       box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  129.     }
  130.     .preview-empty {
  131.       text-align: center; color: #bbb; font-size: 15px; padding: 80px 20px;
  132.     }


  135.     .exporting-overlay {
  136.       position: fixed; left: 50%; top: 30%; transform: translate(-50%, -50%);
  137.       background: rgba(34,34,34,0.95); color: #fff; font-size: 18px;
  138.       padding: 20px 36px; border-radius: 10px; z-index: 9999;
  139.       box-shadow: 0 2px 16px rgba(0,0,0,0.3); display: none;
  140.     }


  143.     .opacity-val { font-size: 12px; color: #888; min-width: 30px; text-align: center; }

  145.     [url=home.php?mod=space&uid=945662]@media[/url] (max-width: 900px) {
  146.       .main-layout { flex-direction: column; }
  147.       .left-panel { flex: none; }
  148.       .right-panel { flex: none; }
  149.       .thumb-grid { max-height: 200px; flex-direction: row; flex-wrap: wrap; }
  150.       .thumb-card { width: 80px; flex-shrink: 0; }
  151.     }
  152.     @media (max-width: 700px) {
  153.       .container { margin: 0; border-radius: 0; padding: 10px 3vw 60px 3vw; }
  154.       .navbar { height: 44px; }
  155.       .navbar .nav-left { margin-left: 120px; font-size: 16px; }
  156.       .navbar .back-link { left: 10px; font-size: 13px; }
  157.     }
  158.   </style>
  159. </head>
  160. <body>

  162.   <div class="container">
  163.     <h2>批量文字水印工具</h2>

  165.     <div class="toolbar">
  166.       <button class="btn" onclick="document.getElementById('singleInput').click()">&#128444;&#65039; 选择图片</button>
  167.       <input type="file" id="singleInput" accept="image/*" multiple style="display:none;" />
  168.       <button class="btn" onclick="document.getElementById('folderInput').click()">&#128193; 选择文件夹</button>
  169.       <input type="file" id="folderInput" webkitdirectory multiple style="display:none;" />
  170.       <label class="toggle-wrap">
  171.         <span class="switch"><input type="checkbox" id="moveWatermarkSwitch" onchange="toggleMove()" /><span class="slider"></span></span>
  172.         移动水印
  173.       </label>
  174.       <label class="toggle-wrap">
  175.         <span class="switch"><input type="checkbox" id="individualSwitch" onchange="toggleIndividual()" /><span class="slider"></span></span>
  176.         单独调整
  177.       </label>
  178.       <span style="flex:1;"></span>
  179.       <button class="btn btn-warn btn-sm" onclick="exportZip()">压缩包下载</button>
  180.       <button class="btn btn-success btn-sm" onclick="exportAll()">导出全部</button>
  181.       <button class="btn btn-danger btn-sm" onclick="clearAll()">清空</button>
  182.     </div>


  185.     <div class="main-layout">

  187.       <div class="left-panel">
  188.         <div class="thumb-section">
  189.           <div class="thumb-header">
  190.             <h3>图片列表</h3>
  191.             <span class="count" id="thumbCount">共 0 张</span>
  192.           </div>
  193.           <div class="thumb-grid" id="thumbGrid">
  194.             <div class="thumb-empty">暂无图片，请上传</div>
  195.           </div>
  196.         </div>
  197.       </div>


  200.       <div class="right-panel">
  201.         <!-- 水印设置 -->
  202.         <div class="settings-panel">
  203.           <h3 style="margin-bottom:8px;">文字水印参数</h3>
  204.           <div class="form-row">
  205.             <div class="form-group">
  206.               <label>水印文字</label>
  207.               <input type="text" id="wmText" value="仅限办理***使用" placeholder="水印文字" style="width:180px;" />
  208.             </div>
  209.             <div class="form-group">
  210.               <label>字体</label>
  211.               <select id="wmFont">
  212.                 <option value="Microsoft YaHei" selected>微软雅黑</option>
  213.                 <option value="SimHei">黑体</option>
  214.                 <option value="SimSun">宋体</option>
  215.                 <option value="KaiTi">楷体</option>
  216.                 <option value="FangSong">仿宋</option>
  217.                 <option value="DengXian">等线</option>
  218.                 <option value="YouYuan">幼圆</option>
  219.                 <option value="LiSu">隶书</option>
  220.                 <option value="FZXiaoBiaoSong-B05S">方正小标宋</option>
  221.                 <option value="Arial">Arial</option>
  222.                 <option value="Times New Roman">Times New Roman</option>
  223.               </select>
  224.             </div>
  225.             <div class="form-group">
  226.               <label>字号</label>
  227.               <input type="number" id="wmSize" value="60" min="8" max="300" />
  228.             </div>
  229.             <div class="form-group">
  230.               <label>颜色</label>
  231.               <div class="color-wrap">
  232.                 <input type="color" id="wmColor" value="#000000" />
  233.               </div>
  234.             </div>
  235.             <div class="form-group">
  236.               <label>透明度</label>
  237.               <div style="display:flex;align-items:center;gap:4px;">
  238.                 <input type="range" id="wmOpacity" min="5" max="100" value="50" style="min-width:80px;" />
  239.                 <span class="opacity-val" id="wmOpacityVal">40%</span>
  240.               </div>
  241.             </div>
  242.             <div class="form-group">
  243.               <label>旋转</label>
  244.               <div style="display:flex;align-items:center;gap:4px;">
  245.                 <input type="range" id="wmRotate" min="-180" max="180" value="-30" style="min-width:80px;" />
  246.                 <span class="opacity-val" id="wmRotateVal">-30°</span>
  247.               </div>
  248.             </div>
  249.             <div class="form-group">
  250.               <label>行</label>
  251.               <input type="number" id="wmRows" value="3" min="1" max="20" style="width:48px;" />
  252.             </div>
  253.             <div class="form-group">
  254.               <label>列</label>
  255.               <input type="number" id="wmCols" value="3" min="1" max="20" style="width:48px;" />
  256.             </div>
  257.           </div>
  258.         </div>



  262.         <div class="preview-section">
  263.           <div class="preview-header">
  264.             <h3>水印预览</h3>
  265.             <span class="preview-name" id="previewName"></span>
  266.           </div>
  267.           <div class="preview-canvas-wrap" id="previewWrap">
  268.             <div class="preview-empty" id="previewEmpty">请上传图片后查看预览</div>
  269.             <canvas id="previewCanvas" style="display:none;"></canvas>
  270.           </div>
  271.         </div>
  272.       </div>
  273.     </div>
  274.   </div>


  277.   <div class="exporting-overlay" id="exportingOverlay">正在导出中</div>

  279.   <script src="./js/jszip.min.js"></script>
  280.   <script>

  282.     let imageFiles = [];
  283.     let selectedIdx = -1;
  284.     let previewTimer = null;
  285.     let moveWatermark = false;
  286.     let individualAdjust = false;
  287.     let isGlobalMode = false;
  288.     let isDragging = false;
  289.     let dragStartX = 0;
  290.     let dragStartY = 0;
  291.     let dragInitialOffsetX = 0;
  292.     let dragInitialOffsetY = 0;


  295.     const singleInput = document.getElementById('singleInput');
  296.     const folderInput = document.getElementById('folderInput');

  298.     singleInput.addEventListener('change', function(e) {
  299.       addFiles(Array.from(e.target.files));
  300.       singleInput.value = '';
  301.     });
  302.     folderInput.addEventListener('change', function(e) {
  303.       addFiles(Array.from(e.target.files));
  304.       folderInput.value = '';
  305.     });

  307.     function addFiles(files) {
  308.       const imgFiles = files.filter(f => f.type.startsWith('image/'));
  309.       if (imgFiles.length === 0) { alert('未检测到图片文件'); return; }
  310.       let loaded = 0;
  311.       imgFiles.forEach(file => {
  312.         const reader = new FileReader();
  313.         reader.onload = function(e) {
  314.           const imgEl = new Image();
  315.           imgEl.onload = function() {
  316.             imageFiles.push({ file, name: file.name, dataUrl: e.target.result, imgEl, offsetX: 0, offsetY: 0 });
  317.             loaded++;
  318.             if (loaded === imgFiles.length) {
  319.               renderThumbnails();

  321.               if (selectedIdx < 0 || selectedIdx >= imageFiles.length) {
  322.                 selectImage(imageFiles.length - imgFiles.length);
  323.               } else {
  324.                 updatePreview();
  325.               }
  326.             }
  327.           };
  328.           imgEl.src = e.target.result;
  329.         };
  330.         reader.readAsDataURL(file);
  331.       });
  332.     }


  335.     function renderThumbnails() {
  336.       const grid = document.getElementById('thumbGrid');
  337.       const countEl = document.getElementById('thumbCount');
  338.       countEl.textContent = '共 ' + imageFiles.length + ' 张';

  340.       if (imageFiles.length === 0) {
  341.         grid.innerHTML = '<div class="thumb-empty">暂无图片，请上传</div>';
  342.         return;
  343.       }

  345.       grid.innerHTML = '';
  346.       imageFiles.forEach((item, idx) => {
  347.         const card = document.createElement('div');
  348.         card.className = 'thumb-card' + (idx === selectedIdx ? ' active' : '');
  349.         card.onclick = function() { selectImage(idx); };

  351.         const img = document.createElement('img');
  352.         img.src = item.dataUrl;
  353.         img.alt = item.name;

  355.         const nameDiv = document.createElement('div');
  356.         nameDiv.className = 'thumb-name';
  357.         nameDiv.title = item.name;
  358.         nameDiv.textContent = item.name;

  360.         const removeBtn = document.createElement('button');
  361.         removeBtn.className = 'thumb-remove';
  362.         removeBtn.textContent = '&#10005;';
  363.         removeBtn.onclick = function(e) { e.stopPropagation(); removeImage(idx); };

  365.         card.appendChild(img);
  366.         card.appendChild(nameDiv);
  367.         card.appendChild(removeBtn);
  368.         grid.appendChild(card);
  369.       });
  370.     }

  372.     function selectImage(idx) {
  373.       if (idx < 0 || idx >= imageFiles.length) return;
  374.       selectedIdx = idx;

  376.       const cards = document.querySelectorAll('.thumb-card');
  377.       cards.forEach((c, i) => c.classList.toggle('active', i === idx));

  379.       updatePreview();
  380.     }

  382.     function removeImage(idx) {
  383.       imageFiles.splice(idx, 1);
  384.       if (imageFiles.length === 0) {
  385.         selectedIdx = -1;
  386.         document.getElementById('previewCanvas').style.display = 'none';
  387.         document.getElementById('previewEmpty').style.display = '';
  388.         document.getElementById('previewName').textContent = '';
  389.       } else if (selectedIdx >= imageFiles.length) {
  390.         selectedIdx = imageFiles.length - 1;
  391.       } else if (selectedIdx === idx) {
  392.         selectedIdx = Math.min(idx, imageFiles.length - 1);
  393.       } else if (selectedIdx > idx) {
  394.         selectedIdx--;
  395.       }
  396.       renderThumbnails();
  397.       if (imageFiles.length > 0) updatePreview();
  398.     }

  400.     function clearAll() {
  401.       imageFiles = [];
  402.       selectedIdx = -1;
  403.       renderThumbnails();
  404.       document.getElementById('previewCanvas').style.display = 'none';
  405.       document.getElementById('previewEmpty').style.display = '';
  406.       document.getElementById('previewName').textContent = '';
  407.     }


  410.     function toggleMove() {
  411.     moveWatermark = document.getElementById('moveWatermarkSwitch').checked;

  413.     isGlobalMode = moveWatermark;

  415.     if (moveWatermark && individualAdjust) {
  416.         individualAdjust = false;
  417.         document.getElementById('individualSwitch').checked = false;
  418.     }
  419.     updateCanvasCursor();
  420.     }
  421.     function toggleIndividual() {
  422.     individualAdjust = document.getElementById('individualSwitch').checked;

  424.     if (individualAdjust && moveWatermark) {
  425.         moveWatermark = false;
  426.         document.getElementById('moveWatermarkSwitch').checked = false;
  427.         isGlobalMode = false; // 切换到单独调整模式
  428.     } else {

  430.         isGlobalMode = moveWatermark;
  431.     }
  432.     updateCanvasCursor();
  433.     updatePreview();
  434.     }
  435.     function updateCanvasCursor() {
  436.       const canvas = document.getElementById('previewCanvas');
  437.       canvas.style.cursor = (moveWatermark || individualAdjust) ? 'move' : '';
  438.     }
  439.     function getImageOffset(item) {

  441.     return { x: item.offsetX || 0, y: item.offsetY || 0 };
  442.     }


  445.     function initCanvasDrag() {
  446.       const canvas = document.getElementById('previewCanvas');
  447.       

  449.       function startDrag(e) {
  450.         if (!moveWatermark && !individualAdjust) return;
  451.         isDragging = true;
  452.         const rect = canvas.getBoundingClientRect();
  453.         const clientX = e.touches ? e.touches[0].clientX : e.clientX;
  454.         const clientY = e.touches ? e.touches[0].clientY : e.clientY;
  455.         dragStartX = clientX - rect.left;
  456.         dragStartY = clientY - rect.top;
  457.         if (individualAdjust) {
  458.           const item = imageFiles[selectedIdx];
  459.           dragInitialOffsetX = item.offsetX || 0;
  460.           dragInitialOffsetY = item.offsetY || 0;
  461.         } else {
  462.           dragInitialOffsetX = globalOffsetX;
  463.           dragInitialOffsetY = globalOffsetY;
  464.         }
  465.         if (e.touches) e.preventDefault();
  466.       }
  467.       

  469.       function doDrag(e) {
  470.     if (!isDragging) return;
  471.     const rect = canvas.getBoundingClientRect();
  472.     const scaleX = canvas.width / rect.width;
  473.     const scaleY = canvas.height / rect.height;
  474.     const clientX = e.touches ? e.touches[0].clientX : e.clientX;
  475.     const clientY = e.touches ? e.touches[0].clientY : e.clientY;
  476.     const currentX = clientX - rect.left;
  477.     const currentY = clientY - rect.top;
  478.     const dx = (currentX - dragStartX) * scaleX;
  479.     const dy = (currentY - dragStartY) * scaleY;


  482.     const newOffsetX = dragInitialOffsetX + dx;
  483.     const newOffsetY = dragInitialOffsetY + dy;


  486.     imageFiles[selectedIdx].offsetX = newOffsetX;
  487.     imageFiles[selectedIdx].offsetY = newOffsetY;


  490.     if (isGlobalMode) {
  491.         imageFiles.forEach((item, idx) => {
  492.             if (idx !== selectedIdx) {
  493.                 item.offsetX = newOffsetX;
  494.                 item.offsetY = newOffsetY;
  495.             }
  496.         });
  497.     }

  499.     updatePreview();
  500.     if (e.touches) e.preventDefault();
  501.     }
  502.       

  504.       function endDrag() {
  505.         isDragging = false;
  506.       }
  507.       

  509.       canvas.addEventListener('mousedown', startDrag);
  510.       canvas.addEventListener('mousemove', doDrag);
  511.       canvas.addEventListener('mouseup', endDrag);
  512.       canvas.addEventListener('mouseleave', endDrag);
  513.       

  515.       canvas.addEventListener('touchstart', startDrag, { passive: false });
  516.       canvas.addEventListener('touchmove', doDrag, { passive: false });
  517.       canvas.addEventListener('touchend', endDrag);
  518.       canvas.addEventListener('touchcancel', endDrag);
  519.     }


  522.     function getWatermarkParams() {
  523.       return {
  524.         text: document.getElementById('wmText').value || '水印',
  525.         font: document.getElementById('wmFont').value,
  526.         size: parseInt(document.getElementById('wmSize').value) || 40,
  527.         color: document.getElementById('wmColor').value,
  528.         opacity: parseInt(document.getElementById('wmOpacity').value) / 100,
  529.         rotate: parseInt(document.getElementById('wmRotate').value) || 0,
  530.         rows: Math.max(1, parseInt(document.getElementById('wmRows').value) || 3),
  531.         cols: Math.max(1, parseInt(document.getElementById('wmCols').value) || 3),
  532.       };
  533.     }

  535.     function drawWatermark(ctx, img, width, height, params, offsetX, offsetY) {
  536.       ctx.clearRect(0, 0, width, height);
  537.       ctx.drawImage(img, 0, 0, width, height);

  539.       const { text, font, size, color, opacity, rotate, rows, cols } = params;
  540.       const scale = Math.min(width, height) / 800;
  541.       const fontSize = Math.round(size * scale);
  542.       const ox = offsetX || 0;
  543.       const oy = offsetY || 0;

  545.       ctx.save();
  546.       ctx.globalAlpha = opacity;
  547.       ctx.fillStyle = color;
  548.       ctx.font = fontSize + 'px "' + font + '"';
  549.       ctx.textAlign = 'center';
  550.       ctx.textBaseline = 'middle';

  552.       const cellW = width / cols;
  553.       const cellH = height / rows;
  554.       for (let r = 0; r < rows; r++) {
  555.         for (let c = 0; c < cols; c++) {
  556.           const cx = cellW * c + cellW / 2 + ox;
  557.           const cy = cellH * r + cellH / 2 + oy;
  558.           ctx.save();
  559.           ctx.translate(cx, cy);
  560.           ctx.rotate(rotate * Math.PI / 180);
  561.           ctx.fillText(text, 0, 0);
  562.           ctx.restore();
  563.         }
  564.       }
  565.       ctx.restore();
  566.     }


  569.     function updatePreview() {
  570.       if (selectedIdx < 0 || selectedIdx >= imageFiles.length) return;
  571.       const item = imageFiles[selectedIdx];
  572.       const canvas = document.getElementById('previewCanvas');
  573.       const empty = document.getElementById('previewEmpty');
  574.       const nameEl = document.getElementById('previewName');

  576.       empty.style.display = 'none';
  577.       canvas.style.display = '';
  578.       nameEl.textContent = item.name;
  579.       nameEl.title = item.name;

  581.       canvas.width = item.imgEl.naturalWidth;
  582.       canvas.height = item.imgEl.naturalHeight;
  583.       const ctx = canvas.getContext('2d');
  584.       const offset = getImageOffset(item);
  585.       drawWatermark(ctx, item.imgEl, canvas.width, canvas.height, getWatermarkParams(), offset.x, offset.y);
  586.     }


  589.     function schedulePreview() {
  590.       clearTimeout(previewTimer);
  591.       previewTimer = setTimeout(updatePreview, 80);
  592.     }


  595.     ['wmText', 'wmFont', 'wmSize', 'wmColor', 'wmOpacity', 'wmRotate', 'wmRows', 'wmCols'].forEach(function(id) {
  596.       const el = document.getElementById(id);
  597.       el.addEventListener('input', function() {
  598.         if (id === 'wmOpacity') document.getElementById('wmOpacityVal').textContent = el.value + '%';
  599.         if (id === 'wmRotate') document.getElementById('wmRotateVal').textContent = el.value + '°';
  600.         schedulePreview();
  601.       });
  602.       el.addEventListener('change', function() {
  603.         schedulePreview();
  604.       });
  605.     });


  608.     function getExportFileName(originalName) {
  609.       const nameNoExt = originalName.replace(/\.[^.]+$/, '');
  610.       const now = new Date();
  611.       const pad = n => n < 10 ? '0' + n : n;
  612.       const ts = '' + now.getFullYear() + pad(now.getMonth() + 1) + pad(now.getDate()) +
  613.         '_' + pad(now.getHours()) + pad(now.getMinutes());
  614.       return nameNoExt + '_水印_' + ts + '.png';
  615.     }

  617.     function renderWatermarkedImage(item, callback) {
  618.       const canvas = document.createElement('canvas');
  619.       canvas.width = item.imgEl.naturalWidth;
  620.       canvas.height = item.imgEl.naturalHeight;
  621.       const ctx = canvas.getContext('2d');
  622.       const offset = getImageOffset(item);
  623.       drawWatermark(ctx, item.imgEl, canvas.width, canvas.height, getWatermarkParams(), offset.x, offset.y);
  624.       canvas.toBlob(function(blob) { callback(blob); }, 'image/png');
  625.     }

  627.     function exportAll() {
  628.       if (imageFiles.length === 0) { alert('请先上传图片'); return; }
  629.       const overlay = document.getElementById('exportingOverlay');
  630.       overlay.textContent = '正在导出中';
  631.       overlay.style.display = '';
  632.       let idx = 0;
  633.       function processNext() {
  634.         if (idx >= imageFiles.length) { overlay.style.display = 'none'; return; }
  635.         renderWatermarkedImage(imageFiles[idx], function(blob) {
  636.           const url = URL.createObjectURL(blob);
  637.           const a = document.createElement('a');
  638.           a.href = url;
  639.           a.download = getExportFileName(imageFiles[idx].name);
  640.           document.body.appendChild(a);
  641.           a.click();
  642.           document.body.removeChild(a);
  643.           setTimeout(function() { URL.revokeObjectURL(url); }, 100);
  644.           idx++;
  645.           setTimeout(processNext, 200);
  646.         });
  647.       }
  648.       processNext();
  649.     }

  651.     function exportZip() {
  652.       if (imageFiles.length === 0) { alert('请先上传图片'); return; }
  653.       const overlay = document.getElementById('exportingOverlay');
  654.       overlay.textContent = '正在压缩中';
  655.       overlay.style.display = '';
  656.       const zip = new JSZip();
  657.       let pending = imageFiles.length;
  658.       const results = [];
  659.       imageFiles.forEach(function(item, idx) {
  660.         renderWatermarkedImage(item, function(blob) {
  661.           results[idx] = { name: getExportFileName(item.name), blob: blob };
  662.           pending--;
  663.           if (pending === 0) {
  664.             results.forEach(function(r) { zip.file(r.name, r.blob); });
  665.             const now = new Date();
  666.             const pad = n => n < 10 ? '0' + n : n;
  667.             const ts = '' + now.getFullYear() + pad(now.getMonth() + 1) + pad(now.getDate()) +
  668.               '_' + pad(now.getHours()) + pad(now.getMinutes());
  669.             zip.generateAsync({ type: 'blob' }).then(function(zipBlob) {
  670.               const url = URL.createObjectURL(zipBlob);
  671.               const a = document.createElement('a');
  672.               a.href = url;
  673.               a.download = '水印图片_' + ts + '.zip';
  674.               document.body.appendChild(a);
  675.               a.click();
  676.               document.body.removeChild(a);
  677.               setTimeout(function() { URL.revokeObjectURL(url); }, 100);
  678.               overlay.style.display = 'none';
  679.             });
  680.           }
  681.         });
  682.       });
  683.     }


  686.     document.addEventListener('DOMContentLoaded', function() {
  687.       initCanvasDrag();
  688.     });
  689.   </script>
  690. </body>
  691. </html>[/hide]
复制代码




ScreenShot_2026-07-23_122152_322.png
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ：413752269（客服）| Email：liranqing2008@Gmail.com|手机版|小黑屋|版权声明|侵权投诉|免责声明|捐助支持|免费流量卡|理想阁 ( 晋ICP备2026000046号-1 )

GMT+8, 2026-7-29 06:33 , Processed in 0.051440 second(s), 24 queries .

Powered by 理想阁 社区

© 2001-2026 理想阁论坛社区.

快速回复 返回顶部 返回列表