基于JavaScript實現(xiàn)圖片裁剪功能
在前端開發(fā)中,當遇到圖片或頭像上傳等功能時,有尺寸分辨率限制的話,就需要用到圖片的裁剪功能。想了解圖片基礎(chǔ)知識的,可見前文圖片基礎(chǔ)知識介紹。
而canvas的使用,對于我們直接在web端實現(xiàn)圖片裁剪功能成為可能。本文將使用前端技術(shù)實現(xiàn)一個圖片的裁剪功能。
一、圖片文件的上傳和讀取
使用文件上傳控件,實現(xiàn)圖片上傳,獲取到圖片文件(File對象)后,可以通過 FileReader 或 URL.createObjectURL 兩個API完成對文件數(shù)據(jù)的轉(zhuǎn)換。前文有描述深入理解前端二進制API知識。
- FileReader:一般使用readAsDataURL方法將File讀取為圖片文件的Base64數(shù)據(jù),可以直接作為圖片數(shù)據(jù)加載。Base64知識可見前文深入理解Base64字符串編碼知識。
- URL.createObjectURL:則生成一個偽協(xié)議的Blob-Url鏈接,用在這里是一個圖片的URL鏈接,可以加載圖片資源。
如下,即響應文件上傳事件,以Base64字符串數(shù)據(jù)加載圖片:
// 上傳控件事件響應,加載圖片文件
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字符串數(shù)據(jù),可當做圖片資源被 Image 對象加載了。
二、圖片展示和蒙層處理
獲取到圖片文件的數(shù)據(jù)以后,加載圖片獲取像素寬高:
const img = new Image()
img.src = dataUrl
img.onload = function () {
resolve(img)
}一般通過 Image 對象,生成一個img實例,加載圖片數(shù)據(jù),img實例里包含有圖片寬高。
圖片的寬高是比重重要的數(shù)據(jù),如計算圖片展示區(qū)的縮放比例,后續(xù)裁剪框的拖放和縮放也都需要用到。
如下代碼,計算縮放比例(zoom):
zoom = Math.min(WIDTH / img.width, HEIGHT / img.height) zoom = zoom > 1 ? 1 : zoom
其中,WIDTH 和 HEIGHT 是設(shè)定一個固定區(qū)域,用來展示圖片和裁剪框,值的大小可以隨意設(shè)置,在顯示器可視區(qū)域內(nèi)最好;
zoom的作用,可以方便我們后面獲取圖片的相對大小。
接下來就可以在頁面上展示圖片,并設(shè)置蒙層處理。
圖片的展示,我們這里直接使用html的 <img> 標簽:
<img class="image" id="bgMaskImg"/> <img class="image" id="cutBoxImg"/>
這里使用了兩個 <img> 標簽元素,兩個元素加載同樣的圖片資源,區(qū)別在于:
- 其中
bgMaskImg作為底圖,設(shè)置透明度(如0.5),模擬蒙層效果; cutBoxImg作為裁剪框區(qū)域的圖片展示,即非蒙層的清晰圖片。
這里圖片展示需要達到的效果,如下:

上圖的展示中,看上去有蒙層效果的就是第一個img標簽;
而中間區(qū)域清晰的圖片塊則是第二個img標簽的效果,這里是借助CSS中的 clip-path 屬性來完成的。
然后,需要給兩個img標簽元素加載圖片,并設(shè)置各元素的樣式:
bgMaskImgElm.src = cutBoxImgElm.src = imgUrl setStyle()
CSS clip-path
clip-path 是一個CSS屬性,能夠只展示元素的一塊部分區(qū)域,而其他區(qū)域隱藏起來。
這個特性正好可以作為裁剪功能使用,這里使用在圖片上,就能模擬出來裁剪蒙層的效果。
CSS之前有個 clip 屬性,但是已經(jīng)廢棄,雖然部分瀏覽器還支持,但建議使用 clip-path。
clip-path屬性有很多取值,我們使用它的多邊形值 polygon,模擬方形的裁剪區(qū)域:
img {
clip-path: polygon(0 0, 100px 0, 100px 100px, 0 100px);
}如上代碼,使用像素值,定位方形的四個頂點的坐標(左上、右上、右下、左下),展示出圖片的一個方形裁剪區(qū)域,這時候其他區(qū)域不可見,就形成了上面圖片展示中的清晰區(qū)域。
因為這塊裁剪區(qū)域會隨著裁剪框移動或者縮放而進行改變,所以需要通過JS來改變:
const clipPath = `polygon(...)` cutBoxImgElm.style.clipPath = clipPath
在移動或拖動后,重新計算裁剪區(qū)域的坐標點,再進行 clip-path 屬性的更新。
三、裁剪框展示
上面實現(xiàn)了圖片的加載展示、蒙層和裁剪區(qū)域的處理后,接下來,就是對裁剪框的實現(xiàn)。
裁剪框使用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'
裁剪框的縮放點
裁剪框的展示,一般會設(shè)計八個縮放點,如下圖所示:

需要注意,圖上標注了縮放點大致的名稱,下文會涉及到對應的點的事件處理,可以清楚是哪個操作。
這樣的代碼用div也較好實現(xiàn),使用小圖標或者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屬性主要設(shè)置光標的類型,在瀏覽器上使用鼠標操作時,會顯示鼠標的不同樣式圖標。
如 pointer 懸浮的手指樣式,grab 抓手樣式等。
裁剪框里使用的是八個縮放相關(guān)的鼠標指針樣式:
| 值 | 描述 |
|---|---|
| nw-resize、se-resize | 左斜雙箭頭 |
| ne-resize、sw-resize | 右斜雙箭頭 |
| n-resize、s-resize | 垂直雙箭頭 |
| w-resize、e-resize | 水平雙箭頭 |
四、裁剪框移動事件
處理好圖片、蒙層效果、裁剪框的結(jié)構(gòu)和展示以后,下面就需要增加一些操作事件。
首先要處理的是裁剪框的移動事件,讓裁剪框可以在圖片區(qū)域內(nèi)任意移動,使用基本的鼠標事件:
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
}
})移動裁剪框,不牽涉到縮放,只是對位置信息跟隨鼠標同步更新,所以重點是計算鼠標事件和裁剪框的偏移位置數(shù)據(jù)。
在計算位置定位數(shù)據(jù)后,還需要做的一件事,是不能讓裁剪框脫離圖片區(qū)域,即不能移動到圖片外面去,這樣是無效的。
// 裁剪框 left 數(shù)據(jù) cutBoxLeft = Math.max(0, Math.min(left, curImageWidth - curCutBoxWidth)) // 裁剪框 top 數(shù)據(jù) cutBoxTop = Math.max(0, Math.min(top, curImageHeight - curCutBoxHeight))
以上代碼,通過對圖片寬高和裁剪框?qū)捀叩奶幚恚@取裁剪框位置的限制點。
五、裁剪框縮放操作
裁剪框的縮放事件,也需要進行綁定,本文示例,通過對八個縮放點進行各自的事件綁定,仍然是通過與移動裁剪框一樣的鼠標事件:
// 是左上角的縮放點
document.querySelector('.topleft').addEventListener('mousedown', (event) => {
reSizeDown('topleft', event)
})
// ...
// 其他點各自綁定
reSizeDown 函數(shù)中仍然是對 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
}
}以上代碼,以左上角的縮放為例,拖動左上角縮放時,裁剪框的位置和寬高尺寸都會發(fā)生變化,所以需要計算這四個值(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 偏移和裁剪框?qū)挾燃纯伞?/p>
有了位置和寬高數(shù)據(jù)以后,實時改變裁剪框的樣式屬性和蒙層圖片的 clip-path 屬性,同步變化,裁剪框的事件處理就基本完成了。
六、完成裁剪功能
事件綁定后,裁剪框的基本功能就已經(jīng)完成了,剩下的,就是進行最后的圖片裁剪操作。
裁剪框進行移動或者縮放以后,我們需要獲取到當前裁剪框的數(shù)據(jù):位置和寬高數(shù)據(jù)。
根據(jù)位置和寬高,就可以使用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)
如上代碼,
位置信息之前計算的是相對位置,還原到原始圖片上,就需要通過縮放比例進行還原處理;裁剪框?qū)捀咭蛑耙堰M行還原,這里直接取值即可。
畫布 myCanvas 裁剪繪制成功后,就得到了所需要的圖像,可以直接將畫布展示在頁面上,也可以將畫布導出為圖像Base64數(shù)據(jù)或者Blob-Url后再加載。
myCanvas.toBlob((blob) => {
const url = URL.createObjectURL(blob)
}, 'image/jpeg')
// 或
myCanvas.toDataURL()
drawImage
drawImage 是canvas中一個的API,用來處理各種圖像操作的,它的語法有三種,我們?nèi)】梢宰霾眉舻模?/p>
context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
其中,
- 參數(shù) sx, sy, sWidth, sHeight,就可以理解為對原始圖片按該位置和寬高尺寸進行裁剪,就可以得到一張裁好的新圖;
- 參數(shù) dx, dy, dWidth, dHeight,就是將上面裁好的新圖,按照該位置和寬高,繪制到canvas畫布上,這個時候,就等到了裁剪后新圖片在canvas里的展示。
下圖就是示例里裁剪功能完整的界面展示效果:

后記
經(jīng)過以上步驟,一個基于前端技術(shù)的基礎(chǔ)的圖片裁剪功能就完成了。 圖片裁剪還可以有多種方法進行處理,示例使用的都是原始標簽和API,方便理解。 后續(xù)也可以進行各種組件化的封裝,不論vue、react、webcomponent等,都可以快速的引入進行封裝。
到此這篇關(guān)于基于JavaScript實現(xiàn)圖片裁剪功能的文章就介紹到這了,更多相關(guān)JavaScript圖片裁剪內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS之判斷是否為對象或數(shù)組的幾種方式總結(jié)
這篇文章主要介紹了JS之判斷是否為對象或數(shù)組的幾種方式總結(jié),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04

