VUE3入門實例：製作一個簡單的圖片裁剪器

Vue.js是一款受歡迎的JavaScript前端框架，目前已經推出了最新的版本－Vue3，新版Vue在效能、體積以及開發體驗上均有所提升，受到越來越多的開發者歡迎。本文將介紹如何使用Vue3製作一個簡單的圖片裁剪器。

首先，我們需要建立一個Vue專案並安裝所需的外掛程式。可以使用Vue CLI來建立項目，也可以手動搭建。這裡我們以使用Vue CLI的方式為例：

# 安装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是用來裁切圖片的插件，而Cropperjs則是Vue-Cropperjs的核心函式庫，需要一起安裝。

接下來，我們需要在Vue專案中引入Vue-Cropperjs插件。修改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  src="/static/imghwm/default1.png"  data-src="src"  class="lazy"  ref="img" :   style="max-width:90%" / alt="VUE3入門實例：製作一個簡單的圖片裁剪器" >
    </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檔案中，並在元件標籤中透過props傳遞參數，實現圖片裁剪器的初始化。

至此，我們已經完成了一個簡單的圖片裁剪器的製作，可以正常運作並進行裁剪。當然，這只是一個入門實例，初學者可以透過對程式碼的修改和擴展，來進一步理解Vue3的使用和開發技巧。

以上是VUE3入門實例：製作一個簡單的圖片裁剪器的詳細內容。更多資訊請關注PHP中文網其他相關文章！