Developer tools guide

const exportElement = async () => {
  // 1. Inject fix styles
  const style = document.createElement('style');
  style.id = 'export-fix-style';
  document.head.appendChild(style);
  
  if (style.sheet) {
    style.sheet.insertRule('* { box-sizing: border-box !important; }', 0);
    style.sheet.insertRule('img { display: inline-block !important; }', 1);
    style.sheet.insertRule('div { box-sizing: border-box !important; line-height: 1.2 !important; }', 2);
    style.sheet.insertRule('span { line-height: 1.2 !important; }', 3);
  }
  
  try {
    // 2. Wait for assets (images + fonts)
    await Promise.all([
      ...document.images.map(img => 
        img.complete ? Promise.resolve() : new Promise(resolve => {
          img.onload = img.onerror = resolve;
        })
      ),
      document.fonts.ready // Wait for fonts
    ]);
    
    // 3. Capture (see key options below)
    const canvas = await html2canvas(element, {
      scale: 3, // High-DPI
      foreignObjectRendering: false, // Prefer classic rendering
      useCORS: true, // Cross-origin images
      allowTaint: true // With useCORS for cross-origin
    });
    
    return canvas.toDataURL('image/png', 1.0);
  } finally {
    // 4. Remove temp styles even on error
    document.getElementById('export-fix-style')?.remove();
  }
};