引用方式
在組件內使用
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度
：more命令)
