目錄
實作過程
一、圖檔檔案的上傳和讀取
二、圖檔展示和蒙層處理
CSS clip-path
三、裁剪框展示
裁剪框的縮放點
cursor 滑鼠樣式
四、裁剪框移動事件
五、裁剪框縮放操作
六、完成裁剪功能
drawImage
後記
我們在前端開發中，當遇到圖檔或頭像上傳功能時，如果有尺寸分辨率限制的話，就需要用到圖檔的裁剪功能。而canvas的使用，對于我們直接在web端實作圖檔裁剪功能成為可能。
本文将使用前端技術實作一個圖檔的裁剪功能，具體的代碼，可見圖檔裁剪源代碼。
實作過程
一、圖檔檔案的上傳和讀取
使用檔案上傳控件，實作圖檔上傳，擷取到圖檔檔案(File對象)後，可以通過 FileReader 或 URL.createObjectURL 兩個API完成對檔案資料的轉換，前文有描述詳解前端二進制：Blob、File、FileReader、ArrayBuffer、TypeArray、DataView。
- FileReader：一般使用readAsDataURL方法将File讀取為圖檔檔案的Base64資料，可以直接作為圖檔資料加載。Base64知識可見前文深入了解Base64字元串編碼知識。
- URL.createObjectURL：則生成一個僞協定的Blob-Url連結，用在這裡是一個圖檔的URL連結，可以加載圖檔資源。
如下，即響應檔案上傳事件，以Base64字元串資料加載圖檔：
// 上傳控件事件響應，加載圖檔檔案
document.getElementById('input-file').onchange = (e) => {
const file = e.target.files[0]
const reader = new FileReader()
reader.onload = async (event) => {
initImageCut(event.target.result)
}
reader.readAsDataURL(file)
}
這樣讀取的資料就是圖檔Base64字元串資料，可當做圖檔資源被 Image 對象加載了。
二、圖檔展示和蒙層處理
擷取到圖檔檔案的資料以後，加載圖檔擷取像素寬高：
const img = new Image()
img.src = dataUrl
img.onload = function () {
resolve(img)
}
一般通過 Image 對象，生成一個img執行個體，加載圖檔資料，img執行個體裡包含有圖檔寬高。
圖檔的寬高是比重重要的資料，如計算圖檔展示區的縮放比例，後續裁剪框的拖放和縮放也都需要用到。
如下代碼，計算縮放比例(zoom)：
zoom = Math.min(WIDTH / img.width, HEIGHT / img.height)
zoom = zoom > 1 ? 1 : zoom
其中，WIDTH 和 HEIGHT 是設定一個固定區域，用來展示圖檔和裁剪框，值的大小可以随意設定，在顯示器可視區域内最好；
zoom的作用，可以友善我們後面擷取圖檔的相對大小。
接下來就可以在頁面上展示圖檔，并設定蒙層處理。
圖檔的展示，我們這裡直接使用html的 <img> 标簽：
<img class="image" id="bgMaskImg"/>
<img class="image" id="cutBoxImg"/>
這裡使用了兩個 <img> 标簽元素，兩個元素加載同樣的圖檔資源，差別在于：
+ 其中 bgMaskImg 作為底圖，設定透明度(如0.5)，模拟蒙層效果；
+ cutBoxImg 作為裁剪框區域的圖檔展示，即非蒙層的清晰圖檔。
這裡圖檔展示需要達到的效果，如下：
上圖的展示中，看上去有蒙層效果的就是第一個img标簽；
而中間區域清晰的圖檔塊則是第二個img标簽的效果，這裡是借助CSS中的 clip-path 屬性來完成的。
然後，需要給兩個img标簽元素加載圖檔，并設定各元素的樣式：
bgMaskImgElm.src = cutBoxImgElm.src = imgUrl
setStyle()
CSS clip-path
clip-path 是一個CSS屬性，能夠隻展示元素的一塊部分區域，而其他區域隐藏起來。
這個特性正好可以作為裁剪功能使用，這裡使用在圖檔上，就能模拟出來裁剪蒙層的效果。
CSS之前有個clip屬性，但是已經廢棄，雖然部分浏覽器還支援，但建議使用clip-path。
clip-path屬性有很多取值，我們使用它的多邊形值 polygon，模拟方形的裁剪區域：
img {
clip-path: polygon(0 0, 100px 0, 100px 100px, 0 100px);
}
如上代碼，使用像素值，定位方形的四個頂點的坐标(左上、右上、右下、左下)，展示出圖檔的一個方形裁剪區域，這時候其他區域不可見，就形成了上面圖檔展示中的清晰區域。
因為這塊裁剪區域會随着裁剪框移動或者縮放而進行改變，是以需要通過JS來改變：
const clipPath = 'polygon(...)'
cutBoxImgElm.style.clipPath = clipPath
在移動或拖動後，重新計算裁剪區域的坐标點，再進行clip-path屬性的更新。
三、裁剪框展示
上面實作了圖檔的加載展示、蒙層和裁剪區域的處理後，接下來，就是對裁剪框的實作。
裁剪框使用div的方式就可以了，定義一個裁剪框：
<div id="cutBox" class="cut-box" style="display: none;">
...
</div>
這裡需要注意的是通過JS來改變這個裁剪div的位置和大小，并且也要同步更改上文提到的 clip-path 屬性：
cutBoxElm.style.width = cutBoxWidth * zoom - 2 + 'px'
cutBoxElm.style.height = cutBoxHeight * zoom - 2 + 'px'
cutBoxElm.style.left = cutBoxLeft + 'px'
cutBoxElm.style.top = cutBoxTop + 'px'
裁剪框的縮放點
裁剪框的展示，一般會設計八個縮放點，如下圖所示：
需要注意，圖上标注了縮放點大緻的名稱，下文會涉及到對應的點的事件處理，可以清楚是哪個操作。
這樣的代碼用div也較好實作，使用小圖示或者CSS畫出粗線即可，放入 cutBox 的裁剪框div下，跟随移動。
<div class="box-corner topleft" style="cursor:nw-resize;"></div>
<div class="box-corner topright" style="cursor:ne-resize;"></div>
<div class="box-corner bottomright" style="cursor:se-resize;"></div>
<div class="box-corner bottomleft" style="cursor:sw-resize;"></div>
<div class="box-middle topmiddle" style="cursor:n-resize;"></div>
<div class="box-middle bottommiddle" style="cursor:s-resize;"></div>
<div class="box-middle leftmiddle" style="cursor:w-resize;"></div>
<div class="box-middle rightmiddle" style="cursor:e-resize;"></div>
上面html代碼就是定義的八個點，配以對應的css樣式，就達到所需要的效果了。
需要注意的是，滑鼠樣式的變更，這裡的縮放點，當滑鼠hover上去的時候，需要展示不同的滑鼠樣式。
cursor 滑鼠樣式
cursor屬性主要設定光标的類型，在浏覽器上使用滑鼠操作時，會顯示滑鼠的不同樣式圖示。
如 pointer 懸浮的手指樣式，grab 抓手樣式等。
裁剪框裡使用的是八個縮放相關的滑鼠指針樣式：
| 值 | 描述 |
| nw-resize、se-resize | 左斜雙箭頭 |
| ne-resize、sw-resize | 右斜雙箭頭 |
| n-resize、s-resize | 垂直雙箭頭 |
| w-resize、e-resize | 水準雙箭頭 |
四、裁剪框移動事件
處理好圖檔、蒙層效果、裁剪框的結構和展示以後，下面就需要增加一些操作事件。
首先要處理的是裁剪框的移動事件，讓裁剪框可以在圖檔區域内任意移動，使用基本的滑鼠事件：
isMoveDown = false
cutBoxElm.addEventListener('mousedown', (event) => {
isMoveDown = true
const { offsetLeft, offsetTop } = cutBoxElm
const disX = event.clientX - offsetLeft
const disY = event.clientY - offsetTop
document.onmousemove = (docEvent) => {
const left = docEvent.clientX - disX
const top = docEvent.clientY - disY
if (isMoveDown) {
//...
}
docEvent.preventDefault()
}
document.onmouseup = () => {
isMoveDown = false
}
})
移動裁剪框，不牽涉到縮放，隻是對位置資訊跟随滑鼠同步更新，是以重點是計算滑鼠事件和裁剪框的偏移位置資料。
在計算位置定位資料後，還需要做的一件事，是不能讓裁剪框脫離圖檔區域，即不能移動到圖檔外面去，這樣是無效的。
// 裁剪框 left 資料
cutBoxLeft = Math.max(0, Math.min(left, curImageWidth - curCutBoxWidth))
// 裁剪框 top 資料
cutBoxTop = Math.max(0, Math.min(top, curImageHeight - curCutBoxHeight))
以上代碼，通過對圖檔寬高和裁剪框寬高的處理，擷取裁剪框位置的限制點。
五、裁剪框縮放操作
裁剪框的縮放事件，也需要進行綁定，本文示例，通過對八個縮放點進行各自的事件綁定，仍然是通過與移動裁剪框一樣的滑鼠事件：
// 是左上角的縮放點
document.querySelector('.topleft').addEventListener('mousedown', (event) => {
reSizeDown('topleft', event)
})
// ...
// 其他點各自綁定
reSizeDown 函數中仍然是對mousemove事件的處理：
let isResizeDown = false
function reSizeDown (type, event) {
isResizeDown = true
document.onmousemove = (docEvent) => {
const disX = docEvent.clientX - event.clientX
const disY = docEvent.clientY - event.clientY
if (isResizeDown) {
let cutW = currentCutBoxWidth
let cutH = currentCutBoxHeight
switch (type) {
case 'topleft':
cutBoxLeft = Math.min(currentBoxLeft + (currentCutBoxWidth * zoom ) - 16, Math.max(0, currentBoxLeft + disX))
cutBoxTop = Math.min(currentBoxTop + (currentCutBoxHeight * zoom ) - 16, Math.max(0, currentBoxTop + disY))
const nwWidth = currentCutBoxWidth - (disX / zoom)
const nwHeight = currentCutBoxHeight - (disY / zoom)
cutW = +(cutBoxLeft > 0 ? nwWidth : (currentCutBoxWidth + currentBoxLeft / zoom)).toFixed(0)
cutH = +(cutBoxTop > 0 ? nwHeight : (currentCutBoxHeight + currentBoxTop / zoom)).toFixed(0)
break
// case 'topright':
// ...
// 對每個縮放點進行處理
}
// ...
}
}
document.onmouseup = () => {
isResizeDown = false
}
}
以上代碼，以左上角的縮放為例，拖動左上角縮放時，裁剪框的位置和寬高尺寸都會發生變化，是以需要計算這四個值(left, top, width, height)。
裁剪框四個角的位置都需要類似這樣的處理，但是其他四個直線方向上的縮放，則要相對簡單一點：
case 'leftmiddle':
cutBoxLeft = Math.min(currentBoxLeft + (currentCutBoxWidth * zoom ) - 16, Math.max(0, currentBoxLeft + disX))
const wWidth = currentCutBoxWidth - (disX / zoom)
cutW = +(cutBoxLeft > 0 ? wWidth : (currentCutBoxWidth + currentBoxLeft / zoom)).toFixed(0)
break
以上代碼，隻需要計算 left 偏移和裁剪框寬度即可。
有了位置和寬高資料以後，實時改變裁剪框的樣式屬性和蒙層圖檔的 clip-path 屬性，同步變化，裁剪框的事件處理就基本完成了。
六、完成裁剪功能
事件綁定後，裁剪框的基本功能就已經完成了，剩下的，就是進行最後的圖檔裁剪操作。
裁剪框進行移動或者縮放以後，我們需要擷取到目前裁剪框的資料：位置和寬高資料。
根據位置和寬高，就可以使用canvas裁剪出圖檔：
const left = cutBoxLeft / zoom
const top = cutBoxTop / zoom
const myCanvas = document.createElement('canvas')
const ctx = myCanvas.getContext('2d')
myCanvas.width = cutBoxWidth
myCanvas.height = cutBoxHeight
ctx.drawImage(imgObj, left, top, cutBoxWidth, cutBoxHeight, 0, 0, cutBoxWidth, cutBoxHeight)
如上代碼，
位置資訊之前計算的是相對位置，還原到原始圖檔上，就需要通過縮放比例進行還原處理；裁剪框寬高因之前已進行還原，這裡直接取值即可。
畫布 myCanvas 裁剪繪制成功後，就得到了所需要的圖像，可以直接将畫布展示在頁面上，也可以将畫布導出為圖像Base64資料或者Blob-Url後再加載。
myCanvas.toBlob((blob) => {
const url = URL.createObjectURL(blob)
}, 'image/jpeg')
// 或
myCanvas.toDataURL()
drawImage
drawImage 是canvas中一個的API，用來處理各種圖像操作的，它的文法有三種，我們這裡用來做裁剪用的：
context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
其中，
- 參數 sx, sy, sWidth, sHeight，可以了解為對原始圖檔按該位置和寬高尺寸進行裁剪，就能得到一張裁好的新圖；
- 參數 dx, dy, dWidth, dHeight，就是将上面裁好的新圖，按照該位置和寬高，繪制到canvas畫布上，這個時候，就等到了裁剪後新圖檔在canvas裡的展示。
下圖就是示例裡裁剪功能完整的界面展示效果：
上圖有對 input 标簽的樣式修改，使用僞元素 ::file-selector-button 改變樣式美化上傳控件按鈕，詳細可檢視前文CSS僞元素詳解以及僞元素與僞類的差別。
後記
經過以上步驟，一個基于前端技術的基礎的圖檔裁剪功能就完成了。
圖檔裁剪還可以有多種方法進行處理，示例使用的都是原始标簽和API，友善了解。
後續也可以進行各種元件化的封裝，不論vue、react、webcomponent等，都可以快速的引入進行封裝。