Comment utiliser Vue pour adoucir et flouter les bords des images ?

Comment utiliser Vue pour adoucir et flouter les bords des images ?

Vue.js est un framework frontal populaire qui peut facilement mettre en œuvre des mises à jour réactives et une gestion des interfaces utilisateur. Dans le développement front-end, le traitement d’images est également une exigence très courante. Cet article explique comment utiliser Vue.js pour obtenir l'effet d'adoucissement et l'effet de bord flou des images.

Tout d'abord, nous devons installer et présenter la bibliothèque Vue.js. Il peut être introduit via CDN ou installé à l'aide de npm.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Ensuite, nous créons une instance Vue et définissons une URL d'image dans l'attribut data pour le rendu des images.

<div id="app">
  <img :src="imageUrl" alt="image">
</div>

<script>
new Vue({
  el: "#app",
  data: {
    imageUrl: "https://example.com/image.jpg"
  }
})
</script>

Dans l'instance Vue, nous pouvons traiter les images via des propriétés calculées. Les propriétés calculées sont une propriété unique de Vue qui calcule dynamiquement de nouvelles valeurs basées sur des données dépendantes.

Tout d’abord, obtenons l’effet de mise en drapeau. L'effet d'adoucissement consiste à ajouter un peu de transparence aux bords de l'image, ce qui rend l'image plus douce.

<div id="app">
  <img :src="imageUrl" :  style="max-width:90%" alt="image">
</div>

<script>
new Vue({
  el: "#app",
  data: {
    imageUrl: "https://example.com/image.jpg"
  },
  computed: {
    featherStyle() {
      return {
        boxShadow: "0 0 20px rgba(0, 0, 0, 0.3)",
        borderRadius: "10px"
      }
    }
  }
})
</script>

Dans le code ci-dessus, nous définissons un attribut calculé FeatherStyle via l'attribut calculé, qui renvoie un objet contenant les styles CSS requis pour ajouter un effet de plume à l'image. Plus précisément, nous avons ajouté une ombre noire transparente de 20 pixels et donné à l'image des coins arrondis de 10 pixels.

Ensuite, implémentons l’effet de bord flou. L'effet de bord flou applique un flou gaussien au bord de l'image, rendant la couleur du bord floue.

<div id="app">
  <img :src="imageUrl" :  style="max-width:90%" alt="image">
</div>

<script>
new Vue({
  el: "#app",
  data: {
    imageUrl: "https://example.com/image.jpg"
  },
  computed: {
    blurStyle() {
      return {
        filter: "blur(10px)"
      }
    }
  }
})
</script>

Dans le code ci-dessus, nous définissons une propriété calculée blurStyle via la propriété calculée, qui renvoie un objet contenant les styles CSS requis pour appliquer le flou gaussien sur l'image. Plus précisément, nous définissons l'attribut de filtre sur flou (10px), ce qui signifie appliquer un effet de flou gaussien de 10 pixels à l'image.

Enfin, si nous souhaitons appliquer à la fois l'effet plume et l'effet bord flou, nous pouvons fusionner les styles CSS des deux effets.

<div id="app">
  <img :src="imageUrl" :  style="max-width:90%" alt="image">
</div>

<script>
new Vue({
  el: "#app",
  data: {
    imageUrl: "https://example.com/image.jpg"
  },
  computed: {
    featherStyle() {
      return {
        boxShadow: "0 0 20px rgba(0, 0, 0, 0.3)",
        borderRadius: "10px"
      }
    },
    blurStyle() {
      return {
        filter: "blur(10px)"
      }
    }
  }
})
</script>

Dans le code ci-dessus, nous obtenons l'application simultanée de l'effet de contour progressif et de l'effet de bord flou en fusionnant les propriétés des deux objets.

Grâce aux étapes ci-dessus, nous avons utilisé avec succès Vue.js pour obtenir l'effet d'adoucissement et l'effet de bord flou de l'image. Ces effets peuvent rendre les images plus vives et plus attrayantes dans les interfaces utilisateur. Bien entendu, nous pouvons également ajuster et élargir le style en fonction des besoins réels pour répondre aux différentes exigences de conception.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!