|
|
<!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> |
