From 98545d74d17b73d3264be037733049562e9a0eae Mon Sep 17 00:00:00 2001 From: kdletters Date: Fri, 19 Jun 2026 17:36:20 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=94=BB=E5=B8=83=E5=BA=95?= =?UTF-8?q?=E9=83=A8=E4=B8=8A=E4=BC=A0=E5=85=A5=E7=94=BB=E5=B8=83=E5=B0=BA?= =?UTF-8?q?=E5=AF=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 底部工具栏上传图片后直接创建画布图层 上传图片在创建素材和图层前读取原始分辨率 补充上传尺寸解析与素材库集成回归测试 同步图片画布上传语义文档和共享决策记录 --- .../shared-memory/decision-log.md | 8 + ...架构】图片画布编辑器MVP接入方案-2026-06-11.md | 2 +- ...mageCanvasEditorAssetsIntegration.test.tsx | 66 ++++ .../image-editor/ImageCanvasEditorView.tsx | 2 +- .../image-editor/ImageCanvasFileModel.test.ts | 142 +++++++++ .../image-editor/ImageCanvasFileModel.ts | 290 ++++++++++++++++++ .../ImageCanvasUploadModel.test.ts | 39 ++- .../image-editor/ImageCanvasUploadModel.ts | 37 ++- .../useImageCanvasUploadWorkflow.test.tsx | 81 ++++- .../useImageCanvasUploadWorkflow.ts | 26 +- 10 files changed, 674 insertions(+), 19 deletions(-) create mode 100644 src/components/image-editor/ImageCanvasFileModel.test.ts diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md index 0ecea972b..1dd0d737f 100644 --- a/docs/project-memory/shared-memory/decision-log.md +++ b/docs/project-memory/shared-memory/decision-log.md @@ -2499,6 +2499,14 @@ - 验证方式：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx -t "hydrates canvas images from Resolution instead of saved Size|opens generated image info from the corner button and creates a real right-side edit result|shows image resolution on hover"`。 - 关联文档：`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。 +## 2026-06-19 图片画布上传入口按来源区分入画布语义 + +- 背景：底部工具栏上传入口选择文件后只进入素材库，未创建画布图层；同时上传图层和素材记录先使用固定兜底尺寸，浏览器异步读到图片原始尺寸前已经把错误尺寸持久化。 +- 决策：底部工具栏上传是“上传到画布”入口，选中文件后写入默认素材文件夹并立即在当前画布视口中心创建图层；素材栏文件夹内上传仍只写入目标素材文件夹。上传图片必须在创建占位素材、画布图层和账号级素材记录前解析原图 Resolution，PNG/JPEG/WebP/GIF/BMP 先读文件头，无法解析时才回退浏览器解码或上传兜底尺寸。 +- 影响范围：`src/components/image-editor/ImageCanvasEditorView.tsx`、`src/components/image-editor/useImageCanvasUploadWorkflow.ts`、`src/components/image-editor/ImageCanvasFileModel.ts`、`src/components/image-editor/ImageCanvasUploadModel.ts` 和图片画布技术方案。 +- 验证方式：`npm run test -- src/components/image-editor/ImageCanvasFileModel.test.ts src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx`、`npm run test -- src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx -t "bottom toolbar uploads|multiple files as account-level assets"`、`npm run typecheck`。 +- 关联文档：`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。 + ## 2026-06-17 图片画布底部生成视频接入 Lovart 面板 - 背景：编辑器画板底部工具栏需要新增 `生成视频`，并和现有 Lovart 式生成类面板、泥点展示、占位图和画布结果图层保持一致。 diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md index e95582712..113f83db9 100644 --- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md +++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md @@ -101,7 +101,7 @@ - 快速编辑 / 重绘站内 public 示例图、历史 generated 图或 OSS generated 图时，前端先读取成 `data:image/*;base64,...` 再提交，后端不得再收到 `/creation-type-references/*`、`/generated-*` 或 OSS URL 作为 `referenceImageSrcs/sourceImageSrc`。 - 快速编辑的额外参考图同样必须在前端读取成图片 Data URL 后提交；后端 `referenceImageSrcs` 上限为 9 张，承载 8 张额外参考图加 1 张原图。 - 素材文件夹可以新建、折叠、重命名和删除；删除普通文件夹后，其素材移动到“项目素材”。 -- 上传按钮和拖拽上传都支持多文件；拖到文件夹或该文件夹内素材时进入目标文件夹；拖到画布时进入默认文件夹并在投放点创建画布图层。 +- 上传按钮和拖拽上传都支持多文件；底部工具栏的上传入口选择文件后直接进入默认素材文件夹并在当前画布视口中心创建画布图层，素材栏文件夹内的上传入口只写入对应素材文件夹、不自动入画布；拖到文件夹或该文件夹内素材时进入目标文件夹；拖到画布时进入默认文件夹并在投放点创建画布图层。上传图片必须在创建占位素材、画布图层和账号级素材记录前先读取原图 Resolution，图层宽高、`originalWidth/originalHeight` 和素材库 `width/height` 都使用图片本身尺寸；仅在无法解析尺寸时才使用上传兜底尺寸。 - 素材面板支持选择模式框选，一次选中多个素材，并可批量移动或删除上传素材。 - 图层面板支持选择多个图层后创建图层组，组名和 groupId 随画布布局保存。 - 小地图支持拖拽视口框，拖动时画布 viewport 跟随移动。 diff --git a/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx index 119e992bd..af77f2b38 100644 --- a/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx +++ b/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx @@ -69,6 +69,45 @@ vi.mock('../../services/image-editor/editorMediaAssetUploadClient', () => ({ uploadEditorMediaAssetFile: uploadEditorMediaAssetFileMock, })); +function createSizedPngFile(name: string, width: number, height: number) { + const bytes = new Uint8Array([ + 0x89, + 0x50, + 0x4e, + 0x47, + 0x0d, + 0x0a, + 0x1a, + 0x0a, + 0, + 0, + 0, + 13, + 0x49, + 0x48, + 0x44, + 0x52, + (width >> 24) & 0xff, + (width >> 16) & 0xff, + (width >> 8) & 0xff, + width & 0xff, + (height >> 24) & 0xff, + (height >> 16) & 0xff, + (height >> 8) & 0xff, + height & 0xff, + 8, + 6, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + ]); + return new File([bytes], name, { type: 'image/png' }); +} + describe('ImageCanvasEditorView asset library integration', () => { setupImageCanvasEditorViewTestLifecycle({ generateEditorImageMock, @@ -380,6 +419,33 @@ describe('ImageCanvasEditorView asset library integration', () => { expect(screen.queryByAltText('画布图片：第二张.png')).toBeNull(); }); + it('adds bottom toolbar uploads to the canvas using the image resolution', async () => { + const user = userEvent.setup(); + render(); + + await user.click(screen.getByRole('button', { name: '上传工具' })); + await userEvent.upload( + screen.getByLabelText('上传媒体文件'), + createSizedPngFile('底栏上传.png', 1536, 1024), + ); + + expect(await screen.findByAltText('画布图片：底栏上传.png')).toBeTruthy(); + await waitFor(() => { + expect(createEditorAssetMock).toHaveBeenCalledWith( + expect.objectContaining({ + label: '底栏上传.png', + width: 1536, + height: 1024, + }), + ); + }); + const layerButton = screen.getByRole('button', { + name: '选择底栏上传.png', + }); + expect(layerButton.getAttribute('style')).toContain('width: 1536px'); + expect(layerButton.getAttribute('style')).toContain('height: 1024px'); + }); + it('uploads MP3 and MP4 files through OSS before adding them to the asset library', async () => { const createdMediaElements: HTMLMediaElement[] = []; const originalCreateElement = document.createElement.bind(document); diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx index b48ab6846..f3acda463 100644 --- a/src/components/image-editor/ImageCanvasEditorView.tsx +++ b/src/components/image-editor/ImageCanvasEditorView.tsx @@ -920,7 +920,7 @@ export function ImageCanvasEditorView() { const switchTool = (tool: CanvasTool) => { clearActiveInteraction(); if (tool === 'upload') { - requestUpload('asset'); + requestUpload('asset', { addToCanvas: true }); return; } if (switchGenerationTool(tool)) { diff --git a/src/components/image-editor/ImageCanvasFileModel.test.ts b/src/components/image-editor/ImageCanvasFileModel.test.ts new file mode 100644 index 000000000..af6a8397e --- /dev/null +++ b/src/components/image-editor/ImageCanvasFileModel.test.ts @@ -0,0 +1,142 @@ +import { describe, expect, it } from 'vitest'; + +import { probeImageFileDimensions } from './ImageCanvasFileModel'; + +function makeFile(bytes: number[], name: string, type: string) { + return new File([new Uint8Array(bytes)], name, { type }); +} + +function uint16be(value: number) { + return [(value >> 8) & 0xff, value & 0xff]; +} + +function uint32be(value: number) { + return [ + (value >> 24) & 0xff, + (value >> 16) & 0xff, + (value >> 8) & 0xff, + value & 0xff, + ]; +} + +function uint16le(value: number) { + return [value & 0xff, (value >> 8) & 0xff]; +} + +function uint24le(value: number) { + return [value & 0xff, (value >> 8) & 0xff, (value >> 16) & 0xff]; +} + +function uint32le(value: number) { + return [ + value & 0xff, + (value >> 8) & 0xff, + (value >> 16) & 0xff, + (value >> 24) & 0xff, + ]; +} + +describe('ImageCanvasFileModel', () => { + it('probes common upload image dimensions from file headers', async () => { + const png = makeFile( + [ + 0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, + ...uint32be(13), + 0x49, 0x48, 0x44, 0x52, + ...uint32be(1536), + ...uint32be(1024), + 8, + 6, + 0, + 0, + 0, + ], + '画布.png', + 'image/png', + ); + const jpeg = makeFile( + [ + 0xff, 0xd8, + 0xff, 0xe0, + ...uint16be(16), + 0x4a, 0x46, 0x49, 0x46, + 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, + 0xff, 0xc0, + ...uint16be(17), + 8, + ...uint16be(720), + ...uint16be(1280), + 3, + 0, 0, 0, 0, 0, 0, 0, 0, 0, + ], + '画布.jpg', + 'image/jpeg', + ); + const gif = makeFile( + [ + 0x47, 0x49, 0x46, 0x38, 0x39, 0x61, + ...uint16le(640), + ...uint16le(480), + 0, + 0, + 0, + ], + '画布.gif', + 'image/gif', + ); + const webp = makeFile( + [ + 0x52, 0x49, 0x46, 0x46, + ...uint32le(22), + 0x57, 0x45, 0x42, 0x50, + 0x56, 0x50, 0x38, 0x58, + ...uint32le(10), + 0, + 0, + 0, + 0, + ...uint24le(799), + ...uint24le(599), + ], + '画布.webp', + 'image/webp', + ); + const bmp = makeFile( + [ + 0x42, 0x4d, + ...uint32le(54), + 0, + 0, + 0, + 0, + ...uint32le(54), + ...uint32le(40), + ...uint32le(300), + ...uint32le(200), + ], + '画布.bmp', + 'image/bmp', + ); + + await expect(probeImageFileDimensions(png)).resolves.toEqual({ + width: 1536, + height: 1024, + }); + await expect(probeImageFileDimensions(jpeg)).resolves.toEqual({ + width: 1280, + height: 720, + }); + await expect(probeImageFileDimensions(gif)).resolves.toEqual({ + width: 640, + height: 480, + }); + await expect(probeImageFileDimensions(webp)).resolves.toEqual({ + width: 800, + height: 600, + }); + await expect(probeImageFileDimensions(bmp)).resolves.toEqual({ + width: 300, + height: 200, + }); + }); +}); diff --git a/src/components/image-editor/ImageCanvasFileModel.ts b/src/components/image-editor/ImageCanvasFileModel.ts index f622a66c2..d3264466a 100644 --- a/src/components/image-editor/ImageCanvasFileModel.ts +++ b/src/components/image-editor/ImageCanvasFileModel.ts @@ -132,6 +132,296 @@ export function readImageFileAsDataUrl(file: File) { return readFileAsDataUrl(file); } +function readBlobAsArrayBuffer(blob: Blob) { + if (typeof blob.arrayBuffer === 'function') { + return blob.arrayBuffer(); + } + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = () => { + if (reader.result instanceof ArrayBuffer) { + resolve(reader.result); + return; + } + reject(new Error('文件读取失败')); + }; + reader.onerror = () => reject(reader.error ?? new Error('文件读取失败')); + reader.readAsArrayBuffer(blob); + }); +} + +export type ImageFileDimensions = { + width: number; + height: number; +}; + +function readUint24LittleEndian(bytes: Uint8Array, offset: number) { + return ( + byteAt(bytes, offset) + + (byteAt(bytes, offset + 1) << 8) + + (byteAt(bytes, offset + 2) << 16) + ); +} + +function byteAt(bytes: Uint8Array, offset: number) { + return bytes[offset] ?? 0; +} + +// 中文注释：上传素材需要在创建画布图层和持久化素材前拿到原图 Resolution，避免先写入固定兜底尺寸。 +function parseImageDimensionsFromHeader( + buffer: ArrayBuffer, +): ImageFileDimensions | null { + const bytes = new Uint8Array(buffer); + const view = new DataView(buffer); + if ( + bytes.length >= 24 && + byteAt(bytes, 0) === 0x89 && + byteAt(bytes, 1) === 0x50 && + byteAt(bytes, 2) === 0x4e && + byteAt(bytes, 3) === 0x47 + ) { + return { + width: view.getUint32(16, false), + height: view.getUint32(20, false), + }; + } + if ( + bytes.length >= 10 && + byteAt(bytes, 0) === 0x47 && + byteAt(bytes, 1) === 0x49 && + byteAt(bytes, 2) === 0x46 + ) { + return { + width: view.getUint16(6, true), + height: view.getUint16(8, true), + }; + } + if ( + bytes.length >= 26 && + byteAt(bytes, 0) === 0x42 && + byteAt(bytes, 1) === 0x4d + ) { + return { + width: Math.abs(view.getInt32(18, true)), + height: Math.abs(view.getInt32(22, true)), + }; + } + if ( + bytes.length >= 30 && + byteAt(bytes, 0) === 0x52 && + byteAt(bytes, 1) === 0x49 && + byteAt(bytes, 2) === 0x46 && + byteAt(bytes, 3) === 0x46 && + byteAt(bytes, 8) === 0x57 && + byteAt(bytes, 9) === 0x45 && + byteAt(bytes, 10) === 0x42 && + byteAt(bytes, 11) === 0x50 + ) { + const chunkType = String.fromCharCode( + byteAt(bytes, 12), + byteAt(bytes, 13), + byteAt(bytes, 14), + byteAt(bytes, 15), + ); + const chunkDataOffset = 20; + if (chunkType === 'VP8X' && bytes.length >= 30) { + return { + width: readUint24LittleEndian(bytes, 24) + 1, + height: readUint24LittleEndian(bytes, 27) + 1, + }; + } + if ( + chunkType === 'VP8 ' && + bytes.length >= chunkDataOffset + 10 && + byteAt(bytes, chunkDataOffset + 3) === 0x9d && + byteAt(bytes, chunkDataOffset + 4) === 0x01 && + byteAt(bytes, chunkDataOffset + 5) === 0x2a + ) { + return { + width: view.getUint16(chunkDataOffset + 6, true) & 0x3fff, + height: view.getUint16(chunkDataOffset + 8, true) & 0x3fff, + }; + } + if ( + chunkType === 'VP8L' && + bytes.length >= chunkDataOffset + 5 && + byteAt(bytes, chunkDataOffset) === 0x2f + ) { + const packed = + byteAt(bytes, chunkDataOffset + 1) | + (byteAt(bytes, chunkDataOffset + 2) << 8) | + (byteAt(bytes, chunkDataOffset + 3) << 16) | + (byteAt(bytes, chunkDataOffset + 4) << 24); + return { + width: (packed & 0x3fff) + 1, + height: ((packed >> 14) & 0x3fff) + 1, + }; + } + } + if ( + bytes.length >= 4 && + byteAt(bytes, 0) === 0xff && + byteAt(bytes, 1) === 0xd8 + ) { + let offset = 2; + while (offset + 9 < bytes.length) { + if (byteAt(bytes, offset) !== 0xff) { + offset += 1; + continue; + } + const marker = byteAt(bytes, offset + 1); + if (marker === 0xd8 || marker === 0xd9) { + offset += 2; + continue; + } + const segmentLength = view.getUint16(offset + 2, false); + if (segmentLength < 2 || offset + 2 + segmentLength > bytes.length) { + break; + } + if ( + (marker >= 0xc0 && marker <= 0xc3) || + (marker >= 0xc5 && marker <= 0xc7) || + (marker >= 0xc9 && marker <= 0xcb) || + (marker >= 0xcd && marker <= 0xcf) + ) { + return { + height: view.getUint16(offset + 5, false), + width: view.getUint16(offset + 7, false), + }; + } + offset += 2 + segmentLength; + } + } + return null; +} + +const HEADER_DIMENSION_IMAGE_TYPES = new Set([ + 'image/png', + 'image/jpeg', + 'image/jpg', + 'image/webp', + 'image/gif', + 'image/bmp', + 'image/x-ms-bmp', +]); + +function hasSupportedImageHeaderSignature(buffer: ArrayBuffer) { + const bytes = new Uint8Array(buffer); + return ( + (bytes.length >= 4 && + byteAt(bytes, 0) === 0x89 && + byteAt(bytes, 1) === 0x50 && + byteAt(bytes, 2) === 0x4e && + byteAt(bytes, 3) === 0x47) || + (bytes.length >= 3 && + byteAt(bytes, 0) === 0x47 && + byteAt(bytes, 1) === 0x49 && + byteAt(bytes, 2) === 0x46) || + (bytes.length >= 2 && + byteAt(bytes, 0) === 0x42 && + byteAt(bytes, 1) === 0x4d) || + (bytes.length >= 12 && + byteAt(bytes, 0) === 0x52 && + byteAt(bytes, 1) === 0x49 && + byteAt(bytes, 2) === 0x46 && + byteAt(bytes, 3) === 0x46 && + byteAt(bytes, 8) === 0x57 && + byteAt(bytes, 9) === 0x45 && + byteAt(bytes, 10) === 0x42 && + byteAt(bytes, 11) === 0x50) || + (bytes.length >= 2 && + byteAt(bytes, 0) === 0xff && + byteAt(bytes, 1) === 0xd8) + ); +} + +function normalizeImageFileDimensions( + dimensions: ImageFileDimensions | null, +) { + if ( + !dimensions || + dimensions.width <= 0 || + dimensions.height <= 0 || + !Number.isFinite(dimensions.width) || + !Number.isFinite(dimensions.height) + ) { + return null; + } + return { + width: Math.round(dimensions.width), + height: Math.round(dimensions.height), + }; +} + +async function probeImageDimensionsWithBrowserDecode(file: File) { + if (typeof createImageBitmap === 'function') { + try { + const bitmap = await createImageBitmap(file); + const dimensions = { width: bitmap.width, height: bitmap.height }; + bitmap.close(); + return normalizeImageFileDimensions(dimensions); + } catch { + return null; + } + } + if ( + typeof Image === 'undefined' || + typeof URL === 'undefined' || + typeof URL.createObjectURL !== 'function' + ) { + return null; + } + return new Promise((resolve) => { + const objectUrl = URL.createObjectURL(file); + const image = new Image(); + let settled = false; + const cleanup = () => { + if (typeof URL.revokeObjectURL === 'function') { + URL.revokeObjectURL(objectUrl); + } + }; + const finish = (dimensions: ImageFileDimensions | null) => { + if (settled) { + return; + } + settled = true; + clearTimeout(timeout); + cleanup(); + resolve(dimensions); + }; + const timeout = setTimeout(() => finish(null), 180); + image.onload = () => { + finish( + normalizeImageFileDimensions({ + width: image.naturalWidth || image.width, + height: image.naturalHeight || image.height, + }), + ); + }; + image.onerror = () => { + finish(null); + }; + image.src = objectUrl; + }); +} + +export async function probeImageFileDimensions(file: File) { + const headerBuffer = await readBlobAsArrayBuffer(file.slice(0, 65_536)); + const headerDimensions = normalizeImageFileDimensions( + parseImageDimensionsFromHeader(headerBuffer), + ); + if (headerDimensions) { + return headerDimensions; + } + if ( + HEADER_DIMENSION_IMAGE_TYPES.has(file.type.toLowerCase()) && + !hasSupportedImageHeaderSignature(headerBuffer) + ) { + return null; + } + return probeImageDimensionsWithBrowserDecode(file); +} + export function probeMediaDurationSeconds( file: File, mediaType: 'video' | 'audio', diff --git a/src/components/image-editor/ImageCanvasUploadModel.test.ts b/src/components/image-editor/ImageCanvasUploadModel.test.ts index cc4817331..64dd57db2 100644 --- a/src/components/image-editor/ImageCanvasUploadModel.test.ts +++ b/src/components/image-editor/ImageCanvasUploadModel.test.ts @@ -114,7 +114,7 @@ describe('ImageCanvasUploadModel', () => { fileName: 'hero.png', folderId: 'characters', }), - ).toEqual({ + ).toMatchObject({ id: 'upload-7', label: 'hero.png', src: '', @@ -128,6 +128,18 @@ describe('ImageCanvasUploadModel', () => { uploadProgress: 8, uploadMessage: '准备上传', }); + expect( + createUploadingAssetPlaceholder({ + uploadIndex: 8, + fileName: 'hero.png', + folderId: 'characters', + imageDimensions: { width: 1536, height: 1024 }, + }), + ).toMatchObject({ + id: 'upload-8', + width: 1536, + height: 1024, + }); }); it('opens the target upload folder without changing other folders', () => { @@ -163,7 +175,7 @@ describe('ImageCanvasUploadModel', () => { id: 'upload-1', src: 'data:image/png;base64,read', uploadProgress: 42, - uploadMessage: '读取图片', + uploadMessage: '读取素材', }, { id: 'upload-other', label: '其他图片.png' }, ]); @@ -228,7 +240,7 @@ describe('ImageCanvasUploadModel', () => { assetObjectId: 'asset-object', }, }), - ).toEqual([ + ).toMatchObject([ { id: 'asset-1', label: '角色.png', @@ -431,6 +443,27 @@ describe('ImageCanvasUploadModel', () => { }); }); + it('creates upload canvas layers with measured image dimensions', () => { + const layer = createUploadCanvasLayer({ + uploadIndex: 1, + fileName: '画布素材.png', + imageSrc: 'data:image/png;base64,canvas', + imageDimensions: { width: 1536, height: 1024 }, + canvasPoint: { x: 110, y: 120 }, + canvasSize: { width: 900, height: 640 }, + viewport: { x: 10, y: 20, scale: 2 }, + }); + + expect(layer).toMatchObject({ + x: -718, + y: -462, + width: 1536, + height: 1024, + originalWidth: 1536, + originalHeight: 1024, + }); + }); + it('uses viewport center fallback for invalid upload points', () => { const layer = createUploadCanvasLayer({ uploadIndex: 2, diff --git a/src/components/image-editor/ImageCanvasUploadModel.ts b/src/components/image-editor/ImageCanvasUploadModel.ts index 339b1a9be..e661e65ad 100644 --- a/src/components/image-editor/ImageCanvasUploadModel.ts +++ b/src/components/image-editor/ImageCanvasUploadModel.ts @@ -13,6 +13,7 @@ import { appendLimitedQuickEditReferences } from './ImageCanvasGenerationModel'; type CanvasSize = { width: number; height: number }; type CanvasPoint = { x: number; y: number }; +type UploadImageDimensions = { width: number; height: number } | null; type PersistedUploadAsset = { assetId: string; folderId: string; @@ -280,22 +281,32 @@ export function createUploadingAssetPlaceholder({ fileName, folderId, mediaType = 'image', + imageDimensions, durationSeconds, }: { uploadIndex: number; fileName?: string; folderId: string; mediaType?: CanvasMediaType; + imageDimensions?: UploadImageDimensions; durationSeconds?: number; }): EditorAsset { const fallbackSize = resolveUploadFallbackSize(mediaType); + const size = + mediaType === 'image' && imageDimensions + ? resolveLayerResolutionSize( + imageDimensions.width, + imageDimensions.height, + fallbackSize, + ) + : fallbackSize; return { id: `upload-${uploadIndex}`, label: fileName || (mediaType === 'audio' ? '上传音频' : mediaType === 'video' ? '上传视频' : '上传图片'), src: '', mediaType, - width: fallbackSize.width, - height: fallbackSize.height, + width: size.width, + height: size.height, folderId, sourceKind: 'uploaded', sourceType: 'uploaded', @@ -504,6 +515,7 @@ export function createUploadCanvasLayer({ fileName, imageSrc, mediaType = 'image', + imageDimensions, durationSeconds, canvasPoint, canvasSize, @@ -513,12 +525,21 @@ export function createUploadCanvasLayer({ fileName?: string; imageSrc: string; mediaType?: CanvasMediaType; + imageDimensions?: UploadImageDimensions; durationSeconds?: number; canvasPoint?: CanvasPoint; canvasSize: CanvasSize; viewport: CanvasViewport; }): CanvasLayer { const fallbackSize = resolveUploadFallbackSize(mediaType); + const layerSize = + mediaType === 'image' && imageDimensions + ? resolveLayerResolutionSize( + imageDimensions.width, + imageDimensions.height, + fallbackSize, + ) + : fallbackSize; const screenPoint = normalizeUploadScreenPoint({ canvasPoint, canvasSize }); const safeScale = viewport.scale > 0 ? viewport.scale : 1; const worldCenterX = (screenPoint.x - viewport.x) / safeScale; @@ -535,12 +556,12 @@ export function createUploadCanvasLayer({ : mediaType === 'audio' ? 'sound-effect' : undefined, - x: worldCenterX - fallbackSize.width / 2, - y: worldCenterY - fallbackSize.height / 2, - width: fallbackSize.width, - height: fallbackSize.height, - originalWidth: fallbackSize.width, - originalHeight: fallbackSize.height, + x: worldCenterX - layerSize.width / 2, + y: worldCenterY - layerSize.height / 2, + width: layerSize.width, + height: layerSize.height, + originalWidth: layerSize.width, + originalHeight: layerSize.height, zIndex: uploadIndex + 10, sourceType: 'uploaded', sourceAssetId: `upload-${uploadIndex}`, diff --git a/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx b/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx index 7d2b80db0..c46846e06 100644 --- a/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx +++ b/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx @@ -59,6 +59,45 @@ function createTestFile(name = '上传素材.png') { return new File(['image'], name, { type: 'image/png' }); } +function createSizedPngFile(name: string, width: number, height: number) { + const bytes = new Uint8Array([ + 0x89, + 0x50, + 0x4e, + 0x47, + 0x0d, + 0x0a, + 0x1a, + 0x0a, + 0, + 0, + 0, + 13, + 0x49, + 0x48, + 0x44, + 0x52, + (width >> 24) & 0xff, + (width >> 16) & 0xff, + (width >> 8) & 0xff, + width & 0xff, + (height >> 24) & 0xff, + (height >> 16) & 0xff, + (height >> 8) & 0xff, + height & 0xff, + 8, + 6, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + ]); + return new File([bytes], name, { type: 'image/png' }); +} + function createDeferred() { let resolve!: (value: T) => void; let reject!: (reason?: unknown) => void; @@ -126,7 +165,7 @@ function UploadWorkflowHarness({ {assets .map( (asset) => - `${asset.id}:${asset.label}:${asset.folderId}:${asset.uploadStatus ?? 'ready'}:${asset.uploadMessage ?? '-'}`, + `${asset.id}:${asset.label}:${asset.folderId}:${asset.uploadStatus ?? 'ready'}:${asset.uploadMessage ?? '-'}:${asset.width}x${asset.height}`, ) .join('|')} @@ -142,7 +181,7 @@ function UploadWorkflowHarness({ {layers .map( (layer) => - `${layer.id}:${layer.title}:${layer.sourceAssetId}:${layer.x}:${layer.y}`, + `${layer.id}:${layer.title}:${layer.sourceAssetId}:${layer.x}:${layer.y}:${layer.width}x${layer.height}`, ) .join('|')} @@ -173,6 +212,20 @@ function UploadWorkflowHarness({ > 上传到画布 +