You can edit the below JavaScript code to customize the image tool.
Apply Changes
async function processImage(originalImg, movieStyle = 'Star Wars', titleText = 'YOUR NAME HERE', subtitleText = 'A FILM BY AI') {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set canvas dimensions to match the original image
const w = originalImg.width;
const h = originalImg.height;
canvas.width = w;
canvas.height = h;
// Supported styles with corresponding Google Fonts
const styleMap = {
'star wars': { font: 'Poller One', url: 'Poller+One' },
'harry potter': { font: 'Cinzel Decorative', url: 'Cinzel+Decorative:wght@700' },
'matrix': { font: 'Share Tech Mono', url: 'Share+Tech+Mono' },
'the godfather': { font: 'Limelight', url: 'Limelight' },
'jurassic park': { font: 'Rye', url: 'Rye' }
};
// Normalize style input and fallback to Star Wars if not found
const styleKey = movieStyle.toLowerCase().trim();
const selectedStyle = styleMap[styleKey] || styleMap['star wars'];
const fontName = selectedStyle.font;
// Dynamically inject Google Font into the document
const fontId = `font-${selectedStyle.url.replace(/[^a-zA-Z]/g, '')}`;
if (!document.getElementById(fontId)) {
const link = document.createElement('link');
link.id = fontId;
link.href = `https://fonts.googleapis.com/css2?family=${selectedStyle.url}&display=swap`;
link.rel = 'stylesheet';
document.head.appendChild(link);
}
// Wait for the font to load so it renders on canvas correctly
try {
await document.fonts.load(`10px "${fontName}"`);
} catch (e) {
console.warn('Font loading might have failed or timed out:', e);
}
// Draw the base image
ctx.drawImage(originalImg, 0, 0);
// Filter and Style Implementation
ctx.save();
if (styleKey === 'the godfather') {
// Black & White with High Contrast
const imgData = ctx.getImageData(0, 0, w, h);
const data = imgData.data;
for(let i = 0; i < data.length; i += 4) {
const avg = (data[i] + data[i+1] + data[i+2]) / 3;
const contrast = avg < 128 ? avg / 1.5 : Math.min(255, avg * 1.5);
data[i] = data[i+1] = data[i+2] = contrast;
}
ctx.putImageData(imgData, 0, 0);
// Intense Vignette
const grad = ctx.createRadialGradient(w/2, h/2, Math.min(w,h)/4, w/2, h/2, Math.max(w,h)/1.1);
grad.addColorStop(0, 'rgba(0,0,0,0)');
grad.addColorStop(1, 'rgba(0,0,0,0.95)');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, w, h);
} else if (styleKey === 'matrix') {
// Green color grade multiplying effect
ctx.fillStyle = 'rgba(0, 50, 0, 0.4)';
ctx.fillRect(0, 0, w, h);
ctx.globalCompositeOperation = 'multiply';
ctx.fillStyle = '#0f380f';
ctx.fillRect(0, 0, w, h);
ctx.globalCompositeOperation = 'source-over';
// Raining code ambient background (light overlay)
ctx.font = `${w/40}px monospace`;
ctx.fillStyle = 'rgba(0, 255, 65, 0.15)';
for(let i = 0; i < 150; i++) {
let rx = Math.random() * w;
let ry = Math.random() * h;
// random katakana/symbols
let char = String.fromCharCode(0x30A0 + Math.random() * 96);
ctx.fillText(char, rx, ry);
}
} else if (styleKey === 'harry potter') {
// Mystical blue/dark tint
ctx.fillStyle = 'rgba(10, 25, 45, 0.6)';
ctx.fillRect(0, 0, w, h);
// Vignette
const grad = ctx.createRadialGradient(w/2, h/2, Math.min(w,h)/3, w/2, h/2, Math.max(w,h));
grad.addColorStop(0, 'rgba(0,0,0,0)');
grad.addColorStop(1, 'rgba(0,0,0,0.8)');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, w, h);
} else if (styleKey === 'star wars') {
// Space/dark vignette
const grad = ctx.createRadialGradient(w/2, h/2, Math.min(w,h)/3, w/2, h/2, Math.max(w,h));
grad.addColorStop(0, 'rgba(0,0,0,0)');
grad.addColorStop(1, 'rgba(0,0,0,0.85)');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, w, h);
} else if (styleKey === 'jurassic park') {
// Prehistoric warm sunset tint
ctx.fillStyle = 'rgba(90, 30, 0, 0.3)';
ctx.fillRect(0, 0, w, h);
// Edge darkness
const grad = ctx.createRadialGradient(w/2, h/2, Math.min(w,h)/2, w/2, h/2, Math.max(w,h));
grad.addColorStop(0, 'rgba(0,0,0,0)');
grad.addColorStop(1, 'rgba(0,0,0,0.7)');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, w, h);
}
ctx.restore();
// Auto-scaling text utility
let mainFontSize = Math.floor(w / 6);
ctx.font = `bold ${mainFontSize}px "${fontName}"`;
let metrics = ctx.measureText(titleText);
while (metrics.width > w * 0.9 && mainFontSize > 10) {
mainFontSize -= 2;
ctx.font = `bold ${mainFontSize}px "${fontName}"`;
metrics = ctx.measureText(titleText);
}
const subFontSize = Math.floor(w / 25);
// Shared Text settings
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// Text Renderers
if (styleKey === 'star wars') {
ctx.fillStyle = '#ffe81f'; // Iconic Star Wars Yellow
ctx.strokeStyle = '#000000';
ctx.lineWidth = mainFontSize / 12;
ctx.lineJoin = 'round';
ctx.strokeText(titleText.toUpperCase(), w/2, h/2);
ctx.fillText(titleText.toUpperCase(), w/2, h/2);
ctx.font = `${subFontSize}px "${fontName}"`;
ctx.fillStyle = '#ffffff';
ctx.fillText(subtitleText.toUpperCase(), w/2, h/2 + mainFontSize);
} else if (styleKey === 'harry potter') {
// Heavy floating magic shadow
ctx.shadowColor = '#000000';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
// Elegant Gold Gradient
const grad = ctx.createLinearGradient(0, h/2 - mainFontSize/2, 0, h/2 + mainFontSize/2);
grad.addColorStop(0, '#f1d570');
grad.addColorStop(0.5, '#c59530');
grad.addColorStop(1, '#8b6914');
ctx.fillStyle = grad;
ctx.fillText(titleText, w/2, h/2);
ctx.font = `${subFontSize}px "${fontName}"`;
ctx.fillStyle = '#a0aec0';
ctx.fillText(subtitleText.toUpperCase(), w/2, h/2 + mainFontSize);
} else if (styleKey === 'matrix') {
ctx.fillStyle = '#00ff41'; // Hacker terminal green
ctx.shadowColor = '#00ff41';
ctx.shadowBlur = 15;
ctx.fillText(titleText, w/2, h/2);
ctx.font = `${subFontSize}px "${fontName}"`;
ctx.fillText(subtitleText, w/2, h/2 + mainFontSize);
} else if (styleKey === 'the godfather') {
ctx.fillStyle = '#ffffff';
ctx.shadowColor = '#000000';
ctx.shadowBlur = 15;
ctx.shadowOffsetY = 5;
ctx.fillText(titleText, w/2, h/2);
ctx.font = `${subFontSize}px "${fontName}"`;
ctx.fillStyle = '#cccccc';
// Placed above title like presentation line
ctx.fillText(subtitleText, w/2, h/2 - mainFontSize * 0.8);
} else if (styleKey === 'jurassic park') {
ctx.fillStyle = '#eebd44'; // Yellow
ctx.strokeStyle = '#c1272d'; // Red Outline
ctx.lineWidth = mainFontSize / 20;
ctx.lineJoin = 'miter';
// Deep drop shadow
ctx.shadowColor = '#000000';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 6;
ctx.shadowOffsetY = 6;
ctx.strokeText(titleText.toUpperCase(), w/2, h/2);
ctx.shadowColor = 'transparent';
ctx.fillText(titleText.toUpperCase(), w/2, h/2);
ctx.font = `bold ${subFontSize}px "${fontName}"`;
ctx.fillStyle = '#ffffff';
ctx.shadowColor = '#000000';
ctx.shadowBlur = 8;
ctx.fillText(subtitleText.toUpperCase(), w/2, h/2 + mainFontSize);
}
return canvas;
}Apply Changes
