先npm 下載 vue-cropper
npm install vue-cropper
main.js 文件下引用
import VueCropper from 'vue-cropper' // 圖片剪切組件
Vue.use(VueCropper)
開始使用。當我從0開始百度vue-cropper的相關文章的時候發現個問題，就是他們的代碼總是會缺個函數或者自己寫了個接口文件導致我在百度看了幾個小時連個demo都弄不出來，無奈之下只好去官網github里面的在線例子里拿demo，這里我這邊就不介紹vue-cropper的基本介紹什么的了，有興趣的朋友可以去github上測試demo和查看基本文檔。
github鏈接:
https://github.com/xyxiao001/vue-cropper
開始探坑:
當我把demo放在本地的時候發現裁剪框樣式丟失，找了很長時間問題原因，只能歸結於element-admin底層代碼樣式和vue-cropper的css代碼沖突了。
上面是官網的正常顯示
下面是我的BUG顯示，查看了下元素，發現這幾個span樣式加不上
const spanNode = document.getElementsByClassName("line-w")[0].parentNode.classList.add("spanstr");
我用原生js的方法給父元素加上class
.spanstr {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
z-index: -200;
}
當當當當，樣式出來了，但是又個小問題，官網上這個父級span是沒有寬高的，我給它加上寬高后這個截圖框不能移動了，解決辦法改變層級z-index 把層級調低，就不影響截圖框移動了。
解決完一個坑，心情舒暢，繼續下個坑。
我用vue-cropper這個插件完成的功能是用戶頭像上傳,但是呢左側和右側裁剪區用的其實是一個圖片，只是右側的有單獨的css樣式，這就跟我的需求有點出入了，我找到了html2canvas可以做到截取div可視區域轉化為圖片，這樣我只要把裁剪后的區域再轉成圖片就好了，更改下。
安裝 html2canvas
npm install html2canvas --save
引入
import html2canvas from "html2canvas";
使用:
dataURL就是截取轉化后的圖片路徑，但是我的后端說是要轉成文件流再傳給后端，再轉成文件流。
功能基本上完事了，還有個小坑，就是我上傳一張圖片后清空圖片，再次上傳清空的那張圖片的時候發現是上傳不上去的。
找到內置的上傳功能
加上一行代碼就好了判斷option.img是否有值，如果沒有值就把它這個集合里面的路徑刪除掉。
到這功能就基本完事了，發完成圖，ui圖和接口還沒有所以不要吐槽樣式。
