kibi/f0ckm
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

tweaking meme gen

Browse Source
This commit is contained in:
Kibi Kelburton
2026-07-15 07:55:23 +02:00
parent dd5f3dc8b9
commit 6d73cfcea9
1 changed files with 13 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
public/s/js/meme-creator.js
View File

@@ -27,6 +27,7 @@
} }
const memeFont = 'Impact, Charcoal, sans-serif'; const memeFont = 'Impact, Charcoal, sans-serif';
const memeLetterSpacing = '0.06em';
function wrapText(ctx, text, maxWidth) { function wrapText(ctx, text, maxWidth) {
const paragraphs = text.split('\n'); const paragraphs = text.split('\n');
@@ -251,6 +252,7 @@
const fontSize = layer.fontSize || 40; const fontSize = layer.fontSize || 40;
ctx.font = `bold ${fontSize}px ${memeFont}`; ctx.font = `bold ${fontSize}px ${memeFont}`;
ctx.letterSpacing = memeLetterSpacing;
let displayStr = layer.text.toUpperCase(); let displayStr = layer.text.toUpperCase();
const lines = wrapText(ctx, displayStr, canvas.width * 0.9); const lines = wrapText(ctx, displayStr, canvas.width * 0.9);
@@ -274,6 +276,7 @@
ctx.save(); ctx.save();
ctx.font = `bold ${fontSize}px ${memeFont}`; // Ensure correct font size per line ctx.font = `bold ${fontSize}px ${memeFont}`; // Ensure correct font size per line
ctx.letterSpacing = memeLetterSpacing;
ctx.strokeStyle = 'black'; ctx.strokeStyle = 'black';
ctx.lineWidth = Math.max(2, fontSize / 8); // Slightly thicker stroke for better legibility ctx.lineWidth = Math.max(2, fontSize / 8); // Slightly thicker stroke for better legibility
ctx.strokeText(line, renderX, renderY); ctx.strokeText(line, renderX, renderY);
@@ -301,6 +304,7 @@
const fontSize = layer.fontSize || 40; const fontSize = layer.fontSize || 40;
ctx.save(); ctx.save();
ctx.font = `bold ${fontSize}px ${memeFont}`; ctx.font = `bold ${fontSize}px ${memeFont}`;
ctx.letterSpacing = memeLetterSpacing;
const lines = wrapText(ctx, layer.text.toUpperCase(), canvas.width * 0.9); const lines = wrapText(ctx, layer.text.toUpperCase(), canvas.width * 0.9);
ctx.restore(); ctx.restore();
const w = canvas.width * 0.95; const w = canvas.width * 0.95;
@@ -417,6 +421,7 @@
if (isOrakelBingoApu) { if (isOrakelBingoApu) {
// Draw "KOPS" in normal meme text style on the selected corner // Draw "KOPS" in normal meme text style on the selected corner
uCtx.font = `bold 28px ${memeFont}`; uCtx.font = `bold 28px ${memeFont}`;
uCtx.letterSpacing = memeLetterSpacing;
uCtx.textAlign = 'center'; uCtx.textAlign = 'center';
uCtx.textBaseline = 'middle'; uCtx.textBaseline = 'middle';
uCtx.fillStyle = '#fff'; uCtx.fillStyle = '#fff';
@@ -428,6 +433,7 @@
uCtx.fillText('KOPS', selectedCorner.x, selectedCorner.y); uCtx.fillText('KOPS', selectedCorner.x, selectedCorner.y);
} else { } else {
uCtx.font = (isOrakelVon10) ? 'bold 150px Impact' : 'bold 80px Impact'; // Bigger font for the rating uCtx.font = (isOrakelVon10) ? 'bold 150px Impact' : 'bold 80px Impact'; // Bigger font for the rating
uCtx.letterSpacing = memeLetterSpacing;
uCtx.textAlign = 'center'; uCtx.textAlign = 'center';
uCtx.textBaseline = 'middle'; uCtx.textBaseline = 'middle';
@@ -470,11 +476,13 @@
let currentFontSize = 74; let currentFontSize = 74;
uCtx.font = `bold ${currentFontSize}px Impact`; uCtx.font = `bold ${currentFontSize}px Impact`;
uCtx.letterSpacing = memeLetterSpacing;
// First attempt: Shrink entire text on one line down to 58px if needed // First attempt: Shrink entire text on one line down to 58px if needed
while (uCtx.measureText(combinedText).width > userMaxWidth && currentFontSize > 58) { while (uCtx.measureText(combinedText).width > userMaxWidth && currentFontSize > 58) {
currentFontSize -= 2; currentFontSize -= 2;
uCtx.font = `bold ${currentFontSize}px Impact`; uCtx.font = `bold ${currentFontSize}px Impact`;
uCtx.letterSpacing = memeLetterSpacing;
} }
const combinedFits = uCtx.measureText(combinedText).width <= userMaxWidth; const combinedFits = uCtx.measureText(combinedText).width <= userMaxWidth;
@@ -486,9 +494,11 @@
// Two lines — auto-fit just the name, ID below // Two lines — auto-fit just the name, ID below
let nameFontSize = 74; let nameFontSize = 74;
uCtx.font = `bold ${nameFontSize}px Impact`; uCtx.font = `bold ${nameFontSize}px Impact`;
uCtx.letterSpacing = memeLetterSpacing;
while (uCtx.measureText(namePart).width > userMaxWidth && nameFontSize > 16) { while (uCtx.measureText(namePart).width > userMaxWidth && nameFontSize > 16) {
nameFontSize -= 2; nameFontSize -= 2;
uCtx.font = `bold ${nameFontSize}px Impact`; uCtx.font = `bold ${nameFontSize}px Impact`;
uCtx.letterSpacing = memeLetterSpacing;
} }
const idFontSize = Math.max(18, Math.round(nameFontSize * 0.45)); const idFontSize = Math.max(18, Math.round(nameFontSize * 0.45));
@@ -497,16 +507,19 @@
const idY = Math.round(yPos + lineGap / 2) + 2; const idY = Math.round(yPos + lineGap / 2) + 2;
uCtx.font = `bold ${nameFontSize}px Impact`; uCtx.font = `bold ${nameFontSize}px Impact`;
uCtx.letterSpacing = memeLetterSpacing;
uCtx.fillText(namePart, xPos, nameY); uCtx.fillText(namePart, xPos, nameY);
if (idPart) { if (idPart) {
uCtx.font = `bold ${idFontSize}px Impact`; uCtx.font = `bold ${idFontSize}px Impact`;
uCtx.letterSpacing = memeLetterSpacing;
uCtx.fillText(idPart, xPos, idY); uCtx.fillText(idPart, xPos, idY);
} }
} }
} else { } else {
// Normal / von10 — single line as before // Normal / von10 — single line as before
uCtx.font = `bold ${orakelFontSize}px Impact`; uCtx.font = `bold ${orakelFontSize}px Impact`;
uCtx.letterSpacing = memeLetterSpacing;
uCtx.strokeText(result, xPos, yPos); uCtx.strokeText(result, xPos, yPos);
uCtx.fillText(result, xPos, yPos); uCtx.fillText(result, xPos, yPos);
} }