去水印 下载工具

输入图片地址，一键下载去水印，支持HTML、CSS、JavaScript等文件下载

支持智能URL验证，自动补全协议，安全可靠

支持格式：https://example.com、http://example.com

🔗 智能补全：自动补全协议前缀，支持直接输入域名

💡 示例："example.com" 或 "www.example.com"

✅ 实时预览：下载前可预览去水印结构

`; responseStatusText = '200 OK (模拟数据)'; } // 解析HTML内容 const title = extractTitle(html); const detectedCharset = extractCharset(html); const inlineCSS = extractInlineCSS(html); const inlineJS = extractInlineJS(html); const formattedHTML = formatHTML(html); const lines = html.split('\n').length; const chars = html.length; const size = new Blob([html]).size; // 保存当前数据 currentPageData = { url: url, html: html, css: inlineCSS, js: inlineJS, title: title, charset: detectedCharset, lineCount: lines, charCount: chars, size: size, status: responseStatusText }; // 更新UI websiteTitle.textContent = title; websiteUrlDisplay.textContent = url; responseStatus.textContent = responseStatusText; sourceSize.textContent = formatFileSize(size); charset.textContent = detectedCharset; lineCount.textContent = `${lines} 行`; charCount.textContent = `${chars} 字符`; // 显示源码（添加行号） htmlSource.innerHTML = addLineNumbers(formattedHTML); cssSource.innerHTML = addLineNumbers(inlineCSS); jsSource.innerHTML = addLineNumbers(inlineJS); // 显示结果内容 loadingState.classList.add('hidden'); // 添加动画效果 if (typeof gsap !== 'undefined') { gsap.to(loadingState, { opacity: 0, duration: 0.3, onComplete: () => { resultContent.classList.remove('hidden'); gsap.fromTo(resultContent, { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5, ease: 'power3.out' } ); } }); } else { resultContent.classList.remove('hidden'); } // 显示成功通知 showNotification('success', '获取成功', '去水印获取成功，可查看和下载'); console.log('去水印获取成功:', { title, url, lines, chars, size: formatFileSize(size), status: responseStatusText }); } catch (error) { console.error('获取源码错误:', error); // 显示错误信息 let errorMsg = error.message || '获取源码失败，请检查网络连接或稍后重试'; showError(errorMsg); // 显示调试信息 console.log('获取失败详情:'); console.log('- URL:', url); console.log('- 错误类型:', error.name); console.log('- 错误信息:', error.message); } } // 解析HTML内容 const title = extractTitle(html); const detectedCharset = extractCharset(html); const inlineCSS = extractInlineCSS(html); const inlineJS = extractInlineJS(html); const formattedHTML = formatHTML(html); const lines = html.split('\n').length; const chars = html.length; const size = new Blob([html]).size; // 保存当前数据 currentPageData = { url: url, html: html, css: inlineCSS, js: inlineJS, title: title, charset: detectedCharset, lineCount: lines, charCount: chars, size: size, status: '200 OK' }; // 更新UI websiteTitle.textContent = title; websiteUrlDisplay.textContent = url; responseStatus.textContent = '200 OK'; sourceSize.textContent = formatFileSize(size); charset.textContent = detectedCharset; lineCount.textContent = `${lines} 行`; charCount.textContent = `${chars} 字符`; // 显示源码（添加行号） htmlSource.innerHTML = addLineNumbers(formattedHTML); cssSource.innerHTML = addLineNumbers(inlineCSS); jsSource.innerHTML = addLineNumbers(inlineJS); // 显示结果内容 loadingState.classList.add('hidden'); // 添加动画效果 if (typeof gsap !== 'undefined') { gsap.to(loadingState, { opacity: 0, duration: 0.3, onComplete: () => { resultContent.classList.remove('hidden'); gsap.fromTo(resultContent, { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5, ease: 'power3.out' } ); } }); } else { resultContent.classList.remove('hidden'); } // 显示成功通知 showNotification('success', '获取成功', '去水印获取成功，可查看和下载'); console.log('去水印获取成功:', { title, url, lines, chars, size: formatFileSize(size) }); } catch (error) { console.error('获取源码错误:', error); // 显示错误信息 let errorMsg = error.message || '获取源码失败，请检查网络连接或稍后重试'; showError(errorMsg); // 显示调试信息 console.log('获取失败详情:'); console.log('- URL:', url); console.log('- 错误类型:', error.name); console.log('- 错误信息:', error.message); } } // 显示错误 function showError(message) { loadingState.classList.add('hidden'); // 添加动画效果 if (typeof gsap !== 'undefined') { gsap.to(loadingState, { opacity: 0, duration: 0.3, onComplete: () => { errorState.classList.remove('hidden'); gsap.fromTo(errorState, { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5, ease: 'power3.out' } ); } }); } else { errorState.classList.remove('hidden'); } errorMessage.textContent = message; // 重新初始化图标 lucide.createIcons(); // 显示错误通知 showNotification('error', '获取失败', message); } // 复制到剪贴板 async function copyToClipboard(text) { try { await navigator.clipboard.writeText(text); return true; } catch (err) { // 降级方案 const textArea = document.createElement('textarea'); textArea.value = text; textArea.style.position = 'fixed'; textArea.style.left = '-999999px'; textArea.style.top = '-999999px'; document.body.appendChild(textArea); textArea.focus(); textArea.select(); const success = document.execCommand('copy'); document.body.removeChild(textArea); return success; } } // 下载文件 function downloadFile(content, filename, contentType = 'text/plain') { const blob = new Blob([content], { type: contentType }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } // 处理表单提交 downloadForm.addEventListener('submit', (e) => { e.preventDefault(); let url = websiteUrlInput.value.trim(); console.log('表单提交，原始URL:', url); // 验证URL if (!url) { urlError.textContent = '请输入网站地址'; urlError.classList.remove('hidden'); return; } // 补全URL协议 url = completeUrl(url); // 再次验证URL if (!validateUrl(url)) { urlError.textContent = '请输入有效的网站地址'; urlError.classList.remove('hidden'); return; } // 更新输入框 websiteUrlInput.value = url; // 清除错误 urlError.classList.add('hidden'); // 显示用户反馈 showNotification('info', '开始获取', '正在获取去水印，请稍候...', 0); // 获取去水印 fetchPageSource(url); }); // 下载按钮直接点击事件 downloadBtn.addEventListener('click', (e) => { e.preventDefault(); downloadForm.dispatchEvent(new Event('submit')); }); // 标签页切换 tabButtons.forEach(button => { button.addEventListener('click', () => { const tab = button.dataset.tab; // 移除所有活动状态 tabButtons.forEach(btn => btn.classList.remove('active')); tabContents.forEach(content => content.classList.add('hidden')); // 设置当前活动标签 button.classList.add('active'); document.getElementById(`${tab}Content`).classList.remove('hidden'); }); }); // 复制源码按钮 copySourceBtn.addEventListener('click', async () => { if (!currentPageData) return; // 获取当前活动标签 const activeTab = document.querySelector('.tab-button.active').dataset.tab; let content = ''; switch (activeTab) { case 'html': content = currentPageData.html; break; case 'css': content = currentPageData.css; break; case 'js': content = currentPageData.js; break; } const success = await copyToClipboard(content); if (success) { showNotification('success', '复制成功', `${activeTab.toUpperCase()}源码已复制到剪贴板`); // 添加按钮动画反馈 if (typeof gsap !== 'undefined') { gsap.fromTo(copySourceBtn, { scale: 0.95, backgroundColor: 'rgba(0, 242, 234, 0.2)' }, { scale: 1, backgroundColor: 'transparent', duration: 0.3 } ); } } else { showNotification('error', '复制失败', '无法复制到剪贴板，请手动复制'); } }); // 下载单个文件按钮 downloadFileBtn.addEventListener('click', () => { if (!currentPageData) return; // 获取当前活动标签 const activeTab = document.querySelector('.tab-button.active').dataset.tab; let content = ''; let filename = ''; let contentType = ''; switch (activeTab) { case 'html': content = currentPageData.html; filename = 'index.html'; contentType = 'text/html'; break; case 'css': content = currentPageData.css; filename = 'styles.css'; contentType = 'text/css'; break; case 'js': content = currentPageData.js; filename = 'script.js'; contentType = 'text/javascript'; break; } downloadFile(content, filename, contentType); showNotification('success', '下载成功', `${filename} 已开始下载`); }); // 下载完整源码包按钮 downloadAllBtn.addEventListener('click', async () => { if (!currentPageData) return; try { // 显示加载状态 const originalText = downloadAllBtn.innerHTML; downloadAllBtn.innerHTML = ' 打包中...'; downloadAllBtn.disabled = true; lucide.createIcons(); showNotification('info', '开始打包', '正在创建源码包，请稍候...', 0); // 创建ZIP文件 const zip = new JSZip(); // 添加HTML文件 zip.file('index.html', currentPageData.html); // 添加CSS文件（如果有内容） if (currentPageData.css && currentPageData.css !== '/* 未找到内联CSS */') { zip.file('styles.css', currentPageData.css); } // 添加JavaScript文件（如果有内容） if (currentPageData.js && currentPageData.js !== '// 未找到内联JavaScript') { zip.file('script.js', currentPageData.js); } // 生成文件名（基于网站域名） const url = new URL(currentPageData.url); const domain = url.hostname.replace(/\./g, '-'); const filename = `website-source-${domain}-${new Date().getTime()}.zip`; // 生成并下载ZIP文件 const content = await zip.generateAsync({ type: 'blob' }); saveAs(content, filename); // 恢复按钮状态 downloadAllBtn.innerHTML = originalText; downloadAllBtn.disabled = false; lucide.createIcons(); // 显示成功通知 hideNotification(); showNotification('success', '打包成功', `源码包 ${filename} 已开始下载`); console.log('源码包下载成功:', filename); } catch (error) { console.error('打包下载错误:', error); // 恢复按钮状态 downloadAllBtn.innerHTML = ' 下载完整源码包'; downloadAllBtn.disabled = false; lucide.createIcons(); // 显示错误通知 hideNotification(); showNotification('error', '打包失败', '创建源码包时发生错误，请重试'); // 降级方案：单独下载HTML文件 setTimeout(() => { downloadFile(currentPageData.html, 'website-source.html', 'text/html'); showNotification('info', '降级方案', '已为您下载HTML文件'); }, 1000); } }); // 在浏览器中查看按钮 viewInBrowserBtn.addEventListener('click', () => { if (!currentPageData) return; // 创建一个包含HTML内容的Blob URL const blob = new Blob([currentPageData.html], { type: 'text/html' }); const url = URL.createObjectURL(blob); // 在新窗口中打开 window.open(url, '_blank'); showNotification('success', '已打开', '网页已在新窗口中打开'); }); // 重试按钮 retryBtn.addEventListener('click', () => { const url = websiteUrlInput.value.trim(); if (url) { // 添加按钮加载状态 const originalText = retryBtn.innerHTML; retryBtn.innerHTML = ' 重试中...'; retryBtn.disabled = true; lucide.createIcons(); // 清除之前的错误状态 errorState.classList.add('hidden'); // 显示加载状态 loadingState.classList.remove('hidden'); setTimeout(() => { fetchPageSource(url); retryBtn.innerHTML = originalText; retryBtn.disabled = false; lucide.createIcons(); }, 500); } }); // 输入新地址按钮 newUrlBtn.addEventListener('click', () => { resultCard.classList.add('hidden'); websiteUrlInput.value = ''; websiteUrlInput.focus(); }); // 输入框事件 websiteUrlInput.addEventListener('input', () => { urlError.classList.add('hidden'); }); // 粘贴事件处理 websiteUrlInput.addEventListener('paste', (e) => { setTimeout(() => { const pastedText = websiteUrlInput.value.trim(); console.log('粘贴的原始文本:', pastedText); // 自动补全协议 if (pastedText && !pastedText.match(/^https?:\/\//i)) { const completedUrl = completeUrl(pastedText); if (validateUrl(completedUrl)) { websiteUrlInput.value = completedUrl; showNotification('success', 'URL补全', '已自动补全协议前缀', 2000); } } // 清除错误提示 urlError.classList.add('hidden'); }, 100); }); // 关闭通知 closeNotification.addEventListener('click', hideNotification); // 点击通知外部关闭 notification.addEventListener('click', (e) => { if (e.target === notification) { hideNotification(); } }); // 页面加载完成后聚焦输入框 window.addEventListener('load', () => { setTimeout(() => { websiteUrlInput.focus(); }, 500); }); // 添加鼠标移动视差效果 document.addEventListener('mousemove', (e) => { const x = e.clientX / window.innerWidth; const y = e.clientY / window.innerHeight; const decorations = document.querySelectorAll('.fixed[class*="bg-primary"], .fixed[class*="bg-secondary"]'); decorations.forEach((dec, index) => { const speed = (index + 1) * 5; dec.style.transform = `translate(${x * speed}px, ${y * speed}px)`; }); });