Tamanho e Desempenho
- html2canvas:
html2canvasé mais pesada em comparação com as outras duas, pois realiza uma renderização completa do elemento HTML, incluindo estilos complexos e imagens de fundo. Isso pode afetar o desempenho, especialmente ao capturar elementos grandes ou complexos. - html-to-image:
html-to-imagetambém é uma biblioteca leve, projetada para ser eficiente na conversão de elementos HTML em imagens. Ela oferece um bom equilíbrio entre desempenho e funcionalidade, tornando-a adequada para a maioria dos aplicativos da web. - dom-to-image:
dom-to-imageé uma biblioteca leve que oferece conversão rápida de elementos DOM em imagens. Seu pequeno tamanho de pacote a torna ideal para aplicativos onde o desempenho e o tempo de carregamento são preocupações.
Suporte a CSS
- html2canvas:
html2canvastem o suporte mais abrangente para estilos CSS, incluindo propriedades complexas, imagens de fundo e fontes personalizadas. Ele tenta renderizar o elemento HTML da mesma forma que um navegador, o que resulta em capturas de tela mais precisas. - html-to-image:
html-to-imagefornece suporte melhorado para estilos CSS, incluindo suporte para SVG, o que a torna mais versátil na captura de elementos HTML estilizados. Ela lida bem com a maioria das propriedades CSS, tornando-a mais confiável para conversões precisas. - dom-to-image:
dom-to-imageoferece suporte básico a estilos CSS, incluindo cores, fontes e algumas propriedades de layout. No entanto, seu suporte a estilos CSS avançados e animações é limitado.
Manipulação de Imagens
- html2canvas:
html2canvascaptura imagens de fundo e SVG como parte do processo de renderização, mas não oferece manipulação de imagens após a captura. Ele se concentra em capturar o conteúdo visual com precisão. - html-to-image:
html-to-imagepermite a inclusão de imagens de fundo e SVG, mas não possui recursos de manipulação de imagens integrados. É mais focada na conversão do que na edição. - dom-to-image:
dom-to-imagepermite alguma manipulação de imagens, como a adição de imagens de fundo e SVG durante o processo de conversão. No entanto, ele não oferece recursos avançados de edição de imagens.
Exemplo de Código
- html2canvas:
Exemplo de uso do
html2canvasimport html2canvas from 'html2canvas'; const element = document.getElementById('my-element'); html2canvas(element) .then((canvas) => { document.body.appendChild(canvas); }) .catch((error) => { console.error('Erro ao capturar o elemento:', error); }); - html-to-image:
Exemplo de uso do
html-to-imageimport { toPng } from 'html-to-image'; const node = document.getElementById('my-node'); toPng(node) .then((dataUrl) => { const img = new Image(); img.src = dataUrl; document.body.appendChild(img); }) .catch((error) => { console.error('Erro ao capturar a imagem:', error); }); - dom-to-image:
Exemplo de uso do
dom-to-imageimport { toPng } from 'dom-to-image'; const node = document.getElementById('my-node'); toPng(node) .then((dataUrl) => { const img = new Image(); img.src = dataUrl; document.body.appendChild(img); }) .catch((error) => { console.error('Erro ao capturar a imagem:', error); });