Explication détaillée de la solution au problème selon lequel les captures d'écran html2canvas ne peuvent pas capturer des images aux coins arrondis

Auparavant, nous ne pouvions capturer des images qu'avec d'autres outils de capture d'écran. Les fonctions des navigateurs modernes sont devenues de plus en plus puissantes. Avec la popularisation progressive du H5, le navigateur lui-même peut prendre des captures d'écran. html2canvas est un tel plug-in front-end. Son principe est de dessiner des nœuds Dom dans Canvas. Bien que très pratique, il présente les limitations suivantes :

• l'iframe n'est pas pris en charge
• Les images inter-domaines ne sont pas prises en charge
• Non disponible dans les plug-ins de navigateur
• Les images SVG ne sont pas prises en charge sur certains navigateurs
• Ne prend pas en charge Flash
• Les anciens navigateurs et IE ne sont pas pris en charge. Si vous souhaitez confirmer si un certain navigateur est pris en charge, vous pouvez l'utiliser pour visiter http://deerface.sinaapp.com/ et l'essayer :)

Étant donné que mon scénario d'utilisation est très simple, enregistrez les informations d'exception et que la page d'exception est également définie par moi-même, alors html2canvas suffit à utiliser.

La première fois que j'ai utilisé html2canvas, le but était de prendre une capture d'écran de la page entière et de générer une image que l'utilisateur pourrait enregistrer.

Voyons d'abord à quoi ressemblent les rendus HTML.

À partir de l'image rendue par HTML, vous pouvez voir que l'image ci-dessus a un effet de coin arrondi, mais lorsque j'ai utilisé html2canvas pour convertir l'image, j'ai constaté que l'effet de coin arrondi de l'image n'était pas perdu.

C'est devenu comme ça. Après avoir réfléchi à de nombreuses solutions, j'ai finalement décidé de faire des coins arrondis à l'arrière une image d'arrière-plan. L'arrière-plan du cercle du milieu est transparent, puis il est superposé à l'image d'origine grâce à un positionnement absolu, ce qui équivaut à un masque. effet.

Bien entendu, le nœud DOM de l'image du masque doit être en dessous de l'image qui nécessite des coins arrondis, semblable à

 <div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--Image originale nécessitant des coins arrondis--> <img src=/template/images/avatar .png class=img-responsive style=position: absolue;><!--Image de masque--></div>

Une fois généré, il aura l’air normal.

 <div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--Image originale nécessitant des coins arrondis--> <img src=/template/images/avatar .png class=img-responsive style=position: absolue;><!--Image de masque--></div>