import { compressWithMultipleTools } from '@simon_he/browser-compress-image' // 使用多种压缩工具并行处理，自动选择最优结果 const result = await compressWithMultipleTools(file, { quality: 0.8, tools: ['browser-image-compression', 'compressorjs', 'canvas'], }) console.log('最优压缩工具:', result.bestTool) console.log('压缩后文件:', result.compressedFile) console.log('所有结果:', result.results)

import { compressWithStats } from '@simon_he/browser-compress-image' // 获取详细的压缩统计信息，包括耗时和性能数据 const stats = await compressWithStats(file, { quality: 0.8 }) console.log('压缩统计:', { bestTool: stats.bestTool, // 最优工具: "canvas" originalSize: stats.originalSize, // 原始大小: 1024000 bytes compressedSize: stats.compressedSize, // 压缩后大小: 512000 bytes compressionRatio: stats.compressionRatio, // 压缩比例: 50% totalDuration: stats.totalDuration, // 总耗时: 1200ms toolsUsed: stats.toolsUsed, // 各工具详细性能数据 }) // 性能对比表格会在控制台自动显示 // ┌─────────┬──────────────────────┬───────────────┬──────────────┬─────────────┐ // │ (index) │ Tool │ Size (bytes) │ Reduction (%)│ Duration │ // ├─────────┼──────────────────────┼───────────────┼──────────────┼─────────────┤ // │ 0 │ 'canvas' │ 512000 │ '50.0%' │ '800ms' │ // │ 1 │ 'browser-compression'│ 520000 │ '49.2%' │ '1200ms' │ // └─────────┴──────────────────────┴───────────────┴──────────────┴─────────────┘

import { compress } from '@simon_he/browser-compress-image' // 压缩图片，默认返回 Blob const compressedBlob = await compress(file, 0.6) console.log('压缩完成！', compressedBlob) // 保留 EXIF 信息的压缩 const compressedWithExif = await compress(file, { quality: 0.8, preserveExif: true, })

import { compress } from '@simon_he/browser-compress-image' // 默认行为：自动选择最优结果 const compressedBlob = await compress(file, { quality: 0.8, preserveExif: true, }) // 获取所有工具的压缩结果进行比较 const allResults = await compress(file, { quality: 0.8, returnAllResults: true, // 返回所有工具的结果 type: 'blob', }) console.log('最优工具:', allResults.bestTool) console.log('最优结果:', allResults.bestResult) console.log('所有结果:') allResults.allResults.forEach((result) => { console.log( `${result.tool}: ${result.compressedSize} bytes (${result.compressionRatio.toFixed(1)}% reduction)`, ) })

// 批量压缩多个文件 const files = Array.from(fileInput.files) const compressedFiles = await Promise.all( files.map((file) => compress(file, 0.7, 'file')), )

// 监听粘贴事件 document.addEventListener('paste', async (e) => { const items = Array.from(e.clipboardData?.items || []) const imageItems = items.filter((item) => item.type.startsWith('image/')) for (const item of imageItems) { const file = item.getAsFile() if (file) { const compressed = await compress(file, 0.6) // 处理压缩后的图片 } } })

const handleUpload = async (file: File) => { // 压缩为 File 对象，保留原文件名 const compressedFile = await compress(file, 0.7, 'file') const formData = new FormData() formData.append('image', compressedFile) await fetch('/api/upload', { method: 'POST', body: formData, }) }

const showPreview = async (file: File) => { // 压缩为 Base64，直接显示 const base64 = await compress(file, 0.6, 'base64') const img = document.createElement('img') img.src = base64 document.body.appendChild(img) }

const processImageData = async (file: File) => { // 压缩为 ArrayBuffer，进行二进制处理 const buffer = await compress(file, 0.8, 'arrayBuffer') // 发送到 WebSocket 或进行其他二进制操作 websocket.send(buffer) }

compress<T extends CompressResultType = 'blob'>( file: File, // 要压缩的图片文件 quality?: number, // 压缩质量 (0-1)，默认 0.6 type?: T // 输出格式，默认 'blob' ): Promise<CompressResult<T>>

compressWithStats( file: File, // 要压缩的图片文件 options?: CompressOptions // 压缩选项（可选） ): Promise<CompressionStats>

interface CompressionStats { bestTool: string // 最优压缩工具名称 compressedFile: Blob // 最优压缩结果 originalSize: number // 原始文件大小（字节） compressedSize: number // 压缩后大小（字节） compressionRatio: number // 压缩比例（百分比） totalDuration: number // 总耗时（毫秒） toolsUsed: Array<{ // 各工具详细信息 tool: string // 工具名称 size: number // 压缩后大小 duration: number // 耗时 compressionRatio: number // 压缩比例 success: boolean // 是否成功 error?: string // 错误信息（如果失败） }> }

// EXIF 信息会被保留，只使用 browser-image-compression 和 CompressorJS const result = await compress(file, { quality: 0.8, preserveExif: true, // 自动过滤不支持 EXIF 的工具 }) // 注意：GIF 格式不支持 EXIF，会抛出错误 try { const gifResult = await compress(gifFile, { preserveExif: true, // ❌ 会抛出错误 }) } catch (error) { console.error('GIF files do not support EXIF preservation') }

interface MultipleCompressResults<T> { bestResult: CompressResult<T> // 最优结果（文件大小最小） bestTool: string // 最优工具名称 allResults: CompressResultItem<T>[] // 所有工具的结果 totalDuration: number // 总耗时（毫秒） } interface CompressResultItem<T> { tool: string // 工具名称 result: CompressResult<T> // 压缩结果 originalSize: number // 原始大小 compressedSize: number // 压缩后大小 compressionRatio: number // 压缩比例（百分比） duration: number // 耗时（毫秒） success: boolean // 是否成功 error?: string // 错误信息（如果失败） } // 使用示例 const results = await compress(file, { quality: 0.8, returnAllResults: true, type: 'blob', }) // 分析所有工具的性能 results.allResults.forEach((item) => { console.log( `${item.tool}: ${item.compressedSize} bytes, ${item.compressionRatio.toFixed(1)}% reduction, ${item.duration}ms`, ) }) // 使用最优结果 const optimizedFile = results.bestResult

import type { CompressResultType, CompressResult, } from '@simon_he/browser-compress-image' // 类型会根据第三个参数自动推断 const blob = await compress(file, 0.6, 'blob') // 类型: Blob const file2 = await compress(file, 0.6, 'file') // 类型: File const base64 = await compress(file, 0.6, 'base64') // 类型: string const buffer = await compress(file, 0.6, 'arrayBuffer') // 类型: ArrayBuffer