recherche

Maison  >  Article  >  interface Web  >  Implémenter la fonction de recadrage d'image à l'aide de Vue.js

Implémenter la fonction de recadrage d'image à l'aide de Vue.js

青灯夜游
青灯夜游avant
2020-10-19 17:45:492674parcourir

Implémenter la fonction de recadrage d'image à l'aide de Vue.js

Avez-vous déjà écrit une application Web qui accepte les images téléchargées par les utilisateurs, pour vous rendre compte plus tard que les utilisateurs continuent de fournir des images de toutes formes et tailles qui ruinent le thème de votre site ? Travailler avec des images sur le Web peut facilement devenir pénible, à moins, bien sûr, que vous n'utilisiez les bons outils.

Implémenter la fonction de recadrage d'image à l'aide de Vue.js

Dans ce didacticiel, nous explorerons comment utiliser les bibliothèques JavaScript pour manipuler des images dans le navigateur, les préparer pour le stockage sur le serveur et les utiliser dans des programmes Web. Nous utiliserons Vue.js au lieu du JavaScript natif pour ce faire.

Pour voir ce que cet article essaie d'accomplir, veuillez regarder l'image ci-dessus. L'image originale est à gauche et le nouvel aperçu de l'image est à droite. Nous pouvons déplacer et redimensionner la zone de recadrage et l'image d'aperçu changera en conséquence. Les utilisateurs peuvent télécharger des images d'aperçu selon leurs besoins.

Nous utiliserons une bibliothèque appelée Cropper.js pour faire le gros du travail.

Créez un nouveau projet Vue.js avec des dépendances de recadrage d'image

La première étape consiste à créer un nouveau projet et à installer les dépendances nécessaires. Il est supposé que la Vue CLI est installée et configurée.

Exécutez la commande suivante sur la ligne de commande : 

vue create cropper-project

Lorsque vous y êtes invité, sélectionnez l'option par défaut. Ce sera un projet simple, alors ne vous inquiétez pas du routage et autres.

Accédez au nouveau projet et procédez comme suit : 

npm install cropperjs --save

La commande ci-dessus installera Cropper.js dans notre projet. Il est facile d'utiliser un CDN, mais comme nous utilisons un framework qui exploite webpack, la route npm est la plus logique.

Pendant que nos dépendances sont installées, il reste encore une chose à faire. Parce que j'utilise npm, je n'inclus pas d'informations CSS, uniquement des informations JavaScript. Nous devons inclure les informations CSS localement ou via un CDN. Cet article utilise CDN.

Ouvrez le public/index.html du projet et incluez la balise HTML suivante : 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>image-cropping</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.1/cropper.min.css">
</head>
<body>
    <noscript>
        <strong>
        We&#39;re sorry but image-cropping doesn&#39;t work properly without JavaScript enabled. 
        Please enable it to continue.
        </strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>
</html>

Notez que dans la balise 93f0f5c25f18dab9d176bd4f6de5d30e, nous avons inclus le fichier cropper.min.css. Encore une fois, la manière dont vous obtenez les informations CSS n'a pas d'importance tant que vous obtenez le fichier. Sans les informations CSS, notre image n'aurait pas la zone de recadrage sophistiquée.

Recadrez les images à l'aide de JavaScript dans un projet Vue.js

Maintenant, le projet devrait être presque configuré et prêt à recadrer les images sur le Web. Pour garder notre projet en ordre, nous allons créer un nouveau composant Vue.js pour gérer tout notre traitement d'image.

Créez un fichier src/components/ImageCropper.vue dans votre projet et incluez le code passe-partout suivant : 

<template>
    <div>
        <div class="img-container">
            <img ref="image" :src="src" crossorigin>
        </div>
        <img :src="destination" class="img-preview">
    </div>
</template>

<script>
    import Cropper from "cropperjs";
    export default {
        name: "ImageCropper",
        data() {
            return {
                cropper: {},
                destination: {},
                image: {}
            }
        },
        props: {
            src: String
        },
        mounted() { }
    }
</script>

<style scoped>
    .img-container {
        width: 640px;
        height: 480px;
        float: left;
    }
    .img-preview {
        width: 200px;
        height: 200px;
        float: left;
        margin-left: 10px;
    }
</style>

Pour cet exemple, les informations de la balise c9ccee2e6ea535a969eb3f532ad9fe89 ne sont pas importantes, elles nettoient simplement le page et n'obtient aucun effet réel de la bibliothèque.

Prenez note des variables d477f9ce7bf77f53fbcf36bec1b69b7a et src qui apparaissent dans le bloc destination. Ces variables représentent l'image source définie par l'utilisateur via l'objet props, et l'image cible qui a été manipulée. Nous pourrons accéder à l'image source directement via la variable ref, similaire à l'utilisation de querySelector sur un objet DOM.

Bien que nous ayons préparé les images pour le recadrage, nous n'avons rien fait dessus. Nous allons configurer le gestionnaire de recadrage et l'événement dans la méthode mounted, qui sera déclenché après l'initialisation de la vue. La méthode

mounted ressemble à ceci : 

mounted() {
    this.image = this.$refs.image;
    this.cropper = new Cropper(this.image, {
        zoomable: false,
        scalable: false,
        aspectRatio: 1,
        crop: () => {
            const canvas = this.cropper.getCroppedCanvas();
            this.destination = canvas.toDataURL("image/png");
        }
    });
}

Lors de l'appel de cette méthode, nous obtenons une référence à l'image à l'intérieur du bloc d477f9ce7bf77f53fbcf36bec1b69b7a. Utilisez ensuite l'image lors de l'initialisation de l'outil de recadrage et définissez certaines configurations, qui ne sont pas obligatoires.

crop La méthode est l'endroit où la magie opère. Cette méthode crop est appelée chaque fois que nous traitons une image. Lorsque la méthode crop est exécutée, nous devrions pouvoir obtenir les informations de recadrage, de mise à l'échelle, etc. et créer une nouvelle image à partir de celle-ci - l'image cible.

À ce stade, nous avons créé le composant mais ne l'avons pas encore utilisé.

Ouvrez le fichier src/App.vue du projet et incluez le contenu suivant : 

<template>
    <div id="app">
        <ImageCropper src="/logo.png" />
    </div>
</template>

<script>
    import ImageCropper from "./components/ImageCropper.vue"
    export default {
        name: "app",
        components: {
            ImageCropper
        }
    }
</script>

<style></style>

Notez que nous avons importé le composant ImageCropper et l'utilisons dans le bloc d477f9ce7bf77f53fbcf36bec1b69b7a. N'oubliez pas que l'attribut src est l'un des props en JavaScript. Dans mon exemple, il y a un fichier public/logo.png, n'hésitez pas à le modifier selon vos besoins. Dans un scénario réel, vous utiliseriez des images que l’utilisateur téléchargerait.

Si vous souhaitez apprendre à télécharger des fichiers (comme recadrer des images), vous pouvez consulter mon précédent tutoriel "Télécharger des fichiers sur un serveur Web distant à l'aide de Vue.js".

Conclusion

Cet article explique comment utiliser la bibliothèque Cropper.js dans un programme Web Vue.js pour manipuler des images. Ceci est utile si vous devez accepter des images d'utilisateurs et les utiliser dans le cadre d'un profil ou quelque chose du genre, car vous devrez redimensionner ces images à une taille cohérente afin que votre thème ne soit pas cassé.

L'utilisation de la bibliothèque de recadrage d'images n'est pas différente de l'utilisation de JavaScript natif, mais certaines choses sont requises pour interagir avec les composants HTML à l'aide de Vue.js.

Adresse originale en anglais : https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

Recommandations associées :

Un résumé des questions d'entretien Vue frontale en 2020 (avec réponses)

Recommandations du didacticiel Vue : 2020 dernières sélections de didacticiels vidéo 5 vue.js

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

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!

JavaScript css vue.js html npm webpack public Event JS 对象 事件 dom https
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment développer des extensions Chrome avec VueArticle suivant：Comment développer des extensions Chrome avec Vue

Articles Liés

Voir plus