vue-quick-cropper ------------一個vue移動端截圖外掛
阿新 • • 發佈:2019-01-26
export default {
el: '#app',
data: {
imgSrc: "", // 圖片資料
visible:false, // 剪下框展示
},
methods: {
// 獲得頭像的base64和二進位制
finish(base64,data){
console.log(base64,'圖片base64')
console.log(data,'圖片二進位制')
},
// 確定使用
confirm() {
this.$nextTick(() => {
// 確認截圖
this.$refs.cropper.confirm()
})
},
// 取消
cancel(){
this.visible = false
},
// 選擇img回撥
choiceImg(e) {
this.visible = true
const file = e.target.files[0]
const reader = new FileReader();
reader.readAsDataURL(file)
reader.onload = (e) => {
this .imgSrc = reader.result
// imgSrc已獲取,�開始渲染圖片�
this.$refs.cropper.init()
}
},
}
};