A utility library for parsing and extracting images from PSD, TIFF, and common image formats.
npm install qiuqiu1-image-parser-utils这个工具库用于解析和提取各种格式文件的封面图。
```
utils/
├── common.ts # 公共方法和统一入口
├── parsePSD.ts # PSD 文件解析器
├── parseTIFF.ts # TIFF 文件解析器
├── parseImage.ts # 常规图片解析器 (PNG, JPEG, WEBP, GIF, BMP)
├── index.ts # 统一导出入口
└── README.md # 说明文档
- PSD - 提取合成图像
- TIFF - 提取第一帧
- PNG - 原始图片
- JPEG - 原始图片
- WEBP - 原始图片
- GIF - 原始图片
- BMP - 原始图片
通过读取文件头部的魔数(Magic Number)来识别文件的真实格式,不依赖文件扩展名。
`typescript
import { detectFileType } from '@/utils'
const fileType = await detectFileType(file)
// 返回: 'PNG', 'PSD', 'TIFF' 等
`
解析单个文件并返回完整的图片信息。
`typescript
import { parseFile } from 'qiuqiu1-image-parser-utils'
// 默认情况下不返回 File 对象,也不使用哈希命名
const resultDefault = await parseFile(file)
console.log(文件名: ${resultDefault.fileName}, 原始名: ${resultDefault.originalFileName})
// 传入 { returnFile: true } 以获取 File 对象,但不使用哈希命名
const resultWithFile = await parseFile(file, { returnFile: true })
console.log(文件名: ${resultWithFile.fileName}, 原始名: ${resultWithFile.originalFileName}, File 对象: ${resultWithFile.parsedFile?.name})
// 传入 { returnFile: true, useHashName: true } 以获取 File 对象并使用哈希命名 (默认 png 格式)
const resultWithHashedFile = await parseFile(file, { returnFile: true, useHashName: true })
console.log(文件名: ${resultWithHashedFile.fileName}, 原始名: ${resultWithHashedFile.originalFileName}, 哈希名: ${resultWithHashedFile.hashedFileName}, File 对象: ${resultWithHashedFile.parsedFile?.name})
// 传入 { returnFile: true, useHashName: true, hashFileType: 'jpeg' } 以获取 File 对象并使用哈希命名 (指定 jpeg 格式)
const resultWithHashedJpegFile = await parseFile(file, { returnFile: true, useHashName: true, hashFileType: 'jpeg' })
console.log(文件名: ${resultWithHashedJpegFile.fileName}, 原始名: ${resultWithHashedJpegFile.originalFileName}, 哈希名: ${resultWithHashedJpegFile.hashedFileName}, File 对象: ${resultWithHashedJpegFile.parsedFile?.name})
// result 包含:
// - file: 原始 File 对象 (始终存在)
// - originalFileName: 原始文件名 (始终存在)
// - fileName: 当前文件名 (可能是原始名或哈希名)
// - fileType: 文件类型
// - fileSize: 文件大小
// - width: 图片宽度
// - height: 图片高度
// - dataUrl: Base64 图片数据
// - parsedFile?: File // 转化后的 File 对象 (如果 returnFile 为 true)
// - hashedFileName?: string // 哈希后的文件名 (如果 useHashName 为 true)
`
批量解析多个文件,支持进度回调和实时回调。
`typescript
import { parseFiles } from 'qiuqiu1-image-parser-utils'
// 传入 { returnFile: true, useHashName: true, hashFileType: 'jpeg' } 以获取 File 对象并使用哈希命名,指定输出为 jpeg
const { results, failedCount } = await parseFiles(
files,
// 进度回调
(current, total) => {
console.log(进度: ${current}/${total})第 ${current}/${total} 张解析完成:
},
// 实时回调:每解析完一张立即返回
(result, current, total) => {
console.log(, result.fileName)原始文件名: ${result.originalFileName}
console.log()哈希文件名: ${result.hashedFileName}
if (result.hashedFileName) {
console.log()已生成 File 对象:
}
if (result.parsedFile) {
console.log(, result.parsedFile.name, result.parsedFile.size)`
}
// 可以立即添加到界面显示
displayImage(result)
},
{ returnFile: true, useHashName: true, hashFileType: 'jpeg' } // 传入配置
)
每种格式都有独立的解析器,可以单独使用:
`typescript
import { parsePSD, parseTIFF, parseImage } from 'qiuqiu1-image-parser-utils'
// 解析 PSD
const psdDataUrl = await parsePSD(psdFile)
// 解析 TIFF
const tiffDataUrl = await parseTIFF(tiffFile)
// 解析常规图片
const imageDataUrl = await parseImage(imageFile)
`
#### 方式1:实时显示(推荐)
每解析完一张图片立即显示,用户体验更好:
`vue`
#### 方式2:批量显示
所有图片解析完成后一起显示:
`vue`
#### 添加报错异常返回
1. 魔数检测: 通过文件头部特征识别真实格式,不受文件名影响
2. 原始尺寸: 保持图片原始尺寸和清晰度
3. 高质量输出: 使用最高质量(1.0)导出 PNG 格式
4. 模块化设计: 每个解析器独立,内部管理 Canvas
5. 类型安全: 完整的 TypeScript 类型定义
6. 错误处理: 完善的错误捕获和提示
7. 内存优化: 内部 Canvas 及时释放,Blob URL 显式回收
本库的运行时依赖项包括 ag-psd 和 utif2。这些依赖项会在您安装 qiuqiu1-image-parser-utils 包时自动安装到您的项目中。
- ag-psd (用于 PSD 解析)utif2
- (用于 tiff 解析)
-