charlestehio/memefast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
ct
2025-06-16 13:48:44 +08:00
parent 8ab96e5d00
commit 1282400372
1 changed files with 40 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
resources/js/modules/editor/partials/canvas/video-editor.jsx
View File

@@ -197,35 +197,51 @@ const VideoEditor = ({ width, height }) => {
posterImg.onload = () => { posterImg.onload = () => {
console.log('Poster loaded for:', element.id); console.log('Poster loaded for:', element.id);
const maxWidth = dimensions.width; const canvasWidth = dimensions.width;
const maxHeight = dimensions.height; const canvasHeight = dimensions.height;
const posterWidth = posterImg.naturalWidth; const imageWidth = posterImg.naturalWidth;
const posterHeight = posterImg.naturalHeight; const imageHeight = posterImg.naturalHeight;
let scaledWidth = posterWidth; // Calculate aspect ratios
let scaledHeight = posterHeight; const canvasAspect = canvasWidth / canvasHeight;
const imageAspect = imageWidth / imageHeight;
if (posterWidth > maxWidth || posterHeight > maxHeight) { let scaledWidth, scaledHeight, centeredX, centeredY;
const scaleX = maxWidth / posterWidth;
const scaleY = maxHeight / posterHeight;
const scale = Math.min(scaleX, scaleY);
scaledWidth = posterWidth * scale;
scaledHeight = posterHeight * scale;
}
// ✅ UPDATED: Different positioning for background vs meme
let centeredX, centeredY;
if (element.id.startsWith('bg_')) { if (element.id.startsWith('bg_')) {
// Background should fill the canvas // Background: Cover behavior - fill entire canvas, crop if needed
centeredX = 0; if (imageAspect > canvasAspect) {
centeredY = 0; // Image is wider than canvas - fit height, crop width
scaledWidth = maxWidth; scaledHeight = canvasHeight;
scaledHeight = maxHeight; scaledWidth = scaledHeight * imageAspect;
centeredX = (canvasWidth - scaledWidth) / 2; // Center horizontally
centeredY = 0;
} else {
// Image is taller than canvas - fit width, crop height
scaledWidth = canvasWidth;
scaledHeight = scaledWidth / imageAspect;
centeredX = 0;
centeredY = (canvasHeight - scaledHeight) / 2; // Center vertically
}
} else { } else {
// Meme should be centered // Meme overlay: Cover behavior but with some padding/sizing
centeredX = (maxWidth - scaledWidth) / 2; const memeMaxWidth = canvasWidth; // 80% of canvas width
centeredY = (maxHeight - scaledHeight) / 2; const memeMaxHeight = canvasHeight; // 80% of canvas height
const memeAspect = memeMaxWidth / memeMaxHeight;
if (imageAspect > memeAspect) {
// Image is wider - fit height, crop width
scaledHeight = memeMaxHeight;
scaledWidth = scaledHeight * imageAspect;
} else {
// Image is taller - fit width, crop height
scaledWidth = memeMaxWidth;
scaledHeight = scaledWidth / imageAspect;
}
// Center the meme on canvas
centeredX = (canvasWidth - scaledWidth) / 2;
centeredY = (canvasHeight - scaledHeight) / 2;
} }
setTimelineElements((prev) => setTimelineElements((prev) =>