compressImageToWidthJpgOrWebp

将图片缩放到指定宽度（保持宽高比），输出为 JPEG 或 WebP。

前置依赖

参数名	类型	说明
deps.Image	Window['Image']	Image 构造函数
deps.File	Window['File']	File 构造函数
deps.createObjectURL	(blob: File) => string	创建对象 URL
deps.createElement	Document['createElement']	创建 canvas 元素
deps.createImageBitmap	可选	WebP 保留透明时建议传入

函数签名

function compressImageToWidthJpgOrWebp(
  file: File,
  targetWidth: number,
  options?: {
    quality?: number
    outputFormat?: 'jpeg' | 'webp'  // 默认 'jpeg'
  },
  deps: CompressImageToWidthJpgOrWebpDeps
): Promise<File>

参数

参数名	类型	必填	默认值	说明
file	File	是	-	输入（Canvas/Image 可解码的任意图片）
targetWidth	number	是	-	目标宽度（像素）
options.quality	number	否	0.9	质量 0–1
options.outputFormat	'jpeg' | 'webp'	否	'jpeg'	输出格式
deps	CompressImageToWidthJpgOrWebpDeps	是	-	依赖注入

工作原理

1. 读取原图尺寸，按宽高比计算目标高度
2. 若尺寸与格式均已满足，直接返回原文件
3. Canvas 绘制到 targetWidth × targetHeight 后导出 JPEG 或 WebP

使用注意

• 不支持 PNG 输出；需要透明请用 outputFormat: 'webp' 并传入 createImageBitmap。
• 宽小于目标宽度时会放大图片。