Imagens Desaparecendo ao Exportar Markdown para Word? Como Resolvemos Problemas de Cross-Origin e Compatibilidade WebP

Ao construir o recurso de exportação Markdown para Word no md-to.com, encontramos um bug frustrante: imagens no conteúdo Markdown dos usuários desapareciam após a exportação para Word.

O Problema

Quando um usuário cola Markdown com imagens hospedadas em servidores externos (como GitHub, Imgur, etc.), duas coisas podem dar errado:

1. Política CORS: O navegador bloqueia o download de imagens de domínios diferentes
2. Formato WebP: O Word não suporta imagens WebP nativamente

Solução 1: Proxy de Imagens via Canvas

Para contornar as restrições CORS, usamos o elemento <canvas> do HTML:

async function fetchImageAsBase64(url) {
  const img = new Image();
  img.crossOrigin = 'anonymous';
  // Carregar imagem e converter para base64 via canvas
}

Solução 2: Conversão de WebP para PNG

Detectamos imagens WebP e as convertemos automaticamente para PNG antes de incorporar no documento Word.

Lições Aprendidas

• Sempre considere restrições CORS ao processar conteúdo do usuário no navegador
• Verifique a compatibilidade de formatos de imagem com o formato de destino
• Forneça fallbacks graciosos quando a conversão de imagens falhar

Conclusão

Esses desafios técnicos nos ensinaram muito sobre processamento de imagens no lado do cliente. Hoje, o conversor de Markdown para Word do md-to.com lida com imagens de forma robusta, garantindo que seus documentos Word fiquem perfeitos.