基于vue的圖片裁剪特效，基于vue2集上傳圖片和圖片裁剪的插件，使用了element-ui的el-dialog。
vue圖片裁剪
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
使用方法說明
基于vue2集上傳圖片和圖片裁剪的插件，使用了element-ui的el-dialog。 the image crop plugin is based on vue,and use element-ui's el-dialog. 復(fù)制 src/components/ImageCropping 整個文件夾到你的項目即可使用
基本調(diào)用方式
上傳圖片并裁剪 (upload image and crop) -參考文件src/Main.vue
<ImageCrop :isBoundCheck='true' :dataShow='dataShow' @onHide='dataShow=0' @onSuccess='onSuccess'></ImageCrop>
1.1 自由旋轉(zhuǎn)裁剪 (upload image and crop) -參考文件src/Free.vue
<ImageCrop :isBoundCheck='false' :dataRotate='true' :dataShow='dataShow' @onHide='dataShow=0' @onSuccess='onSuccess'></ImageCrop>
裁剪已有圖片 (crop your image) -參考文件src/Image.vue
<ImageCrop :isBoundCheck='true' :dataShow='dataShow' dataTitle='裁剪照片' :dataFromUrl='true' :dataImgSrc='cropImage' @onHide='dataShow=0' @onSuccess='onSuccess'></ImageCrop>
更多參數(shù)說明
// 圖片裁剪插件調(diào)用方法 <image-cropping :dataWidth="640" :dataHeight="480" :dataShow="dataShow" :limitSize='4096000' limitType='png,jpeg,bmp' :uploadUrl="uploadUrl" @onHide='hideFn' @onError='imageCropError' @uploadSuccess="handleAvatarSuccess" :isBoundCheck="isBoundCheck" :outXy="outxy"> </image-cropping> -----------------提供給外邊傳入的參數(shù)---------------------- dataWidth:需要裁剪圖片的寬度， dataHeight：需要裁剪圖片的高度， dataShow:是否顯示插件, limitSize:選擇圖片大小限制， limitType：支持的圖片格式， uploadUrl：上傳圖片地址， --- 內(nèi)置ajax上傳圖片 如參數(shù)不滿足建議直接修改 isBoundCheck：是否需要檢測圖片邊緣 （放大，縮小，旋轉(zhuǎn) ，拖拽） onHide：關(guān)閉裁剪插件時調(diào)用的方法， onError：圖片加載失敗 （圖片不符合要求時給的提示語） uploadSuccess:圖片上傳成功回調(diào), outxy:圖片露底邊的距離，outx：左右可露的距離，outy：上下可露的距離，默認(rèn)不露底邊 dataBackground:圖片背景默認(rèn)白色 dataRotate:是否要支持自由旋轉(zhuǎn)（僅支持移動端） dataEnableRatio:是否需要高清圖片（啟用后可適配設(shè)備的deviceRatio得到高清圖） dataCircle: 是否裁剪為圓形 （一般用于移動端頭像） 一些說明 組件更適合移動端使用 組件使用了element-ui的el-dialog作為彈窗，如果您的框架沒有使用它，可以自己改造el-dialog或自己實現(xiàn)彈窗。 組件使用了中心縮放算法，體驗更佳。 組件使用了幾個icon用了iconfont，建議自己重新設(shè)計圖表使用本地的。
