基於JavaScript實現圖片裁剪功能

2023-02-24 06:00:37

一、圖片檔案的上傳和讀取

使用檔案上傳控制元件，實現圖片上傳，獲取到圖片檔案(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 = 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裡的展示。

下圖就是範例裡裁剪功能完整的介面展示效果：