首頁 > web前端 > Vue.js > VUE3入門實例:製作一個簡單的圖片裁剪器

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

WBOY
發布: 2023-06-15 20:45:44
原創
1553 人瀏覽過

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 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檔案中,並在元件標籤中透過props傳遞參數,實現圖片裁剪器的初始化。

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板