You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(
originalImg,
text = "Обработка Веб интерфейс сайт адрес запроса\nProcessing Your Requect...",
url = "https://network.local/sys/web-request",
theme = "dark",
progress = 73
) {
// Determine dimensions based on original image
const canvas = document.createElement('canvas');
canvas.width = originalImg.width;
canvas.height = originalImg.height;
const ctx = canvas.getContext('2d');
// Draw the original image as the background
ctx.drawImage(originalImg, 0, 0);
// Apply a dimming overlay
const isDark = theme.toLowerCase() !== 'light';
ctx.fillStyle = isDark ? 'rgba(0, 0, 0, 0.75)' : 'rgba(255, 255, 255, 0.75)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Calculate simulated web interface/terminal window dimensions
let winWidth = Math.max(250, Math.min(canvas.width * 0.85, 800));
let winHeight = Math.max(150, Math.min(canvas.height * 0.85, 550));
// Fallback clamps for extremely small images
if (winWidth > canvas.width) winWidth = canvas.width * 0.95;
if (winHeight > canvas.height) winHeight = canvas.height * 0.95;
const winX = (canvas.width - winWidth) / 2;
const winY = (canvas.height - winHeight) / 2;
// Helper for drawing rounded rectangles (maximum browser compatibility)
function drawRoundRect(ctx, x, y, w, h, radius) {
let r = { tl: 0, tr: 0, br: 0, bl: 0 };
if (typeof radius === 'number') {
r = { tl: radius, tr: radius, br: radius, bl: radius };
} else if (Array.isArray(radius)) {
r = { tl: radius[0] ?? 0, tr: radius[1] ?? 0, br: radius[2] ?? 0, bl: radius[3] ?? 0 };
}
ctx.beginPath();
ctx.moveTo(x + r.tl, y);
ctx.lineTo(x + w - r.tr, y);
ctx.quadraticCurveTo(x + w, y, x + w, y + r.tr);
ctx.lineTo(x + w, y + h - r.br);
ctx.quadraticCurveTo(x + w, y + h, x + w - r.br, y + h);
ctx.lineTo(x + r.bl, y + h);
ctx.quadraticCurveTo(x, y + h, x, y + h - r.bl);
ctx.lineTo(x, y + r.tl);
ctx.quadraticCurveTo(x, y, x + r.tl, y);
ctx.closePath();
}
// Draw Window shadow
ctx.shadowColor = 'rgba(0, 0, 0, 0.4)';
ctx.shadowBlur = 20;
ctx.shadowOffsetY = 10;
// Draw Window base
ctx.fillStyle = isDark ? '#121212' : '#f9fafb';
drawRoundRect(ctx, winX, winY, winWidth, winHeight, 8);
ctx.fill();
// Reset shadow
ctx.shadowColor = 'transparent';
ctx.shadowBlur = 0;
ctx.shadowOffsetY = 0;
// Draw Title bar
const titleH = Math.max(20, Math.min(40, winHeight * 0.15));
ctx.fillStyle = isDark ? '#262626' : '#e5e7eb';
drawRoundRect(ctx, winX, winY, winWidth, titleH, [8, 8, 0, 0]);
ctx.fill();
// Draw Mac-style control buttons on the left
const btnRadius = titleH * 0.2;
const btnY = winY + titleH / 2;
const colors = ['#ff5f56', '#ffbd2e', '#27c93f'];
for (let i = 0; i < 3; i++) {
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.arc(winX + btnRadius * 2 + i * (btnRadius * 3), btnY, btnRadius, 0, Math.PI * 2);
ctx.fill();
}
// Draw Address/URL Bar in the title bar area
const addrX = winX + btnRadius * 11;
const addrY = winY + titleH * 0.2;
const addrW = winWidth - addrX - btnRadius * 3;
const addrH = titleH * 0.6;
if (addrW > 50) { // Only draw if we have space
ctx.fillStyle = isDark ? '#000000' : '#ffffff';
drawRoundRect(ctx, addrX, addrY, addrW, addrH, 4);
ctx.fill();
const addrFontSize = Math.max(8, addrH * 0.6);
ctx.font = `${addrFontSize}px sans-serif`;
ctx.fillStyle = isDark ? '#9ca3af' : '#6b7280';
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
// Truncate URL if it's too long visual-wise
let displayUrl = url;
if (displayUrl.length > addrW / (addrFontSize * 0.6)) {
displayUrl = displayUrl.substring(0, Math.floor(addrW / (addrFontSize * 0.6))) + '...';
}
ctx.fillText(displayUrl, addrX + Math.max(5, addrH * 0.2), addrY + addrH / 2 + 1);
}
// Setup terminal interior coordinates
const contentX = winX + 15;
const contentY = winY + titleH + 15;
const contentW = winWidth - 30;
const contentH = winHeight - titleH - 30;
// Use clipping to ensure text doesn't flow out of the window border
ctx.save();
ctx.beginPath();
ctx.rect(contentX, contentY - 10, contentW, contentH + 20);
ctx.clip();
// Configure text styles
const fontSizeContent = Math.max(10, Math.min(18, winWidth * 0.04));
ctx.font = `${fontSizeContent}px "Courier New", Courier, monospace`;
ctx.fillStyle = isDark ? '#22c55e' : '#111827';
ctx.textBaseline = 'top';
// Generate terminal output lines
const progClamped = Math.max(0, Math.min(100, progress));
const termLines = [
`> Requesting connection to ${url}`,
"> Resolving host address...",
"> 200 OK - Secure Socket Established",
"> "
];
// Inject user provided description split by new lines
const userLines = text.split('\n');
for (const line of userLines) {
termLines.push("> " + line);
}
// Create ASCII Progress bar
const barLength = 20;
const filled = Math.round((progClamped / 100) * barLength);
const barString = "█".repeat(filled) + "░".repeat(barLength - filled);
termLines.push("> ");
termLines.push(`> [${barString}] ${progClamped}%`);
termLines.push("> ");
termLines.push(progClamped >= 100 ? "> Process Complete." : "> Please wait for operation to finish...");
termLines.push("█"); // Blinking cursor visual
// Draw text lines
let currentY = contentY;
const lineSpacing = fontSizeContent * 1.5;
for (let line of termLines) {
// Very basic visual truncation for raw terminal bounds
let renderedLine = line;
const maxChars = Math.floor(contentW / (fontSizeContent * 0.6));
if (renderedLine.length > maxChars) {
renderedLine = renderedLine.substring(0, maxChars - 3) + '...';
}
ctx.fillText(renderedLine, contentX, currentY);
currentY += lineSpacing;
// Stop drawing if we exceed the bottom height of the inner window viewport
if (currentY > contentY + contentH) {
break;
}
}
ctx.restore();
return canvas;
}Apply Changes
