Spaces:

CatPtain
/

web_ppt

Paused

App Files Files Community

CatPtain commited on Jun 20

Commit

d6d7385

verified ·

1 Parent(s): b7bb7d4

Upload test-direct-image.html

Browse files

Files changed (1) hide show

test-direct-image.html +307 -0

test-direct-image.html ADDED Viewed

	@@ -0,0 +1,307 @@

+<!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>
+        <!-- URL显示区域 -->
+        <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;
+            }
+            // 构建URL
+            const baseURL = window.location.origin;
+            currentImageURL = `${baseURL}/api/public/direct-image/${userId}/${pptId}/${slideIndex}?format=${format}`;
+            // 显示URL
+            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测试页面加载完成');
+            // 如果URL中有参数，自动填充
+            const urlParams = new URLSearchParams(window.location.search);
+            const pptId = urlParams.get('pptId');
+            if (pptId) {
+                document.getElementById('pptId').value = pptId;
+            }
+        });
+    </script>
+</body>
+</html>