You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, movieTitle = "Lottie Dottie Chicken: The Movie", matchScore = "99.9", searchTheme = "Cyber-Scan") {
// Create the main canvas
const canvas = document.createElement('canvas');
canvas.width = 1000;
canvas.height = 600;
const ctx = canvas.getContext('2d');
// Setup colors based on theme, though relying predominantly on a "Search System" tech vibe
const bgColor = "#0B132B";
const panelColor = "#1C2541";
const accentColor = searchTheme === "Cyber-Scan" ? "#5BC0BE" : "#0077c0";
const textColor = "#FFFFFF";
// 1. Draw Background
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Grid for background
ctx.strokeStyle = "rgba(255, 255, 255, 0.05)";
ctx.lineWidth = 1;
for (let i = 0; i < canvas.width; i += 40) {
ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(i, canvas.height); ctx.stroke();
}
for (let i = 0; i < canvas.height; i += 40) {
ctx.beginPath(); ctx.moveTo(0, i); ctx.lineTo(canvas.width, i); ctx.stroke();
}
// Header text
ctx.fillStyle = accentColor;
ctx.font = "bold 24px monospace";
ctx.textAlign = "center";
ctx.fillText("🐔 LOTTIE DOTTIE CHICKEN - GLOBAL MOVIE SEARCH SYSTEM 🐔", canvas.width / 2, 40);
// Sub-header
ctx.fillStyle = "#888888";
ctx.font = "14px monospace";
ctx.fillText("IMAGE RECOGNITION INTERFACE v2.4.1", canvas.width / 2, 60);
// Helper to draw rounded panels
function drawPanel(x, y, w, h, radius, fill, stroke) {
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + w - radius, y);
ctx.quadraticCurveTo(x + w, y, x + w, y + radius);
ctx.lineTo(x + w, y + h - radius);
ctx.quadraticCurveTo(x + w, y + h, x + w - radius, y + h);
ctx.lineTo(x + radius, y + h);
ctx.quadraticCurveTo(x, y + h, x, y + h - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
if (fill) {
ctx.fillStyle = fill;
ctx.fill();
}
if (stroke) {
ctx.strokeStyle = stroke;
ctx.lineWidth = 2;
ctx.stroke();
}
}
// Helper text wrapper
function wrapText(text, x, y, maxWidth, lineHeight) {
let words = text.split(' ');
let line = '';
for(let n = 0; n < words.length; n++) {
let testLine = line + words[n] + ' ';
let metrics = ctx.measureText(testLine);
if (metrics.width > maxWidth && n > 0) {
ctx.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
} else {
line = testLine;
}
}
ctx.fillText(line, x, y);
}
// 2. Draw Left Panel (Image Input & Scanning)
drawPanel(40, 90, 400, 470, 10, panelColor, accentColor);
ctx.fillStyle = accentColor;
ctx.textAlign = "left";
ctx.font = "bold 16px monospace";
ctx.fillText("INPUT: UPLOADED IMAGE", 60, 120);
// Calculate aspect ratio and fit image
let imgMaxWidth = 360;
let imgMaxHeight = 400;
let scale = Math.min(imgMaxWidth / originalImg.width, imgMaxHeight / originalImg.height);
let dw = originalImg.width * scale;
let dh = originalImg.height * scale;
let dx = 60 + (imgMaxWidth - dw) / 2;
let dy = 140 + (imgMaxHeight - dh) / 2;
// Draw the original image
ctx.drawImage(originalImg, dx, dy, dw, dh);
// Image scan overlay
ctx.fillStyle = "rgba(91, 192, 190, 0.1)";
ctx.fillRect(dx, dy, dw, dh);
// Draw scanning grid on image
ctx.strokeStyle = "rgba(91, 192, 190, 0.4)";
ctx.beginPath();
for(let i = dx; i < dx + dw; i += dw/5) {
ctx.moveTo(i, dy); ctx.lineTo(i, dy + dh);
}
for(let j = dy; j < dy + dh; j += dh/5) {
ctx.moveTo(dx, j); ctx.lineTo(dx + dw, j);
}
ctx.stroke();
// Crosshair on image
ctx.strokeStyle = "#FFFFFF";
ctx.lineWidth = 2;
let cx = dx + dw/2;
let cy = dy + dh/2;
ctx.beginPath();
ctx.moveTo(cx - 30, cy); ctx.lineTo(cx + 30, cy);
ctx.moveTo(cx, cy - 30); ctx.lineTo(cx, cy + 30);
ctx.stroke();
ctx.beginPath();
ctx.arc(cx, cy, 20, 0, Math.PI*2);
ctx.stroke();
// 3. Draw Right Panel (Match Results)
drawPanel(470, 90, 490, 470, 10, panelColor, accentColor);
ctx.fillStyle = "#00FF66"; // Success green color
ctx.fillText(`DATABASE MATCH FOUND - SIMILARITY: ${matchScore}%`, 490, 120);
// Mock Poster Background
drawPanel(490, 140, 200, 280, 5, "#87CEEB", null);
// Function to draw Lottie Dottie Chicken (Galinha Pintadinha) procedurally via Canvas API
function renderLottieDottieChicken(cx, cy) {
ctx.save();
ctx.translate(cx, cy);
// Legs (Orange)
ctx.strokeStyle = "#ff8c00";
ctx.lineWidth = 4;
ctx.beginPath(); ctx.moveTo(-20, 60); ctx.lineTo(-20, 100); ctx.stroke();
ctx.beginPath(); ctx.moveTo(20, 60); ctx.lineTo(20, 100); ctx.stroke();
let feetCoords = [[-20, 100], [20, 100]];
feetCoords.forEach(pos => {
ctx.beginPath();
ctx.moveTo(pos[0], pos[1]);
ctx.lineTo(pos[0]-10, pos[1]+10);
ctx.moveTo(pos[0], pos[1]);
ctx.lineTo(pos[0]+10, pos[1]+10);
ctx.stroke();
});
// Top Comb (Red circles)
ctx.fillStyle = "#ff0000";
ctx.beginPath(); ctx.arc(-15, -75, 12, 0, Math.PI*2); ctx.fill();
ctx.beginPath(); ctx.arc(0, -85, 15, 0, Math.PI*2); ctx.fill();
ctx.beginPath(); ctx.arc(15, -75, 12, 0, Math.PI*2); ctx.fill();
// Body (Blue oval)
ctx.fillStyle = "#0077c0";
ctx.beginPath();
ctx.ellipse(0, 0, 60, 80, 0, 0, Math.PI*2); // Center x,y, rx,ry, rotation, startAngle, endAngle
ctx.fill();
// Spots (White dots)
ctx.fillStyle = "#ffffff";
const spots = [[-30, 20], [0, 30], [30, 20], [-15, 50], [15, 50], [0, 10]];
spots.forEach(pt => {
ctx.beginPath(); ctx.arc(pt[0], pt[1], 5, 0, Math.PI*2); ctx.fill();
});
// Eyes (Big white circles)
ctx.fillStyle = "#ffffff";
ctx.beginPath(); ctx.arc(-18, -35, 20, 0, Math.PI*2); ctx.fill();
ctx.beginPath(); ctx.arc(18, -35, 20, 0, Math.PI*2); ctx.fill();
// Pupils (Black)
ctx.fillStyle = "#000000";
ctx.beginPath(); ctx.arc(-12, -35, 5, 0, Math.PI*2); ctx.fill();
ctx.beginPath(); ctx.arc(12, -35, 5, 0, Math.PI*2); ctx.fill();
// Beak (Yellow Triangle)
ctx.fillStyle = "#ffcc00";
ctx.beginPath();
ctx.moveTo(-15, -15);
ctx.lineTo(15, -15);
ctx.lineTo(0, 10);
ctx.closePath();
ctx.fill();
// Wattles (Red under beak)
ctx.fillStyle = "#ff0000";
ctx.beginPath(); ctx.arc(-6, -2, 6, 0, Math.PI*2); ctx.fill();
ctx.beginPath(); ctx.arc(6, -2, 6, 0, Math.PI*2); ctx.fill();
ctx.restore();
}
// Draw the procedural chicken onto the poster
renderLottieDottieChicken(590, 260);
// Poster Title overlay
ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
ctx.fillRect(490, 380, 200, 40);
ctx.fillStyle = "#FFFFFF";
ctx.font = "bold 14px sans-serif";
ctx.textAlign = "center";
ctx.fillText("THE MOVIE", 590, 405);
// Movie details text
ctx.textAlign = "left";
ctx.fillStyle = accentColor;
ctx.font = "bold 18px monospace";
wrapText(movieTitle.toUpperCase(), 710, 160, 230, 22);
ctx.fillStyle = "#AAAAAA";
ctx.font = "14px monospace";
ctx.fillText("RELEASE: 2024 (Simulated)", 710, 220);
ctx.fillText("GENRE : Animation, Musical", 710, 240);
ctx.fillText("STATUS : Verified", 710, 260);
ctx.fillStyle = "#FFFFFF";
ctx.font = "12px sans-serif";
const description = "Synopsis: Lottie Dottie Chicken embarks on her grandest musical adventure yet! After discovering a mysterious map in the barnyard, she and her colorful friends must solve puzzles, sing catchy tunes, and find the fabled Golden Egg before sundown.";
wrapText(description, 710, 300, 230, 18);
// Fake Barcode at the bottom
ctx.fillStyle = "#FFFFFF";
const barcodeStartX = 710;
const barcodeStartY = 430;
for (let i = 0; i < 40; i++) {
const barWidth = Math.random() * 3 + 1;
ctx.fillRect(barcodeStartX + i * 5, barcodeStartY, barWidth, 40);
}
// Status block
ctx.fillStyle = panelColor;
ctx.fillRect(490, 490, 450, 50);
ctx.strokeStyle = accentColor;
ctx.strokeRect(490, 490, 450, 50);
ctx.fillStyle = accentColor;
ctx.font = "bold 16px monospace";
ctx.fillText("PROCESS: COMPLETE | ACTION: READY FOR PLAYBACK", 505, 520);
return canvas;
}Apply Changes
