VUE3-Erste-Schritte-Beispiel: Erstellen eines einfachen Bildbeschneiders

Vue.js ist ein beliebtes JavaScript-Frontend-Framework. Die neueste Version – Vue3 – bietet verbesserte Leistung, Größe und Entwicklungserfahrung und wird von immer mehr Entwicklern begrüßt. In diesem Artikel wird erläutert, wie Sie mit Vue3 einen einfachen Bildbeschneider erstellen.

Zuerst müssen wir ein Vue-Projekt erstellen und die erforderlichen Plugins installieren. Sie können das Projekt mit Vue CLI erstellen oder es manuell erstellen. Hier nehmen wir die Verwendung von Vue CLI als Beispiel:

# 安装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 ist ein Plug-In zum Zuschneiden von Bildern, und Cropperjs ist die Kernbibliothek von Vue-Cropperjs und muss zusammen installiert werden.

Als nächstes müssen wir das Vue-Cropperjs-Plugin in das Vue-Projekt einführen. Ändern Sie die Datei src/main.js wie folgt: 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

Im obigen Code haben wir das Vue-Cropperjs-Plug-in eingeführt und die Methode Vue.use() in Vue zur Registrierung aufgerufen. Es ist zu beachten, dass wir hier auch die Stildatei von Cropperjs eingeführt haben, um den normalen Betrieb des Bildbeschneiders sicherzustellen.

Als nächstes müssen wir eine Bildzuschneidekomponente in Vue erstellen. Erstellen Sie eine neue Datei CropImage.vue im Verzeichnis src/views und fügen Sie den folgenden Code hinzu: 🎜rrreee🎜Im obigen Code haben wir eine Datei mit dem Namen CropImage erstellt Vue-Komponente, die drei Hauptelemente enthält: 🎜

• Bildcontainer
• Bild-Upload-Schaltfläche
• Bildbeschneider

🎜 Mit dem img-Tag und einem div-Tag erstellen wir einen ersten Bildcontainer. Benutzer können auf die Schaltfläche „Hochladen“ klicken, um ein Bild zum Zuschneiden auszuwählen. Wenn der Benutzer das Bild auswählt, konvertieren wir das Bild mit FileReader in die Base64-Kodierung und weisen es dem Attribut src zu, um eine Vorschau des Bildes anzuzeigen. 🎜🎜Der Bildzuschnitter verwendet das im Vue-Cropperjs-Plugin bereitgestellte Tag vue-cropper, das mehrere Attribute zur Steuerung der Leistung des Zuschnitts unterstützt, wie zum Beispiel: auto-cropper- areacode> steuert den Anteil des automatischen Zuschneidebereichs, guides steuert, ob die Hilfslinien des Zuschneiderahmens angezeigt werden, view-mode steuert den Modus des Zuschneidegeräts, usw. Darüber hinaus haben wir den Bewegungsmodus des Zuschneidefelds auf „Verschieben“ eingestellt, um sicherzustellen, dass Benutzer das Zuschneidefeld besser bedienen können. 🎜🎜Die Schaltfläche „Zuschneiden“ ist an die Methode onCrop gebunden, die die Base64-Kodierung des zugeschnittenen Bildes an die Konsole ausgibt. Entwickler können diese Methode entsprechend den tatsächlichen Anforderungen umschreiben. 🎜🎜Zuletzt müssen wir die Komponente CropImage.vue in die Datei App.vue einführen. Ändern Sie die Datei src/App.vue wie folgt: 🎜rrreee🎜Im obigen Code führen wir die Komponente CropImage in die Datei App.vue ein Datei und übergeben Sie Parameter über props im Komponenten-Tag, um den Bildbeschneider zu initialisieren. 🎜🎜An diesem Punkt haben wir die Produktion eines einfachen Bildzuschneideprogramms abgeschlossen, das normal ausgeführt werden kann und das Zuschneiden durchführt. Dies ist natürlich nur ein einführendes Beispiel. Anfänger können die Verwendung und Entwicklungsfähigkeiten von Vue3 besser verstehen, indem sie den Code ändern und erweitern. 🎜

Das obige ist der detaillierte Inhalt vonVUE3-Erste-Schritte-Beispiel: Erstellen eines einfachen Bildbeschneiders. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!