前端纯js实现图片模糊和压缩功能全过程

npm install --save stackblur-canvas

// #region 数据
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 设置图片模糊
 */
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}>
        复原
      </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