70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
 
|
export type CompressionResult = {
|
||
|
|
blob: Blob;
|
||
|
|
originalSize: number;
|
||
|
|
compressedSize: number;
|
||
|
|
width: number;
|
||
|
|
height: number;
|
||
|
|
};
|
||
|
|
|
||
|
|
const COMPRESSIBLE_TYPES = ['image/jpeg', 'image/png'];
|
||
|
|
const COMPRESSION_SKIP_THRESHOLD = 200 * 1024; // 200 KB
|
||
|
|
|
||
|
|
/** Returns true if this file type can be compressed AND the file is large enough to bother. */
|
||
|
|
export function isCompressible(file: File): boolean {
|
||
|
|
return COMPRESSIBLE_TYPES.includes(file.type) && file.size >= COMPRESSION_SKIP_THRESHOLD;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Compress an image file via canvas.toBlob.
|
||
|
|
* Returns null if the file type is not compressible (GIF, SVG, WebP, video, audio, etc.).
|
||
|
|
*/
|
||
|
|
export async function compressImage(file: File, quality = 0.82): Promise<CompressionResult | null> {
|
||
|
|
if (!COMPRESSIBLE_TYPES.includes(file.type)) return null;
|
||
|
|
|
||
|
|
const img = await loadImage(file);
|
||
|
|
const canvas = document.createElement('canvas');
|
||
|
|
canvas.width = img.naturalWidth;
|
||
|
|
canvas.height = img.naturalHeight;
|
||
|
|
const ctx = canvas.getContext('2d')!;
|
||
|
|
ctx.drawImage(img, 0, 0);
|
||
|
|
|
||
|
|
return new Promise((resolve) => {
|
||
|
|
canvas.toBlob(
|
||
|
|
(blob) => {
|
||
|
|
if (!blob) {
|
||
|
|
resolve(null);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
resolve({
|
||
|
|
blob,
|
||
|
|
originalSize: file.size,
|
||
|
|
compressedSize: blob.size,
|
||
|
|
width: img.naturalWidth,
|
||
|
|
height: img.naturalHeight,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
'image/jpeg',
|
||
|
|
quality,
|
||
|
|
);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function loadImage(file: File): Promise<HTMLImageElement> {
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
const url = URL.createObjectURL(file);
|
||
|
|
const img = new Image();
|
||
|
|
img.onload = () => {
|
||
|
|
URL.revokeObjectURL(url);
|
||
|
|
resolve(img);
|
||
|
|
};
|
||
|
|
img.onerror = reject;
|
||
|
|
img.src = url;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
export function formatFileSize(bytes: number): string {
|
||
|
|
if (bytes < 1024) return `${bytes} B`;
|
||
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||
|
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||
|
|
}
|