1.安裝

工程目錄下運行cmd

npm install vue-cropper -S

2.引用組件

全局引入，在main.js中添加

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

3.使用裁剪框

這里httpUrl可以隨意選擇一張網絡圖片的連接作測試

        <!-- 圖片裁剪框 --><div style="width: 400px;height: 400px;"><vue-cropper autoCrop :img="httpUrl" ref="cropper" centerBox fixed :fixedNumber="[1,1]"/></div><button @click="getCropData()">獲取截圖后圖片</button>

獲取的數據是base64的格式，發送給后端進行解碼。

      //獲取裁剪后圖片getCropData(){this.$refs.cropper.getCropData(data=>{console.log(data);//發起axios post請求this.$http.post("/saveImg",{base64ImageData:data,}).then((response)=>{if(response.data.code === 0){//發送成功this.$message({message: '截取成功！！！',type: 'success',});this.$router.go(0);}else{this.$message.error(response.data.data.message);}}).catch((error)=>{//未接受到response的網絡傳輸等錯誤console.log(error);});})},

后端代碼根據實際情況可能有稍微差別，主要提供思路(這里默認保存為jpg格式，其它格式需要改后綴)

    //存儲截取后的圖片@PostMapping("/saveImg")public CommonResult<Object> saveImg(@RequestBody String base64ImageData){//先解析token是否合法User currentUser = JwtTokenUtils.getCurrentUser();// 去掉base64前綴 data:image/jpeg;base64,一定一定     同時去掉末尾"}兩個符號base64ImageData = base64ImageData.substring(base64ImageData.indexOf(",", 1) + 1,base64ImageData.length() - 2);//解碼為二進制byte[] imageBytes = Base64.getDecoder().decode(base64ImageData);String outputPath = System.getProperty("user.dir")+"/upload/image/" + currentUser.getImg();Path path = Paths.get(outputPath);try {//存在則覆蓋，不存在則新建Files.write(path, imageBytes, StandardOpenOption.WRITE);return CommonResult.success();} catch (IOException e) {// 輸出文件發生寫入錯誤信息e.printStackTrace();return CommonResult.failed(ErrorCode.FILE_WRITE_FAIL.getCode(), Message.createMessage(ErrorCode.FILE_WRITE_FAIL.getMessage()));}}