使用vue-cropper裁剪正方形上傳頭像

引用方式

• 在元件内使用

  import { VueCropper }  from 'vue-cropper' 
  components: {
    VueCropper,
  },           

• main.js裡面使用

  import VueCropper from 'vue-cropper' 
  Vue.use(VueCropper)           

• 基本使用方法

  <vueCropper
    ref="cropper"
    :img="option.img"
    :autoCrop="true"
    :fixedNumber="[1,1]"
    :fixed="true"
  ></vueCropper>           

  選擇圖檔後需要傳這個圖檔的位址給vueCropper，是以本地選擇圖檔後要處理一下，得到base64位址

changeUpload(file) {
    var that = this
    console.log(file)
    that.file = file
    var reader = new FileReader() // 這裡使用FileReader() 來得到圖檔位址
    reader.onload = function(e) {
        that.option.img = e.target.result
    }
    reader.readAsDataURL(file.raw)
},           

當點選儲存裁剪的時候調用元件的方法

getCropBlob

會得到blob類型的資料,我用的七牛上傳圖檔，需要file類型的圖檔資料，是以這裡要做轉化，代碼如下

this.$refs.cropper.getCropBlob((data) => {
    console.log(data)
    let files = new window.File([data], this.file.name, {type: data.type})
    console.log(this.file)
    Upload(files, this.file.name, (res) => {
        let url = `http://pv4kob423.bkt.clouddn.com/${res.key}`
        console.log(res)
        that.update(url) // 拿到url後去修改使用者頭像
    })
})           

是以prop功能

名稱	功能	預設值	可選值
img	裁剪圖檔的位址	空	url 位址、base64、blob
outputSize	裁剪生成圖檔的品質	1	0.1 - 1
outputType	裁剪生成圖檔的格式	jpg (jpg 需要傳入jpeg)	jpeg png webp
info	裁剪框的大小資訊	true	true false
canScale	圖檔是否允許滾輪縮放
autoCrop	是否預設生成截圖框	false
autoCropWidth	預設生成截圖框寬度	容器的80%	0~max
autoCropHeight	預設生成截圖框高度
fixed	是否開啟截圖框寬高固定比例		truefalse
fixedNumber	截圖框的寬高比例	[1, 1]	[寬度, 高度]
full	是否輸出原圖比例的截圖		true false
fixedBox	固定截圖框大小 不允許改變
canMove	上傳圖檔是否可以移動
canMoveBox	截圖框能否拖動
original	上傳圖檔按照原始比例渲染
centerBox	截圖框是否被限制在圖檔裡面
high	是否按照裝置的dpr 輸出等比例圖檔
infoTrue	true 為展示真實輸出圖檔寬高	false 展示看到的截圖框寬高	false true false
maxImgSize	限制圖檔最大寬度和高度	2000	0-max
enlarge	圖檔根據截圖框輸出比例倍數	1 0-max(建議不要太大不然會卡死的呢)
mode	圖檔預設渲染方式	contain	contain , cover, 100px, 100% auto标題1 标題2 标題3

内置方法 通過this.$refs.cropper 調用
this.$refs.cropper.startCrop() 開始截圖
this.$refs.cropper.stopCrop() 停止截圖
this.$refs.cropper.clearCrop() 清除截圖
this.$refs.cropper.changeScale() 修改圖檔大小 正數為變大 負數變小
this.$refs.cropper.getImgAxis() 擷取圖檔基于容器的坐标點
this.$refs.cropper.getCropAxis() 擷取截圖框基于容器的坐标點
this.$refs.cropper.goAutoCrop 自動生成截圖框函數
this.$refs.cropper.rotateRight() 向右邊旋轉90度
this.$refs.cropper.rotateLeft() 向左邊旋轉90度