39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import { useState } from 'react'
|
|
import imageCompression from 'browser-image-compression'
|
|
|
|
export default function useImageCompression() {
|
|
const [compressedImage, setCompressedImage] = useState<File | null>(null)
|
|
const [isCompressing, setIsCompressing] = useState(false)
|
|
const [progress, setProgress] = useState(0)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const compressImage = async (file: File, format: string) => {
|
|
setIsCompressing(true)
|
|
setProgress(0)
|
|
setError(null)
|
|
|
|
try {
|
|
const options = {
|
|
maxSizeMB: 1,
|
|
maxWidthOrHeight: 1920,
|
|
useWebWorker: true,
|
|
fileType: `image/${format}`,
|
|
onProgress: (progress: number) => {
|
|
setProgress(Math.round(progress))
|
|
},
|
|
}
|
|
|
|
const compressedFile = await imageCompression(file, options)
|
|
setCompressedImage(compressedFile)
|
|
} catch (err) {
|
|
setError('压缩过程中出错，请重试。')
|
|
console.error(err)
|
|
} finally {
|
|
setIsCompressing(false)
|
|
}
|
|
}
|
|
|
|
return { compressImage, compressedImage, isCompressing, progress, error }
|
|
}
|
|
|