Exemple de démarrage de VUE3 : création d'un recadrage d'image simple

Vue.js est un framework frontal JavaScript populaire. La dernière version - Vue3 a été lancée. La nouvelle version de Vue a amélioré les performances, la taille et l'expérience de développement et est accueillie par de plus en plus de développeurs. Cet article explique comment utiliser Vue3 pour créer un recadrage d'image simple.

Tout d'abord, nous devons créer un projet Vue et installer les plugins requis. Vous pouvez utiliser Vue CLI pour créer le projet ou le créer manuellement. Ici, nous prenons l'utilisation de Vue CLI comme exemple :

# 安装Vue CLI
npm install -g @vue/cli

# 创建Vue项目
vue create image-cropper

# 进入项目文件夹
cd image-cropper

# 安装所需插件
npm install vue-cropperjs --save
npm install cropperjs --save

Vue-Cropperjs est un plug-in pour recadrer des images, et Cropperjs est la bibliothèque principale de Vue-Cropperjs et doit être installé ensemble.

Ensuite, nous devons introduire le plugin Vue-Cropperjs dans le projet Vue. Modifiez le fichier src/main.js comme suit : src/main.js文件如下：

import Vue from 'vue'
import App from './App.vue'
import VueCropper from 'vue-cropperjs'

import 'cropperjs/dist/cropper.css'

Vue.use(VueCropper)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

上述代码中，我们引入了Vue-Cropperjs插件，并在Vue中调用Vue.use()方法进行注册。需要注意的是，这里我们还引入了Cropperjs的样式文件，以保证图片裁剪器的正常运行。

接下来，我们需要在Vue中创建一个图片裁剪器组件。在src/views目录下新建CropImage.vue文件，添加以下代码：

<template>
  <div>
    <div ref="wrapper">
      <img ref="img" :src="src" style="max-width: 100%;" />
    </div>
    <div>
      <input type="file" @change="onUpload" />
    </div>
    <div>
      <vue-cropper ref="cropper" :src="src" :auto-crop-area="0.5" :guides="false" :view-mode="1" :drag-mode="dragMode" :crop-box-movable="false" :crop-box-resizable="false" :crop-box-border-radius="50"></vue-cropper>
    </div>
    <div>
      <button @click="onCrop">裁剪</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CropImage',
  data() {
    return {
      src: '',
      cropper: null,
      dragMode: 'move'
    }
  },
  methods: {
    onUpload(e) {
      const file = e.target.files[0]
      if (file.type.match(/image.*/)) {
        const reader = new FileReader()
        reader.onload = (event) => {
          this.src = event.target.result
        }
        reader.readAsDataURL(file)
      }
    },
    onCrop() {
      const canvas = this.$refs.cropper.getCroppedCanvas({ width: 100, height: 100 })
      const dataUrl = canvas.toDataURL()
      console.log(dataUrl)
    }
  }
}
</script>

上述代码中，我们创建了一个名为CropImage的Vue组件，该组件包含了三个主要元素：

• 图片容器
• 图片上传按钮
• 图片裁剪器

通过img标签和一个div标签，我们创建了一个最初的图片容器。用户可以点击“上传”按钮选择一张图片进行裁剪。当用户选择图片后，我们使用FileReader将图片转换为base64编码，并将其赋值给src属性，以实现图片的预览。

图片裁剪器使用了Vue-Cropperjs插件中提供的vue-cropper标签，它支持多种属性来控制裁剪器的表现，例如：auto-crop-area控制自动裁剪的区域比例、guides控制是否显示裁剪框辅助线、view-mode控制裁剪器的模式等等。此外，我们还将裁剪框的移动模式设置为“移动”，确保用户能够更好地操作裁剪框。

裁剪按钮被绑定到了onCrop方法，该方法将图片裁剪后的base64编码输出到控制台，开发者可根据实际需求改写此方法。

最后我们需要在App.vue文件中引入CropImage.vue组件。修改src/App.vue文件如下：

<template>
  <div id="app">
    <CropImage />
  </div>
</template>

<script>
import CropImage from './views/CropImage.vue'

export default {
  name: 'App',
  components: {
    CropImage
  }
}
</script>

<style>
  #app {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px;
  }
</style>

上述代码中，我们将CropImage组件引入到App.vue文件中，并在组件标签中通过propsrrreee

Dans le code ci-dessus, nous avons introduit le plug-in Vue-Cropperjs et appelé la méthode Vue.use() dans Vue pour vous inscrire. Il convient de noter que nous avons également introduit ici le fichier de style de Cropperjs pour assurer le fonctionnement normal du recadrage d'image.

Ensuite, nous devons créer un composant de recadrage d'image dans Vue. Créez un nouveau fichier CropImage.vue dans le répertoire src/views et ajoutez le code suivant : 🎜rrreee🎜Dans le code ci-dessus, nous avons créé un fichier nommé CropImage Composant Vue, qui contient trois éléments principaux : 🎜

• Conteneur d'images
• Bouton de téléchargement d'images
• Recadrage d'images

🎜 Avec la balise img et une balise div, nous créons un conteneur d'image initial. Les utilisateurs peuvent cliquer sur le bouton « Télécharger » pour sélectionner une image à recadrer. Lorsque l'utilisateur sélectionne l'image, nous utilisons FileReader pour convertir l'image en codage base64 et l'attribuer à l'attribut src pour prévisualiser l'image. 🎜🎜Le recadrage d'image utilise la balise vue-cropper fournie dans le plug-in Vue-Cropperjs, qui prend en charge plusieurs attributs pour contrôler les performances du recadrage, tels que : auto-crop- zonecode> contrôle la proportion de la zone de recadrage automatique, guides contrôle s'il faut afficher les lignes auxiliaires du cadre de recadrage, view-mode contrôle le mode du recadrage, etc. De plus, nous avons également défini le mode de mouvement de la zone de recadrage sur « Déplacer » pour garantir que les utilisateurs peuvent mieux utiliser la zone de recadrage. 🎜🎜Le bouton de recadrage est lié à la méthode onCrop, qui génère l'encodage base64 de l'image recadrée sur la console. Les développeurs peuvent réécrire cette méthode en fonction des besoins réels. 🎜🎜Enfin, nous devons introduire le composant CropImage.vue dans le fichier App.vue. Modifiez le fichier src/App.vue comme suit : 🎜rrreee🎜Dans le code ci-dessus, nous introduisons le composant CropImage dans le App.vue et transmettez les paramètres via props dans la balise du composant pour initialiser le recadrage d'image. 🎜🎜À ce stade, nous avons terminé la production d'un simple recadrage d'images qui peut fonctionner normalement et effectuer un recadrage. Bien sûr, il ne s'agit que d'un exemple introductif. Les débutants peuvent mieux comprendre les compétences d'utilisation et de développement de Vue3 en modifiant et en étendant le code. 🎜

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!