引用方式

在組件內(nèi)使用

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"

>

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

},

當(dāng)點(diǎn)擊保存裁剪的時(shí)候調(diào)用組件的方法getCropBlob會得到blob類型的數(shù)據(jù),我用的七牛上傳圖片，需要file類型的圖片數(shù)據(jù)，所以這里要做轉(zhuǎn)化，代碼如下

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

名稱

功能

默認(rèn)值

可選值

img

裁剪圖片的地址

空

url 地址、base64、blob

outputSize

裁剪生成圖片的質(zhì)量

1

0.1 - 1

outputType

裁剪生成圖片的格式

jpg (jpg 需要傳入jpeg)

jpeg png webp

info

裁剪框的大小信息

true

true false

canScale

圖片是否允許滾輪縮放

true

true false

autoCrop

是否默認(rèn)生成截圖框

false

true false

autoCropWidth

默認(rèn)生成截圖框?qū)挾?/p>

容器的80%

0~max

autoCropHeight

默認(rèn)生成截圖框高度

容器的80%

0~max

fixed

是否開啟截圖框?qū)捀吖潭ū壤?/p>

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

是否按照設(shè)備的dpr 輸出等比例圖片

true

true false

infoTrue

true 為展示真實(shí)輸出圖片寬高

false 展示看到的截圖框?qū)捀?/p>

false true false

maxImgSize

限制圖片最大寬度和高度

2000

0-max

enlarge

圖片根據(jù)截圖框輸出比例倍數(shù)

1 0-max(建議不要太大不然會卡死的呢)

mode

圖片默認(rèn)渲染方式

contain

contain , cover, 100px, 100% auto標(biāo)題1 標(biāo)題2 標(biāo)題3

內(nèi)置方法 通過this.$refs.cropper 調(diào)用

this.$refs.cropper.startCrop() 開始截圖

this.$refs.cropper.stopCrop() 停止截圖

this.$refs.cropper.clearCrop() 清除截圖

this.$refs.cropper.changeScale() 修改圖片大小 正數(shù)為變大 負(fù)數(shù)變小

this.$refs.cropper.getImgAxis() 獲取圖片基于容器的坐標(biāo)點(diǎn)

this.$refs.cropper.getCropAxis() 獲取截圖框基于容器的坐標(biāo)點(diǎn)

this.$refs.cropper.goAutoCrop 自動生成截圖框函數(shù)

this.$refs.cropper.rotateRight() 向右邊旋轉(zhuǎn)90度

this.$refs.cropper.rotateLeft() 向左邊旋轉(zhuǎn)90度

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。