Código de muestra para usar html2canvas.js para capturar capturas de pantalla de páginas y mostrarlas o cargarlas

Recientemente utilicé html2canvas.js al escribir proyectos, que pueden realizar la función de captura de pantalla de la página, pero encontré muchos obstáculos, así que escribiré un ensayo para registrarlos.

Al utilizar html2canvas, puede encontrar problemas como que solo se puede capturar la interfaz visual, la captura de pantalla no tiene color de fondo y la etiqueta svg no se puede capturar. La siguiente es una explicación detallada.

No hace falta decir que esto se puede obtener de github: https://github.com/niklasvh/html2canvas

También puede importar el enlace directamente: <script src=https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js></script>

También es muy sencillo de usar. Puede encontrar la API específica en línea y simplemente usar image/png para generar imágenes png.

Entre ellos, $(#xxx) es el div que desea interceptar. Se puede obtener a través de jquery. Por supuesto, también se puede obtener a través del documento.

 html2canvas($(#xxx), { onrendered: function (lienzo) { var url = canvas.toDataURL(image/png); window.location.href = url; } });

Para otros tipos de imágenes como jpg, image/jpeg, etc., puede consultar la API usted mismo.

De hecho, la captura de pantalla simple se completó aquí. Si la interfaz es un poco más complicada, pueden aparecer varios errores.

Cuando interceptamos un div, si hay una etiqueta svg en el div, no se puede interceptar en circunstancias normales. Por ejemplo, si interceptamos un diagrama de flujo, obtendremos algo como esto:

Se puede ver que las líneas del diagrama de flujo no se interceptan, es decir, el svg no se intercepta. La solución en este momento es convertir el svg en lienzo y luego tomar una captura de pantalla y cargar el código directamente.

Cada bucle aquí es recorrer todas las etiquetas svg y convertirlas todas en lienzo.

 if (typeof html2canvas! == 'undefinido') { // El siguiente es el procesamiento de svg var nodesToRecover = []; var nodesToRemove = []; ( índice, nodo) { var parentNode = nodo.parentNode; var svg = node.outerHTML.trim(); var lienzo = document.createElement('lienzo'); lienzo.ancho = 650; lienzo.altura = 798; canvg(lienzo, svg); .posición; lienzo.estilo.izquierda += nodo.estilo.izquierda; lienzo.estilo.top += nodo.estilo.top } nodesToRecover.push({ padre: parentNode, hijo: nodo }); parentNode.removeChild(nodo); nodesToRemove.push({ padre: parentNode, hijo: lienzo });

Aquí se necesitan canvg.js y su archivo dependiente rgbcolor.js. Se pueden descargar directamente de Internet o importar directamente.

En realidad, esto es muy simple porque es transparente de forma predeterminada. Hay un parámetro de fondo en html2canvas para agregar un color de fondo, de la siguiente manera:

 html2canvas(cloneDom, { onrendered: function(lienzo) { var url =canvas.toDataURL(imagen/png); }, fondo:#fafafa});

Si el div que necesita ser interceptado excede la interfaz, puede encontrar el problema de una interceptación incompleta. Como se muestra en la imagen de arriba, solo hay la mitad del contenido. Esto se debe a que la parte invisible está oculta y html2canvas no puede interceptar. DOM oculto.

Entonces, la solución en este momento es usar la clonación, colocar una copia de la parte que necesita ser interceptada en la parte inferior de la página y luego usar html2canvas para interceptar el div completo. Una vez completada la interceptación, elimine esta parte del. contenido. El código completo es el siguiente:

 function showQRCode() { scrollTo(0, 0); // Clonar nodo, el valor predeterminado es falso, es decir, los atributos del método no se copian y verdadero son todas las copias. var cloneDom = $(#d1).clone(true); //Establece el atributo de índice z del nodo clonado, siempre que sea inferior al nodo que se está clonando. cloneDom.css({ color de fondo: #fafafa, posición: absoluta, superior: 0px, índice z: -1, altura: 798, ancho: 650 }); /El siguiente es el procesamiento de svg var nodesToRecover = []; cloneDom.find('svg');//divReport es la identificación del dom que debe ser interceptado en una imagen svgElem.each(function (index, node) { var parentNode = node.parentNode; var svg = node.outerHTML .trim(); var lienzo = document.createElement('lienzo'); lienzo.ancho = 650; canvg(lienzo, svg); if (nodo.estilo.posición) { lienzo.estilo.posición += nodo.estilo.posición += nodo.estilo.izquierda; .style.top; } nodesToRecover.push({ padre: parentNode, hijo: nodo }); parentNode.removeChild(nodo); nodesToRemove.push({ padre: parentNode, hijo: canvas }); parentNode.appendChild(canvas }); //Agrega dinámicamente el nodo clonado al cuerpo. $(body).append(cloneDom); html2canvas(cloneDom, { onrendered: function(canvas) { var url =canvas.toDataURL(image/png); window.location.href = url ; cloneDom.remove(); // Borrar contenido clonado}, fondo:#fafafa });

Aquí, primero clone el div que se va a interceptar y establezca el índice z al mínimo para evitar causar una interfaz desagradable. Luego, procese el svg, que se analizó anteriormente y finalmente agregue el nodo clonado al cuerpo.

En renderizado, podemos usar directamente location.href para saltar y ver la imagen, guardarla o escribir la URL en el src de img y mostrarla en la interfaz, como $('#imgId').attr('src ' ,URL);

Finalmente, la imagen recién capturada se puede mostrar en la interfaz:

Ahora que se obtiene la URL, es necesario cargarla en el backend, almacenarla en la base de datos y luego cargarla en otra interfaz mostrada. Generalmente estoy acostumbrado a usar URL para almacenar rutas de imágenes en lugar de almacenamiento de blobs.

Como necesito obtener la imagen en otra interfaz, la almacené en un directorio de recursos en el mismo nivel que la aplicación web. El código es el siguiente:

 // Almacena la imagen y devuelve la ruta de la imagen BASE64Decoder decoder = new BASE64Decoder(); byte[] b = decoder.decodeBuffer(product.getProPic().substring(data:image/png;base64,.length())); ByteArrayInputStream bais = nuevo ByteArrayInputStream(b); BufferedImage bi1 = ImageIO.read(bais); url = recurso_usuario + Archivo.separador + img + Archivo.separador + producto_+UUID.randomUUID().toString().replace(-, )+.png Cadena totalUrl = System.getProperty(raíz) + Archivo w2 = nuevo archivo (totalUrl); ImageIO.write (bi1, png, w2); //Almacena la ruta relativa de la imagen en la base de datos int res = productMapper.insertSelective(product);

Debido a que aquí interviene otra lógica, solo se incluye parte del código.

BASE64Decoder se usa aquí para almacenar imágenes. Después de obtener la imagen, necesitamos usar una subcadena para interceptar el contenido de data:image/png;base64, porque la siguiente es la URL de la imagen, url.substring(data:image/png;base64,.length()) .

Para la ruta, la URL en el código anterior es el contenido que almacené en la base de datos, y totalUrl es la ruta real almacenada durante la operación de escritura real de ImageIO. El directorio raíz del proyecto obtenido mediante el método getProperty () puede ser. configurado en web.xml Se puede utilizar el siguiente contenido y luego se puede utilizar System.getProperty (raíz).

 <!-- Configure el sistema para obtener el directorio raíz del proyecto--><context-param> <param-name>webAppRootKey</param-name> <param-value>root</param-value></context-param ><listener > <listener-class> org.springframework.web.util.WebAppRootListener </listener-class></listener>

Ahora la URL de la imagen se almacena en la base de datos y la imagen en sí se almacena en el directorio del proyecto en Tomcat.

Finalmente, para obtenerlo de la interfaz, simplemente agregue el nombre del proyecto delante de la URL actual < img class =depot-img src =<%=request.getContextPath()%>/`+e.proPic+` > .

Luego podrá ver la imagen que se muestra en la interfaz:

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.