// 矢量元素导出测试脚本 // 在浏览器控制台中运行此脚本来测试修复效果 (function() { console.log('=== PPT矢量元素导出测试开始 ==='); // 测试SVG元素检测 function testSVGElementDetection() { console.log('\n1. 测试SVG元素检测...'); const svgElements = document.querySelectorAll('svg'); console.log(`找到 ${svgElements.length} 个SVG元素`); svgElements.forEach((svg, index) => { const clientWidth = svg.clientWidth; const clientHeight = svg.clientHeight; const boundingRect = svg.getBoundingClientRect(); const computedStyle = window.getComputedStyle(svg); const hasValidSize = ( (clientWidth > 0 && clientHeight > 0) || (boundingRect.width > 0 && boundingRect.height > 0) || (parseFloat(computedStyle.width) > 0 && parseFloat(computedStyle.height) > 0) ); console.log(`SVG ${index + 1}:`, { element: svg, clientSize: `${clientWidth}x${clientHeight}`, boundingRect: `${boundingRect.width}x${boundingRect.height}`, computedSize: `${computedStyle.width}x${computedStyle.height}`, hasValidSize, classes: svg.className.baseVal || svg.className }); }); } // 测试SVG序列化 function testSVGSerialization() { console.log('\n2. 测试SVG序列化...'); const svgElements = document.querySelectorAll('svg'); let successCount = 0; let failCount = 0; svgElements.forEach((svg, index) => { try { const serializer = new XMLSerializer(); const svgString = serializer.serializeToString(svg); if (svgString && svgString.length > 0) { successCount++; console.log(`✓ SVG ${index + 1} 序列化成功 (${svgString.length} 字符)`); } else { failCount++; console.log(`✗ SVG ${index + 1} 序列化返回空字符串`); } } catch (error) { failCount++; console.log(`✗ SVG ${index + 1} 序列化失败:`, error.message); } }); console.log(`序列化结果: ${successCount} 成功, ${failCount} 失败`); } // 测试Base64转换 function testBase64Conversion() { console.log('\n3. 测试Base64转换...'); const svgElements = document.querySelectorAll('svg'); let successCount = 0; let failCount = 0; svgElements.forEach((svg, index) => { try { // 模拟改进后的svg2Base64函数 const clonedElement = svg.cloneNode(true); if (clonedElement.tagName.toLowerCase() === 'svg') { clonedElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); clonedElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink'); } const serializer = new XMLSerializer(); const svgString = serializer.serializeToString(clonedElement); if (!svgString || svgString.length === 0) { throw new Error('SVG序列化返回空字符串'); } const base64 = btoa(unescape(encodeURIComponent(svgString))); const dataUrl = `data:image/svg+xml;base64,${base64}`; if (base64 && base64.length > 0) { successCount++; console.log(`✓ SVG ${index + 1} Base64转换成功 (${dataUrl.length} 字符)`); } else { failCount++; console.log(`✗ SVG ${index + 1} Base64转换返回空字符串`); } } catch (error) { failCount++; console.log(`✗ SVG ${index + 1} Base64转换失败:`, error.message); } }); console.log(`Base64转换结果: ${successCount} 成功, ${failCount} 失败`); } // 测试形状元素检测 function testShapeElementDetection() { console.log('\n4. 测试形状元素检测...'); // 查找可能的形状元素 const shapeElements = document.querySelectorAll('[class*="base-element-"]'); console.log(`找到 ${shapeElements.length} 个可能的形状元素`); shapeElements.forEach((element, index) => { const svg = element.querySelector('svg'); if (svg) { const elementId = element.className.match(/base-element-([^\s]+)/); console.log(`形状元素 ${index + 1}:`, { elementId: elementId ? elementId[1] : 'unknown', element: element, svg: svg, svgSize: `${svg.clientWidth}x${svg.clientHeight}`, hasValidSize: svg.clientWidth > 0 && svg.clientHeight > 0 }); } }); } // 测试渲染等待机制 function testRenderWait() { console.log('\n5. 测试渲染等待机制...'); return new Promise((resolve) => { const startTime = performance.now(); // 强制重绘 document.body.offsetHeight; // 等待下一个动画帧 requestAnimationFrame(() => { requestAnimationFrame(() => { const endTime = performance.now(); console.log(`✓ 渲染等待完成,耗时: ${(endTime - startTime).toFixed(2)}ms`); resolve(); }); }); }); } // 运行所有测试 async function runAllTests() { try { testSVGElementDetection(); testSVGSerialization(); testBase64Conversion(); testShapeElementDetection(); await testRenderWait(); console.log('\n=== 测试完成 ==='); console.log('如果发现问题,请检查:'); console.log('1. SVG元素是否正确渲染'); console.log('2. 元素尺寸是否有效'); console.log('3. SVG序列化是否成功'); console.log('4. Base64转换是否正常'); } catch (error) { console.error('测试过程中发生错误:', error); } } // 导出测试函数到全局作用域 window.vectorExportTest = { runAllTests, testSVGElementDetection, testSVGSerialization, testBase64Conversion, testShapeElementDetection, testRenderWait }; console.log('测试函数已加载,使用 vectorExportTest.runAllTests() 运行所有测试'); // 自动运行测试 runAllTests(); })();