| <!DOCTYPE html>
|
| <html lang="zh-CN">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>🖼️ 直接图片URL测试</title>
|
| <style>
|
| body {
|
| font-family: 'Microsoft YaHei', sans-serif;
|
| max-width: 1200px;
|
| margin: 0 auto;
|
| padding: 20px;
|
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| min-height: 100vh;
|
| color: #333;
|
| }
|
| .container {
|
| background: white;
|
| border-radius: 15px;
|
| padding: 30px;
|
| box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
| }
|
| .header {
|
| text-align: center;
|
| margin-bottom: 30px;
|
| padding: 20px;
|
| background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
|
| color: white;
|
| border-radius: 10px;
|
| }
|
| .test-section {
|
| margin: 30px 0;
|
| padding: 20px;
|
| border: 2px solid #e0e0e0;
|
| border-radius: 10px;
|
| }
|
| .test-button {
|
| background: #4CAF50;
|
| color: white;
|
| border: none;
|
| padding: 12px 24px;
|
| border-radius: 5px;
|
| cursor: pointer;
|
| margin: 10px;
|
| font-size: 16px;
|
| font-weight: bold;
|
| }
|
| .test-button:hover { background: #45a049; }
|
| .result-box {
|
| margin: 15px 0;
|
| padding: 15px;
|
| border-radius: 5px;
|
| font-family: monospace;
|
| white-space: pre-wrap;
|
| max-height: 400px;
|
| overflow-y: auto;
|
| }
|
| .result-box.success { background: #e8f5e8; color: #2e7d32; border: 1px solid #4caf50; }
|
| .result-box.error { background: #fdeaea; color: #c62828; border: 1px solid #f44336; }
|
| .result-box.info { background: #e3f2fd; color: #1565c0; border: 1px solid #2196f3; }
|
| .image-preview {
|
| max-width: 100%;
|
| border: 2px solid #ddd;
|
| border-radius: 8px;
|
| margin: 15px 0;
|
| }
|
| .url-display {
|
| background: #f5f5f5;
|
| padding: 10px;
|
| border-radius: 5px;
|
| font-family: monospace;
|
| word-break: break-all;
|
| margin: 10px 0;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="container">
|
| <div class="header">
|
| <h1>🖼️ 直接图片URL测试</h1>
|
| <p>测试后端生成的直接图片链接是否可以被其他网站引用</p>
|
| </div>
|
|
|
|
|
| <div class="test-section">
|
| <h3>📝 测试参数</h3>
|
| <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0;">
|
| <div>
|
| <label>用户ID: <input type="text" id="userId" value="PS01" style="width: 100%; padding: 8px;"></label>
|
| </div>
|
| <div>
|
| <label>PPT ID: <input type="text" id="pptId" placeholder="输入PPT ID" style="width: 100%; padding: 8px;"></label>
|
| </div>
|
| <div>
|
| <label>幻灯片索引: <input type="number" id="slideIndex" value="0" style="width: 100%; padding: 8px;"></label>
|
| </div>
|
| <div>
|
| <label>格式:
|
| <select id="format" style="width: 100%; padding: 8px;">
|
| <option value="svg">SVG</option>
|
| <option value="jpeg">JPEG</option>
|
| <option value="png">PNG</option>
|
| </select>
|
| </label>
|
| </div>
|
| </div>
|
|
|
| <button class="test-button" onclick="testDirectImage()">🖼️ 测试直接图片URL</button>
|
| <button class="test-button" onclick="testImageInIframe()">🌐 测试在iframe中引用</button>
|
| <button class="test-button" onclick="testImageTag()">📷 测试作为img标签</button>
|
| </div>
|
|
|
|
|
| <div class="test-section">
|
| <h3>🔗 生成的图片URL</h3>
|
| <div id="urlDisplay" class="url-display">
|
| 点击测试按钮生成URL...
|
| </div>
|
| <button class="test-button" onclick="copyURL()" id="copyBtn" style="display: none;">📋 复制URL</button>
|
| </div>
|
|
|
|
|
| <div class="test-section">
|
| <h3>📸 图片预览</h3>
|
| <div id="imagePreview" style="text-align: center;">
|
| <p>图片将在这里显示...</p>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="test-section">
|
| <h3>📊 测试结果</h3>
|
| <div id="testResults" class="result-box info" style="display: none;"></div>
|
| </div>
|
|
|
|
|
| <div class="test-section">
|
| <h3>🌍 外部引用测试</h3>
|
| <p>以下测试模拟其他网站引用我们的图片URL：</p>
|
|
|
| <h4>1. 作为IMG标签引用</h4>
|
| <div id="imgTagTest" style="border: 1px solid #ddd; padding: 20px; margin: 10px 0; background: #f9f9f9;">
|
| <p>IMG标签测试区域</p>
|
| </div>
|
|
|
| <h4>2. 作为CSS背景图片</h4>
|
| <div id="cssBackgroundTest" style="width: 100%; height: 200px; border: 1px solid #ddd; margin: 10px 0; background: #f9f9f9;">
|
| <p style="text-align: center; line-height: 200px;">CSS背景图片测试区域</p>
|
| </div>
|
|
|
| <h4>3. 在iframe中显示</h4>
|
| <div id="iframeTest" style="border: 1px solid #ddd; margin: 10px 0;">
|
| <p>iframe测试区域</p>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script>
|
| let currentImageURL = '';
|
|
|
| function showResult(message, type = 'info') {
|
| const resultsDiv = document.getElementById('testResults');
|
| resultsDiv.textContent = message;
|
| resultsDiv.className = `result-box ${type}`;
|
| resultsDiv.style.display = 'block';
|
| }
|
|
|
| function generateImageURL() {
|
| const userId = document.getElementById('userId').value || 'PS01';
|
| const pptId = document.getElementById('pptId').value;
|
| const slideIndex = document.getElementById('slideIndex').value || '0';
|
| const format = document.getElementById('format').value || 'svg';
|
|
|
| if (!pptId) {
|
| alert('请输入PPT ID！');
|
| return null;
|
| }
|
|
|
|
|
| const baseURL = window.location.origin;
|
| currentImageURL = `${baseURL}/api/public/direct-image/${userId}/${pptId}/${slideIndex}?format=${format}`;
|
|
|
|
|
| document.getElementById('urlDisplay').textContent = currentImageURL;
|
| document.getElementById('copyBtn').style.display = 'inline-block';
|
|
|
| return currentImageURL;
|
| }
|
|
|
| async function testDirectImage() {
|
| const url = generateImageURL();
|
| if (!url) return;
|
|
|
| showResult('🚀 正在测试直接图片URL...', 'info');
|
|
|
| try {
|
| const startTime = performance.now();
|
| const response = await fetch(url);
|
| const endTime = performance.now();
|
|
|
| const contentType = response.headers.get('Content-Type');
|
| const contentLength = response.headers.get('Content-Length');
|
| const cacheControl = response.headers.get('Cache-Control');
|
| const generation = response.headers.get('X-Generation-Time');
|
|
|
| if (response.ok) {
|
| const responseTime = Math.round(endTime - startTime);
|
|
|
| let resultText = `✅ 图片URL测试成功！\n\n`;
|
| resultText += `📊 响应信息:\n`;
|
| resultText += ` - 状态码: ${response.status}\n`;
|
| resultText += ` - 内容类型: ${contentType}\n`;
|
| resultText += ` - 响应时间: ${responseTime}ms\n`;
|
| resultText += ` - 生成时间: ${generation || 'N/A'}\n`;
|
| resultText += ` - 缓存策略: ${cacheControl || 'N/A'}\n`;
|
| if (contentLength) resultText += ` - 文件大小: ${contentLength} bytes\n`;
|
|
|
| resultText += `\n🔗 URL测试:\n`;
|
| resultText += ` - 可以直接访问: ✅\n`;
|
| resultText += ` - 返回图片数据: ✅\n`;
|
| resultText += ` - 支持跨域: ${response.headers.get('Access-Control-Allow-Origin') ? '✅' : '❌'}\n`;
|
|
|
| showResult(resultText, 'success');
|
|
|
|
|
| updateImagePreview(url);
|
|
|
| } else {
|
| showResult(`❌ 图片URL测试失败!\n状态码: ${response.status}\n错误: ${await response.text()}`, 'error');
|
| }
|
|
|
| } catch (error) {
|
| showResult(`❌ 网络请求失败: ${error.message}`, 'error');
|
| }
|
| }
|
|
|
| function updateImagePreview(url) {
|
| const previewDiv = document.getElementById('imagePreview');
|
| previewDiv.innerHTML = `
|
| <img src="${url}" alt="PPT页面预览" class="image-preview"
|
| onload="showResult(document.getElementById('testResults').textContent + '\\n\\n📸 图片加载成功！可以正常显示。', 'success')"
|
| onerror="showResult(document.getElementById('testResults').textContent + '\\n\\n❌ 图片加载失败！', 'error')">
|
| `;
|
| }
|
|
|
| function testImageTag() {
|
| const url = generateImageURL();
|
| if (!url) return;
|
|
|
| const imgTagDiv = document.getElementById('imgTagTest');
|
| imgTagDiv.innerHTML = `
|
| <h5>IMG标签引用测试：</h5>
|
| <img src="${url}" alt="PPT页面" style="max-width: 100%; border: 1px solid #ccc;"
|
| onload="console.log('IMG标签加载成功'); this.nextSibling.textContent = '✅ IMG标签引用成功！'"
|
| onerror="console.log('IMG标签加载失败'); this.nextSibling.textContent = '❌ IMG标签引用失败！'">
|
| <p style="color: #666;">加载中...</p>
|
| `;
|
|
|
| showResult(`🖼️ 正在测试IMG标签引用...\nURL: ${url}`, 'info');
|
| }
|
|
|
| function testImageInIframe() {
|
| const url = generateImageURL();
|
| if (!url) return;
|
|
|
| const iframeDiv = document.getElementById('iframeTest');
|
| iframeDiv.innerHTML = `
|
| <h5>iframe引用测试：</h5>
|
| <iframe src="${url}" style="width: 100%; height: 400px; border: 1px solid #ccc;"
|
| onload="console.log('iframe加载成功')"
|
| onerror="console.log('iframe加载失败')"></iframe>
|
| `;
|
|
|
| showResult(`🌐 正在测试iframe引用...\nURL: ${url}`, 'info');
|
| }
|
|
|
| function copyURL() {
|
| if (currentImageURL) {
|
| navigator.clipboard.writeText(currentImageURL).then(() => {
|
| alert('URL已复制到剪贴板！');
|
| }).catch(() => {
|
|
|
| const textArea = document.createElement('textarea');
|
| textArea.value = currentImageURL;
|
| document.body.appendChild(textArea);
|
| textArea.select();
|
| document.execCommand('copy');
|
| document.body.removeChild(textArea);
|
| alert('URL已复制到剪贴板！');
|
| });
|
| }
|
| }
|
|
|
|
|
| window.addEventListener('load', function() {
|
| console.log('🖼️ 直接图片URL测试页面加载完成');
|
|
|
|
|
| const urlParams = new URLSearchParams(window.location.search);
|
| const pptId = urlParams.get('pptId');
|
| if (pptId) {
|
| document.getElementById('pptId').value = pptId;
|
| }
|
| });
|
| </script>
|
| </body>
|
| </html> |
