基於 Vue的圖片裁剪插件

vue-crpopper

預覽
項目地址

一些想法

網上看了看基於vue的圖片裁剪的插件不多，剛恰好項目須要使用到圖片裁剪，因而便有了這個插件的
誕生。

實現的原理

經過canvas生成新的圖片， 能夠上傳到後臺保存。

效果圖

安裝 npm install vue-cropper

使用 import VueCropper from vue-cropper

名稱	功能	默認值	可選值
img	裁剪圖片的地址	空	url 地址 || base64 || blob
outputSize	裁剪生成圖片的質量	1	0.1 - 1
outputType	裁剪生成圖片的格式	jpg (jpg 須要傳入jpeg)	jpeg || png || web

內置方法 經過this.$refs.cropper 調用

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

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

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

this.$refs.cropper.getCropData() 獲取截圖信息