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-17 17:41:40 +08:00
parent 950202c1fb
commit bf5e875ee9
28 changed files with 987 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -98,16 +98,29 @@ const useVideoExport = ({ timelineElements, dimensions, totalDuration }) => {
showConsoleLogs && console.log('🎵 Audio args:', audioArgs);
// Process text elements with centering
// Process text elements with font family support
texts.forEach((t, i) => {
const escapedText = t.text.replace(/'/g, is_string ? "\\'" : "'").replace(/:/g, '\\:');
// Determine font file based on weight and style
let fontFile = 'Montserrat-Regular.ttf'; // default
const isBold = t.fontWeight === 'bold' || t.fontWeight === 700;
const isItalic = t.fontStyle === 'italic';
if (isBold && isItalic) {
fontFile = 'Montserrat-BoldItalic.ttf';
} else if (isBold) {
fontFile = 'Montserrat-Bold.ttf';
} else if (isItalic) {
fontFile = 'Montserrat-Italic.ttf';
}
// Center the text: x position is the center point, y is adjusted for baseline
const centerX = Math.round(t.x);
const centerY = Math.round(t.y + t.fontSize * 0.3); // Adjust for text baseline
filters.push(
`[${videoLayer}]drawtext=fontfile=/arial.ttf:text='${escapedText}':x=${centerX}:y=${centerY}:fontsize=${t.fontSize}:fontcolor=${t.fill}:borderw=${t.strokeWidth}:bordercolor=${
`[${videoLayer}]drawtext=fontfile=/${fontFile}:text='${escapedText}':x=${centerX}:y=${centerY}:fontsize=${t.fontSize}:fontcolor=${t.fill}:borderw=${t.strokeWidth}:bordercolor=${
t.stroke
}:text_align=center:enable='between(t,${t.startTime},${t.startTime + t.duration})'[t${i}]`,
);
@@ -211,9 +224,25 @@ const useVideoExport = ({ timelineElements, dimensions, totalDuration }) => {
showConsoleLogs && console.log('FFmpeg loaded!');
setExportProgress(20);
setExportStatus('Loading font...');
await ffmpeg.writeFile('arial.ttf', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/arial.ttf'));
showConsoleLogs && console.log('Font loaded!');
setExportStatus('Loading fonts...');
// Load Montserrat font variants
await ffmpeg.writeFile(
'Montserrat-Regular.ttf',
await fetchFile('https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459Wlhyw.ttf'),
);
await ffmpeg.writeFile(
'Montserrat-Bold.ttf',
await fetchFile('https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459W1hyw.ttf'),
);
await ffmpeg.writeFile(
'Montserrat-Italic.ttf',
await fetchFile('https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WxhywMDPA.ttf'),
);
await ffmpeg.writeFile(
'Montserrat-BoldItalic.ttf',
await fetchFile('https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459W1hywMDPA.ttf'),
);
showConsoleLogs && console.log('Fonts loaded!');
setExportProgress(30);
setExportStatus('Downloading media...');