You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, topic = "Digital Innovation", libraryName = "Image PRO Mediateka", accentColor = "#0078d7") {
const canvas = document.createElement('canvas');
const W = 1200;
const H = 800;
canvas.width = W;
canvas.height = H;
const ctx = canvas.getContext('2d');
// Helper function to draw rounded rectangles
function fillRoundedRect(ctx, x, y, width, height, radius) {
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
}
// 1. Draw Main Background (Blurred and darkened original image)
const bgScale = Math.max(W / originalImg.width, H / originalImg.height);
const bgW = originalImg.width * bgScale;
const bgH = originalImg.height * bgScale;
const bgX = (W - bgW) / 2;
const bgY = (H - bgH) / 2;
ctx.save();
ctx.filter = 'blur(15px) brightness(0.25)';
ctx.drawImage(originalImg, bgX, bgY, bgW, bgH);
ctx.restore();
// 2. Top Navigation Bar
ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
ctx.fillRect(0, 0, W, 70);
ctx.fillStyle = accentColor;
ctx.fillRect(0, 68, W, 2); // Decorative thin line
// Library Branding
ctx.fillStyle = '#ffffff';
ctx.font = 'bold 24px "Segoe UI", Arial, sans-serif';
ctx.fillText(libraryName, 40, 42);
// User Profile Placeholder (Top Right)
ctx.beginPath();
ctx.arc(W - 60, 35, 20, 0, Math.PI * 2);
ctx.fillStyle = '#333333';
ctx.fill();
ctx.font = '20px Arial';
ctx.fillText('👤', W - 71, 42);
// 3. Center Search Bar Interface
const searchWidth = 700;
const searchHeight = 60;
const searchX = (W - searchWidth) / 2;
const searchY = 140;
ctx.save();
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 20;
ctx.shadowOffsetY = 10;
ctx.fillStyle = '#ffffff';
fillRoundedRect(ctx, searchX, searchY, searchWidth, searchHeight, 30);
ctx.fill();
ctx.restore();
// Search Box Content
ctx.font = '24px Arial';
ctx.fillText('🔍', searchX + 25, searchY + 38);
ctx.font = '22px "Segoe UI", Arial, sans-serif';
ctx.fillStyle = '#333333';
const displayTopic = topic.length > 40 ? topic.substring(0, 40) + '...' : topic;
ctx.fillText(displayTopic, searchX + 70, searchY + 38);
// Extra Search Tool Icons
ctx.font = '22px Arial';
ctx.fillText('🎤', searchX + searchWidth - 85, searchY + 38);
ctx.fillText('📷', searchX + searchWidth - 45, searchY + 38);
// 4. Results Section Header
ctx.font = 'bold 28px "Segoe UI", Arial, sans-serif';
ctx.fillStyle = '#ffffff';
ctx.fillText('Search Results: ' + displayTopic, 80, 280);
// 5. Draw Mediateka Image Grid (Variations of the uploaded image)
const cardW = 230;
const cardH = 360;
const startX = 80;
const startY = 320;
const gap = 40;
const variations = [
{ name: "Original Asset", filter: "none", rating: "4.9 ★", dls: "1.2k" },
{ name: "Vivid Enhanced", filter: "contrast(1.3) saturate(1.5)", rating: "5.0 ★", dls: "890" },
{ name: "Cinematic Warm", filter: "sepia(0.3) hue-rotate(-10deg) contrast(1.1)", rating: "4.7 ★", dls: "450" },
{ name: "Noir Grayscale", filter: "grayscale(100%) contrast(1.4)", rating: "4.8 ★", dls: "2.1k" }
];
for (let i = 0; i < 4; i++) {
const cardX = startX + i * (cardW + gap);
const cardY = startY;
// Card container + Drop Shadow
ctx.save();
ctx.shadowColor = 'rgba(0, 0, 0, 0.6)';
ctx.shadowBlur = 15;
ctx.shadowOffsetY = 8;
ctx.fillStyle = '#ffffff';
fillRoundedRect(ctx, cardX, cardY, cardW, cardH, 15);
ctx.fill();
ctx.restore();
// Card Image (clipped to the top rounded corners)
ctx.save();
ctx.beginPath();
ctx.moveTo(cardX + 15, cardY);
ctx.lineTo(cardX + cardW - 15, cardY);
ctx.quadraticCurveTo(cardX + cardW, cardY, cardX + cardW, cardY + 15);
ctx.lineTo(cardX + cardW, cardY + 200); // Image slot height
ctx.lineTo(cardX, cardY + 200);
ctx.lineTo(cardX, cardY + 15);
ctx.quadraticCurveTo(cardX, cardY, cardX + 15, cardY);
ctx.closePath();
ctx.clip();
// Scale original image to cover the card's thumbnail slot
const imgScale = Math.max(cardW / originalImg.width, 200 / originalImg.height);
const ix = cardX + (cardW - originalImg.width * imgScale) / 2;
const iy = cardY + (200 - originalImg.height * imgScale) / 2;
ctx.filter = variations[i].filter;
ctx.drawImage(originalImg, ix, iy, originalImg.width * imgScale, originalImg.height * imgScale);
ctx.restore();
// Topic Overlay / Tag over image
const tagText = topic.length > 10 ? topic.substring(0, 10) + '...' : topic;
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
fillRoundedRect(ctx, cardX + 10, cardY + 10, 80, 24, 12);
ctx.fill();
ctx.fillStyle = '#ffffff';
ctx.font = 'bold 11px "Segoe UI", Arial, sans-serif';
ctx.fillText(tagText, cardX + 22, cardY + 26);
// Simulated "PRO" badge for some items
if (i === 1 || i === 3) {
ctx.fillStyle = accentColor;
fillRoundedRect(ctx, cardX + cardW - 45, cardY + 10, 35, 20, 4);
ctx.fill();
ctx.fillStyle = '#ffffff';
ctx.font = 'bold 10px Arial';
ctx.fillText('PRO', cardX + cardW - 38, cardY + 24);
}
// Card Text & Metadata
ctx.fillStyle = '#111111';
ctx.font = 'bold 18px "Segoe UI", Arial, sans-serif';
ctx.fillText(variations[i].name, cardX + 15, cardY + 235);
ctx.fillStyle = '#666666';
ctx.font = '14px "Segoe UI", Arial, sans-serif';
ctx.fillText("Resolution: " + originalImg.width + "x" + originalImg.height, cardX + 15, cardY + 265);
ctx.fillText("Format: Full Spectrum", cardX + 15, cardY + 285);
// Divider Line
ctx.fillStyle = '#eeeeee';
ctx.fillRect(cardX + 15, cardY + 305, cardW - 30, 1);
// Card Footer (Rating & Downloads)
ctx.fillStyle = accentColor;
ctx.font = 'bold 14px Arial';
ctx.fillText(variations[i].rating, cardX + 15, cardY + 335);
ctx.fillStyle = '#888888';
ctx.font = '12px "Segoe UI", Arial, sans-serif';
ctx.fillText(variations[i].dls + " Downloads", cardX + cardW - 95, cardY + 335);
}
return canvas;
}Apply Changes
