Como usar o html2canvas para converter código HTML em imagens

html2canvas é uma biblioteca de código aberto muito famosa para fazer capturas de tela de páginas da web do navegador. É fácil de usar e possui funções poderosas.

O uso do html2canvas é muito simples, basta passar um elemento DOM e depois obter o canvas por meio de callback:

1.html2canvas gera conteúdo de imagem de tela analisando o estilo real do elemento, portanto, possui requisitos para o layout real e exibição visual do elemento. Se você quiser fazer uma captura de tela completa, é melhor separar o elemento do fluxo do documento (como posição: absoluto)

2. A imagem da tela gerada por padrão fica muito desfocada em dispositivos retina. Processá-la em uma imagem 2x pode resolver este problema:

 var w = $(#code).width(); var h = $(#code).height();//Define a largura e a altura da tela para 2 vezes a largura e a altura do contêiner var canvas = document .createElement(canvas ); canvas.width = w * 2; canvas.height = h * 2; canvas.style.width = w + px; canvas.getContext(2d);//Em seguida, dimensione a tela e duplique a imagem para desenhar na tela context.scale(2,2); html2canvas(document.querySelector(#code), { canvas: canvas, onrendered: function ( tela) { ... } });

Estrutura de código 1.html

 <section class=share_popup id=html2canvas> <p>O uso do html2canvas é muito simples, tão simples quanto passar um elemento DOM e depois obter a tela por meio de um retorno de chamada</p> <p><img src=1.jpg >< /p> <p>O uso do html2canvas é muito simples, tão simples quanto passar um elemento DOM e depois obter o canvas por meio de um retorno de chamada</p> </section>

Estrutura de código 2.js

 var str = $('#html2canvas'); //console.log(str); html2canvas([str.get(0)], { onrendered: function (canvas) { var image = canvas.toDataURL(image/png) ; var pHtml = <img src=+image+ />;

O texto acima é a introdução do editor sobre como usar o html2canvas para converter código HTML em imagens. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!