Beste Weg, zu maskieren Sie ein Bild in HTML5

Ich Frage mich, was ist der beste Weg, zu maskieren von Bildern in HTML 5 ?

In der Tat würde ich mag, um anzuzeigen, Kreis thumbnails in einer Galerie, ohne dass mein client mit der Vorbereitung der kreisförmigen Bilder...

Also ich habe, meiner Meinung nach, zwei Möglichkeiten : Leinwand-Maskierung oder altmodische Weise

Haben Sie andere Ideen ? Best practices ?

Dank

  • habe meine Antwort u helfen . wenn Sie getan haben Stimmen mir da die richtige Antwort
InformationsquelleAutor Jk_ | 2011-12-01
  1. 13

    könnten Sie

    • die altmodische Weise - eine transparente png-oben auf das gewünschte element
    • css3 border-radius des Bildes einstellen, die Hälfte davon mit den Abmessungen (so, dass die Grenze definiert einen Kreis)
    • css3 mask und mask-clip Eigenschaften (hier ist eine schöne demo : http://www.webkit.org/blog/181/css-masks/)
    • Leinwand zu tun, die Maskierung
    • svg Kreise mit dem Bild als hintergrund-Muster

    Hängt die Wahl auf die gezielte Browser und die Zeit, die Sie investieren möchten.

    Für eine voll cross-browser-Ergebnis, ich empfehle das altmodische Weise, aber wenn Sie wollen mehr Formen (evtl. dynamischen) oder mehr als nur Bild-Maskierung, könnten Sie versuchen, svg oder canvas.

    • Die CSS3-Maskierung ist WebKit nur.
    • Natürlich würde ich gerne eine cross-browser tragfähigen Ergebnis.. II wird zum animieren der Maske und die Größe des Kreises, nachdem alle, so dass ich denke, dass mit css3 border-radius ist die am besten geeignete Technik, meinst du nicht ?
    • Schöne Zusammenfassung der Optionen, aber dies könnte eine gute Antwort, wenn man die details (z.B. hatte einen link oder den code zeigen, wie zu tun, jeder, wie Maskierung eine drawImage mit der globalCompositeOperation
    InformationsquelleAutor gion_13
  2. 3
      -circle {
        -webkit-border-radius: 61px;
        -moz-border-radius: 61px;
        border-radius: 61px;
        border:1px solid #aaaaaa;
        width:122px;
        height:122px;
   }

    sehen diese

    überprüfen Sie diese http://jsfiddle.net/WQSLa/1/

    BEARBEITEN

    u können auch versuchen, diese http://jsfiddle.net/jalbertbowdenii/WQSLa/3 wie vorgeschlagen durch albert

    InformationsquelleAutor aWebDeveloper
  3. 0

    Hier ist die Methode, die funktioniert für mich am besten:

    1. ein SVG zu erstellen, die Form der Maske, die Sie wollen.
    2. Bearbeiten der css für das entsprechende element, und geben Sie die URL der SVG-Datei für die Maske

    Für ein 200px Kreis, Ihre SVG-könnte wie folgt Aussehen:

    <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="image-mask" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<circle cx="100" cy="100" r="100" stroke="black" stroke-width="0" fill="black" />
</svg>

    Und CSS könnte wie folgt Aussehen:

    #image-mask {
    width: 200px;
    height: 200px;
    mask: url('/static/images/avatarmask.svg');
    -webkit-mask-image: url('/static/images/avatarmask.svg');
}

    Und wenn Sie wollen, etwas mehr in die Tiefe, fand ich diese Anleitung sehr hilfreich: http://collidercreative.com/how-to-create-css-image-masks-for-the-web-with-svgs/.

    • mit Bezug auf das Beispiel, das Sie zur Verfügung gestellt, ist die css angewendet werden soll auf das Bild? ie:<img src="/images/myimage.jpg" id="image-mask">.
    InformationsquelleAutor Ryan
  4. 0

    Zur Aktualisierung der Antwort, versuchen Sie clip-path (siehe dieses css-tricks posten).

    caniuse zeigt mit über 80% Unterstützung jetzt, wenn Sie die -webkit- Präfix als gut. Also das ist für mich arbeiten (IE/Edge, obwohl, kann sein, limitierende Faktoren):

    clip-path: circle(125px at center);
-webkit-clip-path: circle(125px at center);
    InformationsquelleAutor dhc
Schreibe einen Kommentar