fix: show real image dimensions in right pane for DNG/RAW files

The preview endpoint now returns X-Original-Width/Height headers with
dimensions read from Sharp metadata (or ExifTool for RAW files). The
frontend stores these in FileEntry and the ImageViewer prefers them over
the browser's naturalWidth/naturalHeight, which reflects the resized
preview rather than the original sensor dimensions.
This commit is contained in:
SnapOtter
2026-05-12 22:13:58 +08:00
parent 8c1526559b
commit 2d17fd4903
7 changed files with 105 additions and 14 deletions
+2 -2
View File
@@ -141,7 +141,7 @@ export const useCollageStore = create<CollageState>((set, get) => ({
for (const img of newImages) {
if (img.previewLoading) {
const imgId = img.id;
fetchDecodedPreview(img.file).then((url) => {
fetchDecodedPreview(img.file).then((result) => {
const current = get();
const idx = current.images.findIndex((i) => i.id === imgId);
if (idx === -1) return;
@@ -149,7 +149,7 @@ export const useCollageStore = create<CollageState>((set, get) => ({
updated[idx] = {
...updated[idx],
previewLoading: false,
...(url ? { previewBlobUrl: url } : {}),
...(result ? { previewBlobUrl: result.url } : {}),
};
set({ images: updated });
});
+30 -6
View File
@@ -10,6 +10,8 @@ export interface FileEntry {
processedFilename: string | null;
processedSize: number | null;
originalSize: number;
originalWidth: number | null;
originalHeight: number | null;
status: "pending" | "processing" | "completed" | "failed";
error: string | null;
serverFileId?: string;
@@ -29,6 +31,8 @@ function createEntry(file: File): FileEntry {
processedFilename: null,
processedSize: null,
originalSize: file.size,
originalWidth: null,
originalHeight: null,
status: "pending",
error: null,
serverFileId: undefined,
@@ -147,13 +151,23 @@ export const useFileStore = create<FileState>((set, get) => ({
for (let i = 0; i < entries.length; i++) {
if (needsServerPreview(entries[i].file)) {
const file = entries[i].file;
fetchDecodedPreview(file).then((url) => {
fetchDecodedPreview(file).then((result) => {
const state = get();
if (state.entries[i]?.file !== file) return;
const updated = [...state.entries];
const oldBlobUrl = updated[i].blobUrl;
updated[i] = { ...updated[i], previewLoading: false, ...(url ? { blobUrl: url } : {}) };
if (url && oldBlobUrl) URL.revokeObjectURL(oldBlobUrl);
updated[i] = {
...updated[i],
previewLoading: false,
...(result
? {
blobUrl: result.url,
originalWidth: result.originalWidth,
originalHeight: result.originalHeight,
}
: {}),
};
if (result && oldBlobUrl) URL.revokeObjectURL(oldBlobUrl);
set({ entries: updated, ...deriveSelected(updated, state.selectedIndex) });
});
}
@@ -171,13 +185,23 @@ export const useFileStore = create<FileState>((set, get) => ({
const i = oldLen + j;
if (needsServerPreview(newEntries[j].file)) {
const file = newEntries[j].file;
fetchDecodedPreview(file).then((url) => {
fetchDecodedPreview(file).then((result) => {
const state = get();
if (state.entries[i]?.file !== file) return;
const updated = [...state.entries];
const oldBlobUrl = updated[i].blobUrl;
updated[i] = { ...updated[i], previewLoading: false, ...(url ? { blobUrl: url } : {}) };
if (url && oldBlobUrl) URL.revokeObjectURL(oldBlobUrl);
updated[i] = {
...updated[i],
previewLoading: false,
...(result
? {
blobUrl: result.url,
originalWidth: result.originalWidth,
originalHeight: result.originalHeight,
}
: {}),
};
if (result && oldBlobUrl) URL.revokeObjectURL(oldBlobUrl);
set({ entries: updated, ...deriveSelected(updated, state.selectedIndex) });
});
}