目錄

• 一、圖片文件的上傳和讀取
• 二、圖片展示和蒙層處理
• CSS clip-path
• 三、裁剪框展示
• 裁剪框的縮放點(diǎn)
• cursor 鼠標(biāo)樣式
• 四、裁剪框移動(dòng)事件
• 五、裁剪框縮放操作
• 六、完成裁剪功能
• drawImage
• 后記

在前端開(kāi)發(fā)中，當(dāng)遇到圖片或頭像上傳等功能時(shí)，有尺寸分辨率限制的話(huà)，就需要用到圖片的裁剪功能。想了解圖片基礎(chǔ)知識(shí)的，可見(jiàn)前文圖片基礎(chǔ)知識(shí)介紹。

而canvas的使用，對(duì)于我們直接在web端實(shí)現(xiàn)圖片裁剪功能成為可能。本文將使用前端技術(shù)實(shí)現(xiàn)一個(gè)圖片的裁剪功能。

一、圖片文件的上傳和讀取

使用文件上傳控件，實(shí)現(xiàn)圖片上傳，獲取到圖片文件(File對(duì)象)后，可以通過(guò) FileReader 或 URL.createObjectURL 兩個(gè)API完成對(duì)文件數(shù)據(jù)的轉(zhuǎn)換。前文有描述深入理解前端二進(jìn)制API知識(shí)。

• FileReader：一般使用readAsDataURL方法將File讀取為圖片文件的Base64數(shù)據(jù)，可以直接作為圖片數(shù)據(jù)加載。Base64知識(shí)可見(jiàn)前文深入理解Base64字符串編碼知識(shí)。
• URL.createObjectURL：則生成一個(gè)偽協(xié)議的Blob-Url鏈接，用在這里是一個(gè)圖片的URL鏈接，可以加載圖片資源。

如下，即響應(yīng)文件上傳事件，以Base64字符串?dāng)?shù)據(jù)加載圖片：

// 上傳控件事件響應(yīng)，加載圖片文件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)}

這樣讀取的數(shù)據(jù)就是圖片Base64字符串?dāng)?shù)據(jù)，可當(dāng)做圖片資源被 Image 對(duì)象加載了。

二、圖片展示和蒙層處理

獲取到圖片文件的數(shù)據(jù)以后，加載圖片獲取像素寬高：

const img = new Image()img.src = dataUrlimg.onload = function () {  resolve(img)}

一般通過(guò) Image 對(duì)象，生成一個(gè)img實(shí)例，加載圖片數(shù)據(jù)，img實(shí)例里包含有圖片寬高。

圖片的寬高是比重重要的數(shù)據(jù)，如計(jì)算圖片展示區(qū)的縮放比例，后續(xù)裁剪框的拖放和縮放也都需要用到。

如下代碼，計(jì)算縮放比例(zoom)：

zoom = Math.min(WIDTH / img.width, HEIGHT / img.height)zoom = zoom > 1 ? 1 : zoom

其中，WIDTH 和 HEIGHT 是設(shè)定一個(gè)固定區(qū)域，用來(lái)展示圖片和裁剪框，值的大小可以隨意設(shè)置，在顯示器可視區(qū)域內(nèi)最好；

zoom的作用，可以方便我們后面獲取圖片的相對(duì)大小。

接下來(lái)就可以在頁(yè)面上展示圖片，并設(shè)置蒙層處理。

圖片的展示，我們這里直接使用html的 <img> 標(biāo)簽：

<img id="bgMaskImg"/><img id="cutBoxImg"/>

這里使用了兩個(gè) <img> 標(biāo)簽元素，兩個(gè)元素加載同樣的圖片資源，區(qū)別在于：

• 其中 bgMaskImg 作為底圖，設(shè)置透明度(如0.5)，模擬蒙層效果；
• cutBoxImg 作為裁剪框區(qū)域的圖片展示，即非蒙層的清晰圖片。

這里圖片展示需要達(dá)到的效果，如下：

上圖的展示中，看上去有蒙層效果的就是第一個(gè)img標(biāo)簽；

而中間區(qū)域清晰的圖片塊則是第二個(gè)img標(biāo)簽的效果，這里是借助CSS中的 clip-path 屬性來(lái)完成的。

然后，需要給兩個(gè)img標(biāo)簽元素加載圖片，并設(shè)置各元素的樣式：

bgMaskImgElm.src = cutBoxImgElm.src = imgUrlsetStyle()

CSS clip-path

clip-path 是一個(gè)CSS屬性，能夠只展示元素的一塊部分區(qū)域，而其他區(qū)域隱藏起來(lái)。

這個(gè)特性正好可以作為裁剪功能使用，這里使用在圖片上，就能模擬出來(lái)裁剪蒙層的效果。

CSS之前有個(gè) clip 屬性，但是已經(jīng)廢棄，雖然部分瀏覽器還支持，但建議使用 clip-path。

clip-path屬性有很多取值，我們使用它的多邊形值 polygon，模擬方形的裁剪區(qū)域：

img {  clip-path: polygon(0 0, 100px 0, 100px 100px, 0 100px);}

如上代碼，使用像素值，定位方形的四個(gè)頂點(diǎn)的坐標(biāo)(左上、右上、右下、左下)，展示出圖片的一個(gè)方形裁剪區(qū)域，這時(shí)候其他區(qū)域不可見(jiàn)，就形成了上面圖片展示中的清晰區(qū)域。

因?yàn)檫@塊裁剪區(qū)域會(huì)隨著裁剪框移動(dòng)或者縮放而進(jìn)行改變，所以需要通過(guò)JS來(lái)改變：

const clipPath = `polygon(...)`cutBoxImgElm.style.clipPath = clipPath

在移動(dòng)或拖動(dòng)后，重新計(jì)算裁剪區(qū)域的坐標(biāo)點(diǎn)，再進(jìn)行 clip-path 屬性的更新。

三、裁剪框展示

上面實(shí)現(xiàn)了圖片的加載展示、蒙層和裁剪區(qū)域的處理后，接下來(lái)，就是對(duì)裁剪框的實(shí)現(xiàn)。

裁剪框使用div的方式就可以了，定義一個(gè)裁剪框：

<div id="cutBox">...</div>

這里需要注意的是通過(guò)JS來(lái)改變這個(gè)裁剪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"

裁剪框的縮放點(diǎn)

裁剪框的展示，一般會(huì)設(shè)計(jì)八個(gè)縮放點(diǎn)，如下圖所示：

需要注意，圖上標(biāo)注了縮放點(diǎn)大致的名稱(chēng)，下文會(huì)涉及到對(duì)應(yīng)的點(diǎn)的事件處理，可以清楚是哪個(gè)操作。

這樣的代碼用div也較好實(shí)現(xiàn)，使用小圖標(biāo)或者CSS畫(huà)出粗線(xiàn)即可，放入 cutBox 的裁剪框div下，跟隨移動(dòng)。

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

上面html代碼就是定義的八個(gè)點(diǎn)，配以對(duì)應(yīng)的css樣式，就達(dá)到所需要的效果了。

需要注意的是，鼠標(biāo)樣式的變更，這里的縮放點(diǎn)，當(dāng)鼠標(biāo)hover上去的時(shí)候，需要展示不同的鼠標(biāo)樣式。

cursor 鼠標(biāo)樣式

cursor屬性主要設(shè)置光標(biāo)的類(lèi)型，在瀏覽器上使用鼠標(biāo)操作時(shí)，會(huì)顯示鼠標(biāo)的不同樣式圖標(biāo)。

如 pointer 懸浮的手指樣式，grab 抓手樣式等。

裁剪框里使用的是八個(gè)縮放相關(guān)的鼠標(biāo)指針樣式：

值描述nw-resize、se-resize左斜雙箭頭ne-resize、sw-resize右斜雙箭頭n-resize、s-resize垂直雙箭頭w-resize、e-resize水平雙箭頭

四、裁剪框移動(dòng)事件

處理好圖片、蒙層效果、裁剪框的結(jié)構(gòu)和展示以后，下面就需要增加一些操作事件。

首先要處理的是裁剪框的移動(dòng)事件，讓裁剪框可以在圖片區(qū)域內(nèi)任意移動(dòng)，使用基本的鼠標(biāo)事件：

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  }})

移動(dòng)裁剪框，不牽涉到縮放，只是對(duì)位置信息跟隨鼠標(biāo)同步更新，所以重點(diǎn)是計(jì)算鼠標(biāo)事件和裁剪框的偏移位置數(shù)據(jù)。

在計(jì)算位置定位數(shù)據(jù)后，還需要做的一件事，是不能讓裁剪框脫離圖片區(qū)域，即不能移動(dòng)到圖片外面去，這樣是無(wú)效的。

// 裁剪框 left 數(shù)據(jù)cutBoxLeft = Math.max(0, Math.min(left, curImageWidth - curCutBoxWidth))// 裁剪框 top 數(shù)據(jù)cutBoxTop = Math.max(0, Math.min(top, curImageHeight - curCutBoxHeight))

以上代碼，通過(guò)對(duì)圖片寬高和裁剪框?qū)捀叩奶幚恚@取裁剪框位置的限制點(diǎn)。

五、裁剪框縮放操作

裁剪框的縮放事件，也需要進(jìn)行綁定，本文示例，通過(guò)對(duì)八個(gè)縮放點(diǎn)進(jìn)行各自的事件綁定，仍然是通過(guò)與移動(dòng)裁剪框一樣的鼠標(biāo)事件：

// 是左上角的縮放點(diǎn)document.querySelector(".topleft").addEventListener("mousedown", (event) => {  reSizeDown("topleft", event)})// ...// 其他點(diǎn)各自綁定

reSizeDown 函數(shù)中仍然是對(duì) 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":// ...// 對(duì)每個(gè)縮放點(diǎn)進(jìn)行處理      }      // ...    }  }  document.onmouseup = () => {    isResizeDown = false  }}

以上代碼，以左上角的縮放為例，拖動(dòng)左上角縮放時(shí)，裁剪框的位置和寬高尺寸都會(huì)發(fā)生變化，所以需要計(jì)算這四個(gè)值(left, top, width, height)。

裁剪框四個(gè)角的位置都需要類(lèi)似這樣的處理，但是其他四個(gè)直線(xiàn)方向上的縮放，則要相對(duì)簡(jiǎn)單一點(diǎn)：

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

以上代碼，只需要計(jì)算 left 偏移和裁剪框?qū)挾燃纯伞?/p>

有了位置和寬高數(shù)據(jù)以后，實(shí)時(shí)改變裁剪框的樣式屬性和蒙層圖片的 clip-path 屬性，同步變化，裁剪框的事件處理就基本完成了。

六、完成裁剪功能

事件綁定后，裁剪框的基本功能就已經(jīng)完成了，剩下的，就是進(jìn)行最后的圖片裁剪操作。

裁剪框進(jìn)行移動(dòng)或者縮放以后，我們需要獲取到當(dāng)前裁剪框的數(shù)據(jù)：位置和寬高數(shù)據(jù)。

根據(jù)位置和寬高，就可以使用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)

如上代碼，

位置信息之前計(jì)算的是相對(duì)位置，還原到原始圖片上，就需要通過(guò)縮放比例進(jìn)行還原處理；裁剪框?qū)捀咭蛑耙堰M(jìn)行還原，這里直接取值即可。

畫(huà)布 myCanvas 裁剪繪制成功后，就得到了所需要的圖像，可以直接將畫(huà)布展示在頁(yè)面上，也可以將畫(huà)布導(dǎo)出為圖像Base64數(shù)據(jù)或者Blob-Url后再加載。

myCanvas.toBlob((blob) => {  const url = URL.createObjectURL(blob)}, "image/jpeg")// 或myCanvas.toDataURL()

drawImage

drawImage 是canvas中一個(gè)的API，用來(lái)處理各種圖像操作的，它的語(yǔ)法有三種，我們?nèi)】梢宰霾眉舻模?/p>

context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

其中，

• 參數(shù) sx, sy, sWidth, sHeight，就可以理解為對(duì)原始圖片按該位置和寬高尺寸進(jìn)行裁剪，就可以得到一張裁好的新圖；
• 參數(shù) dx, dy, dWidth, dHeight，就是將上面裁好的新圖，按照該位置和寬高，繪制到canvas畫(huà)布上，這個(gè)時(shí)候，就等到了裁剪后新圖片在canvas里的展示。

下圖就是示例里裁剪功能完整的界面展示效果：

后記

經(jīng)過(guò)以上步驟，一個(gè)基于前端技術(shù)的基礎(chǔ)的圖片裁剪功能就完成了。 圖片裁剪還可以有多種方法進(jìn)行處理，示例使用的都是原始標(biāo)簽和API，方便理解。 后續(xù)也可以進(jìn)行各種組件化的封裝，不論vue、react、webcomponent等，都可以快速的引入進(jìn)行封裝。

到此這篇關(guān)于基于JavaScript實(shí)現(xiàn)圖片裁剪功能的文章就介紹到這了,更多相關(guān)JavaScript圖片裁剪內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！