基于JavaScript實現圖片裁剪功能
目錄
- 一、圖片文件的上傳和讀取
- 二、圖片展示和蒙層處理
- CSS clip-path
- 三、裁剪框展示
- 裁剪框的縮放點
- cursor 鼠標樣式
- 四、裁剪框移動事件
- 五、裁剪框縮放操作
- 六、完成裁剪功能
- drawImage
- 后記
在前端開發中，當遇到圖片或頭像上傳等功能時，有尺寸分辨率限制的話，就需要用到圖片的裁剪功能。想了解圖片基礎知識的，可見前文圖片基礎知識介紹。
而canvas的使用，對于我們直接在web端實現圖片裁剪功能成為可能。本文將使用前端技術實現一個圖片的裁剪功能。
一、圖片文件的上傳和讀取
使用文件上傳控件，實現圖片上傳，獲取到圖片文件(File對象)后，可以通過 FileReader 或 URL.createObjectURL 兩個API完成對文件數據的轉換。前文有描述深入理解前端二進制API知識。
- 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 = dataUrlimg.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 id="bgMaskImg"/><img id="cutBoxImg"/>
這里使用了兩個 <img> 標簽元素，兩個元素加載同樣的圖片資源，區別在于：
- 其中
bgMaskImg作為底圖，設置透明度(如0.5)，模擬蒙層效果； cutBoxImg作為裁剪框區域的圖片展示，即非蒙層的清晰圖片。
這里圖片展示需要達到的效果，如下：
上圖的展示中，看上去有蒙層效果的就是第一個img標簽；
而中間區域清晰的圖片塊則是第二個img標簽的效果，這里是借助CSS中的 clip-path 屬性來完成的。
然后，需要給兩個img標簽元素加載圖片，并設置各元素的樣式：
bgMaskImgElm.src = cutBoxImgElm.src = imgUrlsetStyle()
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">...</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></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
上面html代碼就是定義的八個點，配以對應的css樣式，就達到所需要的效果了。
需要注意的是，鼠標樣式的變更，這里的縮放點，當鼠標hover上去的時候，需要展示不同的鼠標樣式。
cursor 鼠標樣式
cursor屬性主要設置光標的類型，在瀏覽器上使用鼠標操作時，會顯示鼠標的不同樣式圖標。
如 pointer 懸浮的手指樣式，grab 抓手樣式等。
裁剪框里使用的是八個縮放相關的鼠標指針樣式：
四、裁剪框移動事件
處理好圖片、蒙層效果、裁剪框的結構和展示以后，下面就需要增加一些操作事件。
首先要處理的是裁剪框的移動事件，讓裁剪框可以在圖片區域內任意移動，使用基本的鼠標事件：
isMoveDown = falsecutBoxElm.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 = falsefunction 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 / zoomconst top = cutBoxTop / zoomconst myCanvas = document.createElement("canvas")const ctx = myCanvas.getContext("2d")myCanvas.width = cutBoxWidthmyCanvas.height = cutBoxHeightctx.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里的展示。
下圖就是示例里裁剪功能完整的界面展示效果：
后記
經過以上步驟，一個基于前端技術的基礎的圖片裁剪功能就完成了。 圖片裁剪還可以有多種方法進行處理，示例使用的都是原始標簽和API，方便理解。 后續也可以進行各種組件化的封裝，不論vue、react、webcomponent等，都可以快速的引入進行封裝。
到此這篇關于基于JavaScript實現圖片裁剪功能的文章就介紹到這了,更多相關JavaScript圖片裁剪內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！
相關文章：
網公網安備