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

Revert "Update"

Browse Source 
This reverts commit 1282400372.
This commit is contained in:
ct
2025-06-16 13:52:41 +08:00
parent 5dec236a1f
commit 471e7e1cd4
1 changed files with 24 additions and 40 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,51 +197,35 @@ const VideoEditor = ({ width, height }) => {
posterImg.onload = () => {
console.log('Poster loaded for:', element.id);
const canvasWidth = dimensions.width;
const canvasHeight = dimensions.height;
const imageWidth = posterImg.naturalWidth;
const imageHeight = posterImg.naturalHeight;
const maxWidth = dimensions.width;
const maxHeight = dimensions.height;
const posterWidth = posterImg.naturalWidth;
const posterHeight = posterImg.naturalHeight;
// Calculate aspect ratios
const canvasAspect = canvasWidth / canvasHeight;
const imageAspect = imageWidth / imageHeight;
let scaledWidth = posterWidth;
let scaledHeight = posterHeight;
let scaledWidth, scaledHeight, centeredX, centeredY;
if (posterWidth > maxWidth || posterHeight > maxHeight) {
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_')) {
// Background: Cover behavior - fill entire canvas, crop if needed
if (imageAspect > canvasAspect) {
// Image is wider than canvas - fit height, crop width
scaledHeight = canvasHeight;
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
}
// Background should fill the canvas
centeredX = 0;
centeredY = 0;
scaledWidth = maxWidth;
scaledHeight = maxHeight;
} else {
// Meme overlay: Cover behavior but with some padding/sizing
const memeMaxWidth = canvasWidth; // 100% of canvas width
const memeMaxHeight = canvasHeight; // 100% 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;
// Meme should be centered
centeredX = (maxWidth - scaledWidth) / 2;
centeredY = (maxHeight - scaledHeight) / 2;
}
setTimelineElements((prev) =>