Ausführliche Erklärung der Lösung für das Problem, dass html2canvas-Screenshots keine Bilder mit abgerundeten Ecken erfassen können

Bisher konnten wir Bilder nur mit anderen Screenshot-Tools aufnehmen. Die Funktionen moderner Browser sind immer leistungsfähiger geworden. Mit der zunehmenden Verbreitung von H5 kann der Browser selbst Screenshots erstellen. html2canvas ist ein solches Front-End-Plug-in. Sein Prinzip besteht darin, Dom-Knoten in Canvas zu zeichnen. Obwohl es sehr praktisch ist, weist es die folgenden Einschränkungen auf:

• Iframe wird nicht unterstützt
• Domainübergreifende Bilder werden nicht unterstützt
• Nicht verfügbar in Browser-Plug-Ins
• SVG-Bilder werden von einigen Browsern nicht unterstützt
• Unterstützt kein Flash
• Ältere Browser und IE werden nicht unterstützt. Wenn Sie überprüfen möchten, ob ein bestimmter Browser unterstützt wird, können Sie ihn unter http://deerface.sinaapp.com/ ausprobieren.

Da mein Verwendungsszenario sehr einfach ist, die Ausnahmeinformationen aufzeichnen und die Ausnahmeseite auch von mir selbst definiert wird, reicht die Verwendung von html2canvas aus.

Als ich html2canvas zum ersten Mal verwendete, bestand der Zweck darin, einen Screenshot der gesamten Seite zu erstellen und ein Bild zu erstellen, das der Benutzer speichern konnte.

Schauen wir uns zunächst an, wie HTML-Renderings aussehen.

Aus dem von HTML gerenderten Bild können Sie erkennen, dass das obige Bild einen abgerundeten Eckeneffekt hat. Als ich das Bild jedoch mit html2canvas konvertierte, stellte ich fest, dass der abgerundete Eckeneffekt des Bildes nicht verloren ging.

Es ist so geworden. Nachdem ich über viele Lösungen nachgedacht hatte, entschied ich mich schließlich, die abgerundeten Ecken auf der Rückseite in ein Hintergrundbild umzuwandeln. Der Hintergrund des mittleren Kreises ist transparent und wird dann durch absolute Positionierung über das Originalbild gelegt, was einer Maske entspricht Wirkung.

Natürlich muss der DOM-Knoten des Maskenbildes unterhalb des Bildes liegen, das abgerundete Ecken erfordert, ähnlich wie

 <div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--Originalbild, das abgerundete Ecken erfordert--> <img src=/template/images/avatar .png class=img-responsive style=position: absolute;><!--Maskenbild--></div>

Nach der Generierung sieht es normal aus.

 <div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--Originalbild, das abgerundete Ecken erfordert--> <img src=/template/images/avatar .png class=img-responsive style=position: absolute;><!--Maskenbild--></div>