Cómo usar html2canvas para convertir código html en imágenes

html2canvas es una biblioteca de código abierto muy famosa para tomar capturas de pantalla de las páginas web del navegador. Es fácil de usar y tiene funciones potentes.

El uso de html2canvas es muy simple. Es tan simple como pasar un elemento DOM y luego obtener el lienzo mediante devolución de llamada:

1.html2canvas genera contenido de imagen de lienzo analizando el estilo real del elemento, por lo que tiene requisitos para el diseño real y la visualización visual del elemento. Si desea tomar una captura de pantalla completa, es mejor separar el elemento del flujo del documento (como posición: absoluta)

2. La imagen del lienzo generada de forma predeterminada es muy borrosa en los dispositivos retina. Procesarla en una imagen 2x puede resolver este problema:

 var w = $(#code).width(); var h = $(#code).height();//Establezca el ancho y el alto del lienzo en 2 veces el ancho y el alto del contenedor var canvas = document .createElement(lienzo); lienzo.ancho = w * 2; lienzo.alto = h * 2; lienzo.estilo.ancho = w + px.estilo.alto = h + px; canvas.getContext(2d);// Luego escale el lienzo y duplique la imagen para dibujar en el lienzo context.scale(2,2); html2canvas(document.querySelector(#code), { canvas: canvas, onrendered: function ( lienzo) { ... } });

1.estructura del código html

 <section class=share_popup id=html2canvas> <p>El uso de html2canvas es muy simple, tan simple como pasar un elemento DOM y luego obtener el lienzo a través de una devolución de llamada</p> <p><img src=1.jpg >< /p> <p>El uso de html2canvas es muy simple, tan simple como pasar un elemento DOM y luego obtener el lienzo a través de una devolución de llamada</p> </section>

Estructura del código 2.js

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

Lo anterior es la introducción del editor sobre cómo usar html2canvas para convertir código html en imágenes. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!