| <!DOCTYPE html>
|
| <html lang="zh">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>URL Parser & Screenshot Tool</title>
|
| <style>
|
| * {
|
| margin: 0;
|
| padding: 0;
|
| box-sizing: border-box;
|
| }
|
|
|
| body {
|
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
| line-height: 1.6;
|
| padding: 2rem;
|
| max-width: 1200px;
|
| margin: 0 auto;
|
| background-color: #f5f5f5;
|
| }
|
|
|
| .container {
|
| background-color: white;
|
| padding: 2rem;
|
| border-radius: 8px;
|
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
| }
|
|
|
| h1 {
|
| color: #333;
|
| margin-bottom: 1.5rem;
|
| text-align: center;
|
| }
|
|
|
| .input-group {
|
| margin-bottom: 2rem;
|
| }
|
|
|
| #inputBox {
|
| width: 100%;
|
| padding: 0.8rem;
|
| font-size: 1rem;
|
| border: 2px solid #ddd;
|
| border-radius: 4px;
|
| transition: border-color 0.3s;
|
| }
|
|
|
| #inputBox:focus {
|
| outline: none;
|
| border-color: #007bff;
|
| }
|
|
|
| #urls {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 0.8rem;
|
| }
|
|
|
| #urls a {
|
| color: #007bff;
|
| text-decoration: none;
|
| padding: 0.5rem;
|
| background-color: #f8f9fa;
|
| border-radius: 4px;
|
| transition: background-color 0.3s;
|
| }
|
|
|
| #urls a:hover {
|
| background-color: #e9ecef;
|
| text-decoration: underline;
|
| }
|
|
|
| .screenshot-btn {
|
| display: inline-block;
|
| padding: 0.4rem 0.8rem;
|
| margin-left: 0.5rem;
|
| background-color: #28a745;
|
| color: white;
|
| border: none;
|
| border-radius: 4px;
|
| cursor: pointer;
|
| font-size: 0.9rem;
|
| transition: background-color 0.3s;
|
| }
|
|
|
| .screenshot-btn:hover {
|
| background-color: #218838;
|
| }
|
|
|
| .preview-container {
|
| margin-top: 1rem;
|
| border: 1px solid #ddd;
|
| border-radius: 4px;
|
| overflow: hidden;
|
| }
|
|
|
| .preview-image {
|
| max-width: 100%;
|
| height: auto;
|
| display: block;
|
| }
|
|
|
| .loading {
|
| text-align: center;
|
| padding: 2rem;
|
| color: #666;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="container">
|
| <h1>URL 解析 & 截图工具</h1>
|
| <div class="input-group">
|
| <input type="text"
|
| id="inputBox"
|
| placeholder="粘贴包含URL的文本..."
|
| onblur="parseUrls()"
|
| onchange="parseUrls()">
|
| </div>
|
| <div id="urls"></div>
|
| <div id="preview-container" class="preview-container" style="display: none;">
|
| <div id="loading" class="loading">加载中...</div>
|
| <img id="preview-image" class="preview-image" style="display: none;">
|
| </div>
|
| </div>
|
|
|
| <script>
|
| async function takeScreenshot(url) {
|
| const previewContainer = document.getElementById('preview-container');
|
| const loading = document.getElementById('loading');
|
| const previewImage = document.getElementById('preview-image');
|
|
|
| previewContainer.style.display = 'block';
|
| loading.style.display = 'block';
|
| previewImage.style.display = 'none';
|
|
|
| try {
|
| const response = await fetch(`/screenshot?url=${encodeURIComponent(url)}`);
|
| if (response.ok) {
|
| const blob = await response.blob();
|
| const imageUrl = URL.createObjectURL(blob);
|
| previewImage.src = imageUrl;
|
| previewImage.style.display = 'block';
|
| } else {
|
| loading.textContent = '截图失败，请重试';
|
| }
|
| } catch (error) {
|
| loading.textContent = '截图失败，请重试';
|
| } finally {
|
| loading.style.display = 'none';
|
| }
|
| }
|
|
|
| function parseUrls() {
|
| const inputBox = document.getElementById('inputBox');
|
| const pastedText = inputBox.value;
|
| const urlPattern = /(\b(?:https?:\/\/)?(?:[\da-z\.-]+)\.(?:[a-z\.]{2,6})(?:[\/\w\.-]*)*\/?(?:\?[^\s]*)?)/gi;
|
| const urls = pastedText.match(urlPattern);
|
|
|
| if (urls) {
|
| const urlsContainer = document.getElementById('urls');
|
| urlsContainer.innerHTML = '';
|
|
|
| urls.forEach(url => {
|
| let fullUrl = url;
|
| if (!/^https?:\/\//i.test(url)) {
|
| fullUrl = 'https://' + url;
|
| }
|
|
|
| const urlContainer = document.createElement('div');
|
| urlContainer.style.display = 'flex';
|
| urlContainer.style.alignItems = 'center';
|
|
|
| const linkElement = document.createElement('a');
|
| linkElement.href = fullUrl;
|
| linkElement.textContent = fullUrl;
|
| linkElement.target = '_blank';
|
|
|
| const screenshotBtn = document.createElement('button');
|
| screenshotBtn.textContent = '截图';
|
| screenshotBtn.className = 'screenshot-btn';
|
| screenshotBtn.onclick = () => {
|
| takeScreenshot(fullUrl);
|
| };
|
|
|
| urlContainer.appendChild(linkElement);
|
| urlContainer.appendChild(screenshotBtn);
|
| urlsContainer.appendChild(urlContainer);
|
| });
|
| }
|
| }
|
| </script>
|
| </body>
|
| </html> |
