Explicación detallada de la solución al problema de que las capturas de pantalla de html2canvas no pueden capturar imágenes con esquinas redondeadas

Anteriormente sólo podíamos capturar imágenes a través de otras herramientas de captura de pantalla. Las funciones de los navegadores modernos se han vuelto cada vez más potentes. Con la popularización gradual del H5, el propio navegador puede realizar capturas de pantalla. html2canvas es un complemento de interfaz de usuario. Su principio es dibujar nodos Dom en Canvas. Aunque es muy conveniente, tiene las siguientes limitaciones:

• iframe no es compatible
• No se admiten imágenes entre dominios
• No disponible en complementos del navegador
• Las imágenes SVG no son compatibles con algunos navegadores
• No es compatible con Flash
• Los navegadores antiguos e IE no son compatibles. Si desea confirmar si un determinado navegador es compatible, puede usarlo para visitar http://deerface.sinaapp.com/ y probarlo :)

Dado que mi escenario de uso es muy simple, registre la información de la excepción y la página de excepción también la defino yo mismo, entonces html2canvas es suficiente para usar.

La primera vez que utilicé html2canvas, el propósito era tomar una captura de pantalla de toda la página y generar una imagen para que el usuario la guardara.

Primero echemos un vistazo a cómo se ve el HTML.

En la imagen renderizada por HTML, puede ver que la imagen de arriba tiene un efecto de esquina redondeada, pero cuando usé html2canvas para convertir la imagen, descubrí que el efecto de esquina redondeada de la imagen no se perdió.

Se volvió así. Después de pensar en muchas soluciones, finalmente decidí convertir las esquinas redondeadas en la parte posterior en una imagen de fondo. El fondo del círculo central es transparente y luego se superpone a la imagen original mediante un posicionamiento absoluto, lo que equivale a una máscara. efecto.

Por supuesto, el nodo DOM de la imagen de máscara debe estar debajo de la imagen que requiere esquinas redondeadas, similar a

 <div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--Imagen original que requiere esquinas redondeadas--> <img src=/template/images/avatar .png clase=img-responsive estilo=posición: absoluta;><!--Imagen de máscara--></div>

Una vez generado, se verá normal.

 <div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--Imagen original que requiere esquinas redondeadas--> <img src=/template/images/avatar .png clase=img-responsive estilo=posición: absoluta;><!--Imagen de máscara--></div>