So verwenden Sie HTML-Canvas, um abgerundete Bilder abzufangen

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-Plugin. Sein Prinzip besteht darin, Dom-Knoten in Canvas zu zeichnen. Obwohl es sehr praktisch ist, weist es die folgenden Einschränkungen auf:

Dieser Artikel stellt hauptsächlich die relevanten Informationen zur Lösung für html2canvas-Screenshots vor, die keine abgerundeten Bilder erfassen können. Jetzt werde ich sie teilen mit Ihnen und geben Sie es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

• iframe wird nicht unterstützt

• Cross-Domain-Bilder werden nicht unterstützt

• können nicht verwendet werden in Browser-Plug-ins verwenden

• SVG-Bilder werden in einigen Browsern nicht unterstützt

• Flash wird nicht unterstützt

• Alte Browser und IE werden nicht unterstützt. Wenn Sie bestätigen möchten, ob ein bestimmter Browser unterstützt wird, können Sie ihn verwenden, um http://deerface.sinaapp.com/ zu besuchen und es auszuprobieren:)

Wegen mir Das Verwendungsszenario ist sehr einfach. Notieren Sie die Ausnahmeinformationen und definieren Sie auch die Ausnahmeseite. Dann reicht die Verwendung von html2canvas aus.

Wenn ich html2canvas zum ersten Mal verwende, besteht der Zweck darin, einen Screenshot der gesamten Seite zu erstellen und ein Bild zu generieren, das der Benutzer speichern kann

Werfen wir zunächst einen Blick darauf, wie das HTML-Rendering aussieht like

Auf dem von HTML gerenderten Bild können Sie sehen, dass das Bild oben einen abgerundeten Eckeneffekt hat, aber als ich html2canvas zum Konvertieren des Bildes verwendet habe, habe ich festgestellt, dass das Der abgerundete Eckeneffekt des Bildes ist nicht fehlgeschlagen.

wurde so. 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

<p class="avatar_img fl"><p class="avatar_img fl"> 
     <img src="" id="you" class="avatar_pp fl" /><!--需要圆角的原始图片-->
     <img src="/template/images/avatar.png" class="img-responsive" style="position: absolute;"><!--遮罩图片-->
</p>

und es wird aussehen normal bei Generierung

<p class="avatar_img fl"><p class="avatar_img fl"> 
     <img src="" id="you" class="avatar_pp fl" /><!--需要圆角的原始图片-->
     <img src="/template/images/avatar.png" class="img-responsive" style="position: absolute;"><!--遮罩图片-->
</p>

Code kopieren

Der Code lautet wie folgt:

<a href="<a href=" 
<img">http://www.teaxia.com/wp-content/uploads/2018/01/2.jpg"><img</a> 
src="<a href=" 
http://www.teaxia.com/wp-content/uploads/2018/01/2-169x300.jpg</a>" alt="" width="169" height="300" 
srcset="<a href=" 
http://www.teaxia.com/wp-content/uploads/2018/01/2-169x300.jpg</a> 169w, 
<a href=" 
http://www.teaxia.com/wp-content/uploads/2018/01/2.jpg</a> 377w" 
sizes="(max-width: 169px) 100vw, 169px" /></a>

Verwandte Empfehlungen:

Beispielcode für die Implementierung kreisförmiger und abgerundeter Bildformate mit HTML und CSS

PHP generiert abgerundeten Bildcode

Einführung in die Methode zur Erstellung abgerundeter und ovaler Bilder mit CSS3

Das obige ist der detaillierte Inhalt vonSo verwenden Sie HTML-Canvas, um abgerundete Bilder abzufangen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!