compressImageToWidth

将图片压缩到指定宽度，自动保持宽高比。

前置依赖

依赖参数

参数名	类型	说明
deps.Image	Window['Image']	Image 构造函数
deps.File	Window['File']	File 构造函数
deps.createObjectURL	(blob: File) => string	创建对象 URL
deps.createElement	Document['createElement']	创建 canvas 元素

环境要求

• 浏览器环境: 使用 Canvas API、Image API 和 URL API

函数签名

function compressImageToWidth(
  file: File,
  targetWidth: number,
  options?: CompressOptions,
  deps: CompressImageToWidthDeps
): Promise<File>

interface CompressOptions {
  quality?: number      // 图片质量（0-1），默认 0.9
  mimeType?: string    // 输出格式，默认 'image/jpeg'
}

interface CompressImageToWidthDeps {
  Image: Window['Image']
  File: Window['File']
  createObjectURL: (blob: File) => string
  createElement: Document['createElement']
}

参数

参数名	类型	必填	默认值	说明
file	File	是	-	要压缩的图片文件
targetWidth	number	是	-	目标宽度（像素）
options.quality	number	否	0.9	图片质量（0-1）
options.mimeType	string	否	'image/jpeg'	输出图片格式，支持 'image/jpeg'、'image/png'、'image/webp' 等
deps	CompressImageToWidthDeps	是	-	依赖注入对象

返回值

类型	说明
Promise<File>	Promise，解析为压缩后的图片 File 对象

工作原理

1. 使用 getImageDimensions 获取原始图片的宽度和高度
2. 根据目标宽度和原始宽高比计算目标高度：targetHeight = (targetWidth / originalWidth) * originalHeight
3. 如果目标尺寸和原图尺寸相同，直接返回原图
4. 创建 Image 对象加载原始图片
5. 创建 Canvas 元素，设置尺寸为 targetWidth × targetHeight
6. 使用 Canvas 2D 上下文绘制调整后的图片
7. 使用 canvas.toBlob() 将 Canvas 转换为 Blob，应用指定的质量和格式（默认质量 0.9，格式 image/jpeg）
8. 将 Blob 转换为 File 对象并返回

函数会自动保持图片的宽高比，根据目标宽度按比例计算高度。如果原图宽度小于目标宽度，图片会被放大；如果大于目标宽度，图片会被缩小。