先給大家看一下最終效果。
大多數功能都是由 Cropper.js封裝好的，調整并制作了：
- 上傳圖檔
- 對圖檔的裁剪以及調整（旋轉、縮放）、
- 實時預覽
- 将裁剪後的資料儲存為blob發送至後端。
Q1：為什麼選擇Cropper.js和如何安裝Cropper.js？
一開始制作這個需求思路有兩個，使用canvas原生或者尋找現成的庫，對比了一番覺得canvas實作時間耗費較長，且秉承着不重複造輪子的原則（其實是菜），決定使用Cropper.js。官方封裝了很多參數、方法、事件，上手容易，文檔閱讀體驗較好、而且便于擴充。
Cropper.js官方倉庫+文檔：github.com/fengyuanche…
Installation
npm install cropperjs 複制
Q2：如何上傳圖檔?
我們實作上述功能需要的核心HTMl部分隻有：
<!-- 1.一個用于擷取上傳檔案的input，type="file"，并且監聽onchange事件 -->
<input
type="file"
accept="image/*"
id="imgReader"
onchange="loadingImg"
>
<!-- 2.一個用于給Cropper.js覆寫使用的img -->
<img id="cropImg">
<!-- 3.兩個用于預覽的div -->
<div class="previewText">裁剪預覽</div>
<div class="previewBox"></div> 複制
首先先将用于上傳的input隐藏起來，我們并不需要它的樣式
.inpuFile{
display: none;
} 複制
然後給你項目中的某個按鈕添加一個點選事件，并且調用
function uploadImg(){
document.querySelector('#imgReader').click()
}, 複制
即可打開上傳檔案的視窗，然後選擇你需要的圖檔
Q3：如何将圖檔讀取顯示和使用Cropper.js添加裁剪控件？
上傳檔案成功後，會觸發onchange事件，調用loadingImg（）
//引入Cropper.js
import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';
const CROPPER = null //建立一個cropper的全局對象
function loadingImg(eve){
//讀取上傳檔案
let reader = new FileReader();
if(event.target.files[0]){
//readAsDataURL方法可以将File對象轉化為data:URL格式的字元串（base64編碼）
reader.readAsDataURL(eve.target.files[0]);
reader.onload = (e)=>{
let dataURL = reader.result;
//将img的src改為剛上傳的檔案的轉換格式
document.querySelector('#cropImg').src = dataURL;
const image = document.getElementById('cropImg');
//建立cropper執行個體-----------------------------------------
CROPPER = new Cropper(image, {
aspectRatio: 16 / 16,
viewMode:0,
minContainerWidth:500,
minContainerHeight:500,
dragMode:'move',
preview:[ document.querySelector('.previewBox'),
document.querySelector('.previewBoxRound')]
})
}
}
} 複制
new Cropper方法：
new Cropper(element[, options])
第一個參數：element
- 類型：HTMLImageElement 或 HTMLCanvasElement；
- 作用：用于顯示裁剪功能；
第二個參數（可選）：
- 類型: Object；
- 作用：用于添加具體參數設定
我們需要用到的參數有：
{
aspectRatio: 16 / 16, //固定裁剪框的比例（橫/豎）,此處16/16則固定為正方形
minContainerWidth:500, //容器最小的寬度
minContainerHeight:500, //容器最小的高度
dragMode:'move', //設定裁剪框為可以移動
preview:[ document.querySelector('.previewBox'), //設定我們需要添加實時預覽的地方
document.querySelector('.previewBoxRound')]
//更多參數請參照官方倉庫...我們這裡用不着
} 複制
先忽略實時預覽，完成到這裡我們就可看到我們上傳的圖檔以及裁剪功能：
Q4：如何進行實時預覽？
上面建立cropper的時候，我們在選項中添加了
preview:[ document.querySelector('.previewBox'),
document.querySelector('.previewBoxRound')] 複制
preview就是用來設定我們需要實時預覽的地方，但是設定完成之後要給上述的兩個div添加一下樣式，才可以正常顯示
.previewBox,.previewBoxRound{
box-shadow: 0 0 5px #adadad;
width: 100px;
height: 100px;
margin-top: 30px;
overflow: hidden; /*這個超出設定為隐藏很重要，否則就會整個顯示出來了*/
}
.previewBoxRound{
border-radius: 50%; /*設定為圓形*/
} 複制
Q5：如何擷取裁剪資料并發送至後端？
function GetData(){
//getCroppedCanvas方法可以将裁剪區域的資料轉換成canvas資料
CROPPER.getCroppedCanvas({
maxWidth: 4096,
maxHeight: 4096,
fillColor: '#fff',
imageSmoothingEnabled: true,
imageSmoothingQuality: 'high',
}).toBlob((blob) => {
//然後調用浏覽器原生的toBlob方法将canvas資料轉換成blob資料
//之後就可以愉快的将blob資料發送至後端啦，可根據自己情況進行發送，我這裡用的是axios
const formData = new FormData();
// 第三個參數為檔案名，可選填.
formData.append('croppedImage', blob/*, 'example.png' */);
let config = {
headers:{'Content-Type':'multipart/form-data'}
}
this.$axios.post(flow_mission_UploadFile(),param,config)
.then((response)=>{
console.log(response)
})
.catch((err)=>{
console.log(err)
})
})
} 複制
其他需要注意的地方:
複制
1.裁剪框尺寸問題
裁剪部分預設會根據上傳圖檔的大小進行改變
- 解決圖檔過小的問題：
//在new Cropper的參數中設定
minContainerWidth:500, //容器最小的寬度
minContainerHeight:500, //容器最小的高度 複制
複制代碼
複制
- 解決圖檔過大的問題： 給添加強定寬度樣式
#cropImg{
height: 450px;
width: 450px;
box-shadow: 0 0 5px #adadad;
} 複制
2.重複上傳的問題
再次上傳不同圖檔的時候，還是出現原來的圖檔，隻需要在上傳檔案的時候，對之前存在的CROPPER進行摧毀就可以了
function uploadImg(){
document.querySelector('#imgReader').click()
if(CROPPER){
CROPPER.destroy()
}
},3.其他功能的實作 複制
這裡列舉幾個我這裡用到的
- CROPPER.rotate(90) ：旋轉圖檔，機關為數字，90為順時針旋轉90度
- CROPPER.zoom(0.1) ：縮放圖檔，機關為數字，0.1為在原縮放基礎上增加0.1倍
- CROPPER.reset() ：重置對圖檔的所有操作
還有很多其他方法和事件可以自行參照倉庫，一個普通的上傳頭像功能就這樣應該夠用了！這裡就不一一列舉了。
謝謝大家。