引用方式

在組件內使用

import { VueCropper } from 'vue-cropper'

components: {

VueCropper,

},

main.js里面使用

import VueCropper from 'vue-cropper'

Vue.use(VueCropper)

基本使用方法

ref="cropper"

:img="option.img"

:autoCrop="true"

:fixedNumber="[1,1]"

:fixed="true"

>

選擇圖片后需要傳這個圖片的地址給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

圖片是否允許滾輪縮放

true

true false

autoCrop

是否默認生成截圖框

false

true false

autoCropWidth

默認生成截圖框寬度

容器的80%

0~max

autoCropHeight

默認生成截圖框高度

容器的80%

0~max

fixed

是否開啟截圖框寬高固定比例

true

truefalse

fixedNumber

截圖框的寬高比例

[1, 1]

[寬度, 高度]

full

是否輸出原圖比例的截圖

false

true false

fixedBox

固定截圖框大小 不允許改變

false

true false

canMove

上傳圖片是否可以移動

true

true false

canMoveBox

截圖框能否拖動

true

truefalse

original

上傳圖片按照原始比例渲染

false

true false

centerBox

截圖框是否被限制在圖片里面

false

true false

high

是否按照設備的dpr 輸出等比例圖片

true

true false

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度

總結

以上是生活随笔為你收集整理的vue 移动端头像裁剪_使用vue-cropper裁剪正方形上传头像-阿里云开发者社区的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。