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.
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
Copier après la connexion
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
Copier après la connexion
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're sorry but image-cropping doesn'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>Copier après la connexion
Notez que dans la balise <head>, 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>Copier après la connexion
Pour cet exemple, les informations de la balise <style> ne sont pas importantes, elles nettoient simplement le page et n'obtient aucun effet réel de la bibliothèque.
Prenez note des variables <template> 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");
}
});
}Copier après la connexion
Lors de l'appel de cette méthode, nous obtenons une référence à l'image à l'intérieur du bloc <template>. 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>Copier après la connexion
Notez que nous avons importé le composant ImageCropper et l'utilisons dans le bloc <template>. 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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
