From bb983761364a527e1ed9f8f40692647bb68fe798 Mon Sep 17 00:00:00 2001 From: LemonNeko Date: Wed, 17 Sep 2025 00:52:35 +0800 Subject: [PATCH] fix(stage-ui): padding model preview to correct aspect ratio (#594) --- packages/stage-ui/src/stores/display-models.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/stage-ui/src/stores/display-models.ts b/packages/stage-ui/src/stores/display-models.ts index 30dc89fac..4b6c09e5c 100644 --- a/packages/stage-ui/src/stores/display-models.ts +++ b/packages/stage-ui/src/stores/display-models.ts @@ -144,14 +144,22 @@ export const useDisplayModelsStore = defineStore('display-models', () => { app.renderer.render(app.stage) const croppedCanvas = cropImg(offscreenCanvas) - const dataUrl = croppedCanvas.toDataURL() + + // padding to 12:16 + const paddingCanvas = document.createElement('canvas') + paddingCanvas.width = croppedCanvas.width > croppedCanvas.height / 16 * 12 ? croppedCanvas.width : croppedCanvas.height / 16 * 12 + paddingCanvas.height = paddingCanvas.width / 12 * 16 + const paddingCanvasCtx = paddingCanvas.getContext('2d')! + + paddingCanvasCtx.drawImage(croppedCanvas, (paddingCanvas.width - croppedCanvas.width) / 2, (paddingCanvas.height - croppedCanvas.height) / 2, croppedCanvas.width, croppedCanvas.height) + const paddingDataUrl = paddingCanvas.toDataURL() app.destroy() document.body.removeChild(offscreenCanvas) URL.revokeObjectURL(objUrl) // return dataUrl - return dataUrl + return paddingDataUrl } async function addDisplayModel(format: DisplayModelFormat, file: File) {