快捷導(dǎo)航

前端純js實(shí)現(xiàn)圖片模糊和壓縮功能全過(guò)程

更新時(shí)間：2025年12月31日 09:14:25 作者：鵬多多

在現(xiàn)代 Web 項(xiàng)目開發(fā)的過(guò)程中,圖片處理是一個(gè)常見且重要的需求,其中,圖片模糊效果的實(shí)現(xiàn)往往能為界面增添獨(dú)特的視覺風(fēng)格,近期筆者在項(xiàng)目中遇到了這樣的需求,本文將詳細(xì)闡述整個(gè)實(shí)現(xiàn)過(guò)程,需要的朋友可以參考下

1. 前言

在現(xiàn)代 Web 項(xiàng)目開發(fā)的過(guò)程中，圖片處理是一個(gè)常見且重要的需求。其中，圖片模糊效果的實(shí)現(xiàn)往往能為界面增添獨(dú)特的視覺風(fēng)格。近期筆者在項(xiàng)目中遇到了這樣的需求，經(jīng)過(guò)多方面的技術(shù)調(diào)研與方案對(duì)比，最終采用StackBlur庫(kù)成功實(shí)現(xiàn)了純前端圖片模糊與壓縮功能。本文將詳細(xì)闡述整個(gè)實(shí)現(xiàn)過(guò)程，希望能為同樣有此類需求的開發(fā)者提供有益的參考與借鑒。

2. 安裝依賴和引入插件

對(duì)于基于npm管理的項(xiàng)目，執(zhí)行以下命令即可完成安裝：

npm install --save stackblur-canvas

安裝完成后，在代碼中引入該庫(kù)，以便后續(xù)使用其功能：

3. 使用

為了更直觀地展示StackBlur庫(kù)實(shí)現(xiàn)圖片模糊與壓縮的過(guò)程，下面通過(guò)一個(gè)具體的 React 示例進(jìn)行說(shuō)明。在這個(gè)示例中，界面包含一個(gè)復(fù)原按鈕和一個(gè)模糊按鈕，點(diǎn)擊模糊按鈕將觸發(fā)圖片模糊化與壓縮操作，點(diǎn)擊復(fù)原按鈕則能使圖片恢復(fù)至原始狀態(tài)。

// #region 數(shù)據(jù)
const imageUrl = 'https://xxxxx.jpeg'
const [displayImage, setDisplayImage] = useState(imageUrl)
// #endregion

// #region ------------------------------------------------------邏輯
/**
 * @description 獲取模糊圖片
 * @param {string} originalImage 原圖片
 * @param {number} scale 縮放
 */
const handleGetBlurImage = ({ originalImage, scale = 0.5 }: { originalImage: string; scale?: number }): Promise<string> => {
  return new Promise((resolve, reject) => {
    try {
      const image = new Image()
      image.crossOrigin = 'anonymous'
      image.src = originalImage
      image.onload = function () {
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')!
        const finalW = image.width * scale
        const finalH = image.height * scale
        canvas.width = finalW
        canvas.height = finalH
        ctx.drawImage(image, 0, 0, finalW, finalH)
        // 使用 StackBlur 讓圖片變模糊
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
        StackBlur.imageDataRGB(imageData, 0, 0, canvas.width, canvas.height, 50)
        ctx.putImageData(imageData, 0, 0)
        const finalSrc = canvas.toDataURL('image/jpeg')
        resolve(finalSrc)
      }
      image.onerror = function () {
        throw new Error()
      }
    } catch (_) {
      return reject(originalImage)
    }
  })
}

/**
 * @description 還原圖片
 */
const handleResetImage = async () => {
  setDisplayImage(networkImage)
}

/**
 * @description 設(shè)置圖片模糊
 */
const handleSetImageBlur = async () => {
  const res = await handleGetBlurImage({
    originalImage: networkImage
  })
  setDisplayImage(res)
}
// #endregion

// #region 視圖
return (
  <div className={moduleStyle['test-wrapper']}>
    <div className={moduleStyle['operate-wrapper']}>
      <div className={moduleStyle['reset-button']} onClick={handleResetImage}>
        復(fù)原
      </div>
      <div className={moduleStyle['blur-button']} onClick={handleSetImageBlur}>
        模糊
      </div>
    </div>
    <div className={moduleStyle['image-wrapper']}>
      <img src={displayImage} alt="image" crossOrigin="anonymous" />
    </div>
  </div>
)
// #endregion

上述tsx代碼定義了界面的布局結(jié)構(gòu)，包含操作按鈕區(qū)域和圖片展示區(qū)域，通過(guò)為按鈕綁定相應(yīng)的點(diǎn)擊事件處理函數(shù)，實(shí)現(xiàn)交互功能。

4. 總結(jié)

通過(guò)上述實(shí)踐，我們成功實(shí)現(xiàn)了純前端圖片模糊與壓縮功能。其核心原理是利用canvas強(qiáng)大的繪圖能力，先將圖片縮放到指定大小，再借助StackBlur庫(kù)對(duì)圖片數(shù)據(jù)進(jìn)行模糊處理，最后將處理后的內(nèi)容重新繪制到canvas上，并轉(zhuǎn)換為base64格式的圖片 URL。這種方式無(wú)需依賴后端服務(wù)，在前端即可快速高效地完成圖片處理，為項(xiàng)目開發(fā)提供了靈活的解決方案。同時(shí)，開發(fā)者可以根據(jù)實(shí)際需求，調(diào)整縮放比例、模糊半徑等參數(shù)，以達(dá)到理想的圖片處理效果。

以上就是前端純js實(shí)現(xiàn)圖片模糊和壓縮功能全過(guò)程的詳細(xì)內(nèi)容，更多關(guān)于純js實(shí)現(xiàn)圖片模糊和壓縮的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: