feat(upload): 封面上传支持横版与前端压缩
- 新增 imageCompress 与 imagePresets,上传前按规格高质量等比压缩 - 短剧封面拆分为竖版/横版两个上传位,带建议尺寸提示 - 轮播图、创作者中心封面与分集封面接入压缩与提示
This commit is contained in:
1 parent
dea414739e
commit
923b7dce1e
9 files changed
+486
-87
No files matched your search
@@ -0,0 +1,55 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import { compressImage } from '@/utils/imageCompress'
|
||||
|
||||
/**
|
||||
* 图片上传规格:建议尺寸来自客户端实际展示位,按 3 倍屏预留像素。
|
||||
*
|
||||
* - 竖版封面 3:4:首页三列 ~118dp、推荐分类两列 ~175dp、追剧收藏 ~118dp,
|
||||
* 同时作为播放器起播首帧铺满竖屏,1080×1440 是兼顾清晰度与体积的平衡点。
|
||||
* - 横版封面 16:9:追剧页「继续观看」横幅(约 2.06:1)与后续横向位共用。
|
||||
* - 推荐轮播:客户端轮播高度固定 420dp、按屏宽铺满(约 1:1.08)。
|
||||
*/
|
||||
export interface ImagePreset {
|
||||
label: string
|
||||
/** 建议尺寸文案,展示在上传按钮旁。 */
|
||||
hint: string
|
||||
maxWidth: number
|
||||
maxHeight: number
|
||||
}
|
||||
|
||||
export const DRAMA_COVER_PORTRAIT: ImagePreset = {
|
||||
label: '竖版封面',
|
||||
hint: '建议 1080×1440(3:4),最小 720×960',
|
||||
maxWidth: 1080,
|
||||
maxHeight: 1440
|
||||
}
|
||||
|
||||
export const DRAMA_COVER_LANDSCAPE: ImagePreset = {
|
||||
label: '横版封面',
|
||||
hint: '建议 1280×720(16:9),用于继续观看横幅等横向位',
|
||||
maxWidth: 1280,
|
||||
maxHeight: 720
|
||||
}
|
||||
|
||||
export const EPISODE_COVER: ImagePreset = {
|
||||
label: '分集封面',
|
||||
hint: '建议 720×960(3:4)',
|
||||
maxWidth: 720,
|
||||
maxHeight: 960
|
||||
}
|
||||
|
||||
export const BANNER_IMAGE: ImagePreset = {
|
||||
label: '推荐轮播图',
|
||||
hint: '建议 1080×1164(约 1:1.08,与客户端 420dp 轮播高度一致)',
|
||||
maxWidth: 1080,
|
||||
maxHeight: 1164
|
||||
}
|
||||
|
||||
/** 按规格压缩:尺寸未超且体积不大时原样返回,不做二次编码。 */
|
||||
export function compressForPreset(file: File, preset: ImagePreset): Promise<File> {
|
||||
return compressImage(file, {
|
||||
maxWidth: preset.maxWidth,
|
||||
maxHeight: preset.maxHeight
|
||||
})
|
||||
}
|
||||
Reference in new issue
Block a user