p標(biāo)簽： Vue-cropper是一款基于Vue2.0開發(fā)的圖片裁剪組件，可以提供用戶自由的選擇、縮放和裁剪圖片。它是一個(gè)輕型的插件，使用簡單方便。在前端開發(fā)中常常會(huì)遇到需要上傳頭像、圖片等場景，而且這些圖片往往還需要裁剪。Vue-cropper就能派上用場了。 pre標(biāo)簽： 一、安裝 npm i vue-cropper -S 二、使用 1.引用 import Vue from 'vue'; import VueCropper from 'vue-cropper'; Vue.component(VueCropper); 2.頁面使用三、參數(shù)說明 1.img: 原圖片URL，必須項(xiàng) 2.auto-crop: 是否自動(dòng)裁剪，默認(rèn)為false 3.auto-zoom: 是否自動(dòng)縮放，默認(rèn)為false 4.fixed-box: 是否固定裁剪框大小，默認(rèn)為false 5.can-move-box: 是否允許拖動(dòng)裁剪框，默認(rèn)為true 6.zoom-radio: 縮放比例，最小值0，最大值1000，默認(rèn)值1 7.min-box-width: 最小裁剪框?qū)挾龋J(rèn)值0 8.min-box-height: 最小裁剪框高度，默認(rèn)值0 9.info-box：是否顯示裁剪后的圖片尺寸信息，默認(rèn)為false 四、方法說明 1.getCropBase64(): 獲取base64格式的裁剪后的圖片數(shù)據(jù)。 2.getCropBoxData(): 獲取裁剪框選區(qū)的數(shù)據(jù)。 3.getCropFile(): 獲取File格式的裁剪后的圖片數(shù)據(jù)（需要安裝cropperjs庫）。 五、總結(jié) Vue-cropper是一個(gè)十分實(shí)用的Vue圖片裁剪組件，幫助我們解決了圖片裁剪場景下的困擾，可以在前端上傳頭像、圖片等，還可以添加一些自定義功能，功能強(qiáng)大，使用簡單方便。