VUE3 Contoh Bermula: Membuat Pemotong Imej Mudah

Vue.js ialah rangka kerja bahagian hadapan JavaScript yang popular Versi terkini - Vue3 telah dilancarkan Versi baharu Vue telah meningkatkan prestasi, saiz dan pengalaman pembangunan, dan dialu-alukan oleh semakin ramai pembangun. Artikel ini akan memperkenalkan cara menggunakan Vue3 untuk membuat pemangkas imej mudah.

Pertama, kita perlu mencipta projek Vue dan memasang pemalam yang diperlukan. Anda boleh menggunakan Vue CLI untuk mencipta projek, atau anda boleh membinanya secara manual. Di sini kami mengambil penggunaan Vue CLI sebagai contoh:

# 安装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 ialah pemalam untuk memangkas imej dan Cropperjs ialah perpustakaan teras Vue-Cropperjs dan perlu dipasang bersama.

Seterusnya, kami perlu memperkenalkan pemalam Vue-Cropperjs ke dalam projek Vue. Ubah suai fail src/main.js seperti berikut:

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')

Dalam kod di atas, kami memperkenalkan pemalam Vue-Cropperjs dan memanggil kaedah Vue.use() dalam Vue untuk mendaftar. Perlu diingat bahawa di sini kami juga memperkenalkan fail gaya Cropperjs untuk memastikan operasi biasa pemangkas imej.

Seterusnya, kita perlu mencipta komponen pemangkas imej dalam Vue. Cipta fail src/views baharu dalam direktori CropImage.vue dan tambah kod berikut:

<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>

Dalam kod di atas, kami mencipta komponen Vue bernama CropImage, yang mengandungi tiga elemen utama:

• Bekas imej
• Butang muat naik imej
• Pemotongan imej

Dengan teg img dan teg div, kita Satu permulaan bekas imej dicipta. Pengguna boleh mengklik butang "Muat Naik" untuk memilih imej untuk dipangkas. Apabila pengguna memilih imej, kami menggunakan FileReader untuk menukar imej kepada pengekodan base64 dan menetapkannya kepada atribut src untuk pratonton imej.

Pemotongan imej menggunakan teg vue-cropper yang disediakan dalam pemalam Vue-Cropperjs, yang menyokong pelbagai atribut untuk mengawal prestasi pemangkas, seperti: auto-crop-areaKawal nisbah kawasan bagi pemangkasan automatik, guides Kawal sama ada untuk memaparkan garisan tambahan bingkai pemangkasan, view-mode kawal mod pemangkas, dsb. Selain itu, kami juga menetapkan mod pergerakan kotak tanaman kepada "Alih" untuk memastikan pengguna boleh mengendalikan kotak tanaman dengan lebih baik. Butang

diikat pada kaedah onCrop, yang mengeluarkan pengekodan base64 bagi imej yang dipotong kepada konsol Pembangun boleh menulis semula kaedah ini mengikut keperluan sebenar.

Akhir sekali kita perlu memperkenalkan komponen App.vue ke dalam fail CropImage.vue. Ubah suai fail src/App.vue seperti berikut:

<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>

Dalam kod di atas, kami memperkenalkan komponen CropImage ke dalam fail App.vue dan lulus parameter melalui props dalam teg komponen untuk memulakan imej pemanen .

Pada ketika ini, kami telah menyelesaikan penghasilan pemangkas imej ringkas yang boleh berjalan seperti biasa dan melakukan pemangkasan. Sudah tentu, ini hanyalah contoh pengenalan Pemula boleh lebih memahami penggunaan dan kemahiran pembangunan Vue3 dengan mengubah suai dan memanjangkan kod.

Atas ialah kandungan terperinci VUE3 Contoh Bermula: Membuat Pemotong Imej Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!