You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, uiTheme = 'Mac', backgroundStyle = 'Gradient', windowTitle = 'Image File Search Creator', searchAddress = 'search://local/folders/images', fileName = 'result_image.png') {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Extract image dimensions robustly
const imgW = originalImg.naturalWidth || originalImg.width || 800;
const imgH = originalImg.naturalHeight || originalImg.height || 600;
// Constraint limits for the embedded image to avoid massive memory usage
const MAX_IMG_W = 900;
const MAX_IMG_H = 650;
const scale = Math.min(MAX_IMG_W / Math.max(1, imgW), MAX_IMG_H / Math.max(1, imgH), 1);
const scaledImgW = imgW * scale;
const scaledImgH = imgH * scale;
// UI Configuration & Dimensions
const sidebarWidth = 240;
const topbarHeight = 60;
const outerPadding = 60;
const innerPadding = 40;
const minMainW = 550;
const minMainH = 450;
// Calculate dynamic UI sizes based on image
const finalMainW = Math.max(minMainW, scaledImgW + innerPadding * 2);
const finalMainH = Math.max(minMainH, scaledImgH + innerPadding * 2 + 40); // Additional space for file name
const canvasW = sidebarWidth + finalMainW;
const canvasH = topbarHeight + finalMainH;
const fullW = canvasW + outerPadding * 2;
const fullH = canvasH + outerPadding * 2;
canvas.width = fullW;
canvas.height = fullH;
// Helper Function: Draw Rounded Rectangle
function drawRoundRect(x, y, w, h, r) {
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
ctx.quadraticCurveTo(x + w, y, x + w, y + r);
ctx.lineTo(x + w, y + h - r);
ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
ctx.lineTo(x + r, y + h);
ctx.quadraticCurveTo(x, y + h, x, y + h - r);
ctx.lineTo(x, y + r);
ctx.quadraticCurveTo(x, y, x + r, y);
ctx.closePath();
}
// 1. Draw Workspace Background
if (backgroundStyle.toLowerCase() === 'gradient') {
const grad = ctx.createLinearGradient(0, 0, fullW, fullH);
grad.addColorStop(0, '#fbc2eb');
grad.addColorStop(1, '#a6c1ee');
ctx.fillStyle = grad;
} else {
ctx.fillStyle = backgroundStyle || '#e5e7eb';
}
ctx.fillRect(0, 0, fullW, fullH);
// 2. Draw Window Base Shadow
ctx.shadowColor = 'rgba(0, 0, 0, 0.4)';
ctx.shadowBlur = 40;
ctx.shadowOffsetY = 15;
// 3. Draw Window Background Frame
drawRoundRect(outerPadding, outerPadding, canvasW, canvasH, 12);
ctx.fillStyle = '#ffffff';
ctx.fill();
// Reset shadow
ctx.shadowColor = 'transparent';
// Enable soft clipping for inner window elements
ctx.save();
drawRoundRect(outerPadding, outerPadding, canvasW, canvasH, 12);
ctx.clip();
const isWin = uiTheme.toLowerCase() === 'windows';
// 4. Draw Left Sidebar
ctx.fillStyle = isWin ? '#f9fafb' : '#f3f4f6';
ctx.fillRect(outerPadding, outerPadding + topbarHeight, sidebarWidth, canvasH - topbarHeight);
// Sidebar separator line
ctx.strokeStyle = '#e5e7eb';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(outerPadding + sidebarWidth, outerPadding + topbarHeight);
ctx.lineTo(outerPadding + sidebarWidth, outerPadding + canvasH);
ctx.stroke();
// 5. Draw Topbar
ctx.fillStyle = isWin ? '#ffffff' : '#f9fafb';
ctx.fillRect(outerPadding, outerPadding, canvasW, topbarHeight);
// Topbar separator line
ctx.beginPath();
ctx.moveTo(outerPadding, outerPadding + topbarHeight);
ctx.lineTo(outerPadding + canvasW, outerPadding + topbarHeight);
ctx.stroke();
ctx.textBaseline = 'middle';
// 6. Draw Window Controls and Title
if (isWin) {
// Windows Title
ctx.fillStyle = '#374151';
ctx.font = '14px "Segoe UI", Tahoma, Geneva, Verdana, sans-serif';
ctx.textAlign = 'left';
ctx.fillText(windowTitle, outerPadding + 15, outerPadding + topbarHeight / 2);
// Windows Control Buttons
const ctrlW = 46;
const startX = outerPadding + canvasW - ctrlW * 3;
ctx.strokeStyle = '#6b7280';
ctx.lineWidth = 1;
// Minimize
ctx.beginPath(); ctx.moveTo(startX + 18, outerPadding + topbarHeight / 2); ctx.lineTo(startX + 28, outerPadding + topbarHeight / 2); ctx.stroke();
// Maximize
ctx.strokeRect(startX + ctrlW + 18, outerPadding + topbarHeight / 2 - 5, 10, 10);
// Close (X)
ctx.beginPath(); ctx.moveTo(startX + ctrlW * 2 + 18, outerPadding + topbarHeight / 2 - 5); ctx.lineTo(startX + ctrlW * 2 + 28, outerPadding + topbarHeight / 2 + 5); ctx.stroke();
ctx.beginPath(); ctx.moveTo(startX + ctrlW * 2 + 28, outerPadding + topbarHeight / 2 - 5); ctx.lineTo(startX + ctrlW * 2 + 18, outerPadding + topbarHeight / 2 + 5); ctx.stroke();
} else {
// Mac Control Buttons
const colors = ['#ff5f56', '#ffbd2e', '#27c93f'];
colors.forEach((c, i) => {
ctx.fillStyle = c;
ctx.beginPath();
ctx.arc(outerPadding + 22 + i * 20, outerPadding + topbarHeight / 2, 6, 0, Math.PI * 2);
ctx.fill();
});
// Mac Title
ctx.fillStyle = '#374151';
ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif';
ctx.textAlign = 'center';
ctx.fillText(windowTitle, outerPadding + canvasW / 2, outerPadding + topbarHeight / 2);
}
// 7. Draw Search/Address Bar
const searchW = Math.min(320, canvasW * 0.35);
const searchH = 30;
const searchX = outerPadding + canvasW - searchW - (isWin ? 160 : 20);
const searchY = outerPadding + (topbarHeight - searchH) / 2;
drawRoundRect(searchX, searchY, searchW, searchH, 6);
ctx.fillStyle = isWin ? '#f3f4f6' : '#e5e7eb';
ctx.fill();
ctx.fillStyle = '#6b7280';
ctx.font = '13px sans-serif';
ctx.textAlign = 'left';
ctx.fillText("🔍 " + searchAddress, searchX + 12, searchY + searchH / 2 + 1);
// 8. Draw Sidebar Content Options
const sidebarItems = [
{ type: 'header', text: 'Favorites' },
{ type: 'item', text: '⭐ Desktop' },
{ type: 'item', text: '📁 Documents' },
{ type: 'item', text: '⬇️ Downloads' },
{ type: 'item', text: '🖼️ Pictures' },
{ type: 'space', text: '' },
{ type: 'header', text: 'Search Results' },
{ type: 'active', text: '📄 ' + fileName }
];
let startY = outerPadding + topbarHeight + 20;
sidebarItems.forEach(si => {
if (si.type === 'space') {
startY += 15;
} else if (si.type === 'header') {
ctx.fillStyle = '#9ca3af';
ctx.font = 'bold 12px sans-serif';
ctx.fillText(si.text, outerPadding + 20, startY + 10);
startY += 25;
} else if (si.type === 'active') {
ctx.fillStyle = isWin ? '#e5e7eb' : '#bfdbfe';
drawRoundRect(outerPadding + 10, startY, sidebarWidth - 20, 32, 6);
ctx.fill();
ctx.fillStyle = isWin ? '#111827' : '#1d4ed8';
ctx.font = 'bold 13px sans-serif';
ctx.fillText(si.text, outerPadding + 20, startY + 16);
startY += 32;
} else {
ctx.fillStyle = '#4b5563';
ctx.font = '13px sans-serif';
ctx.fillText(si.text, outerPadding + 20, startY + 16);
startY += 32;
}
});
// 9. Draw Main Display Area (Image + Label)
const mainX = outerPadding + sidebarWidth;
const mainY = outerPadding + topbarHeight;
const imgX = mainX + (finalMainW - scaledImgW) / 2;
const imgY = mainY + (finalMainH - scaledImgH) / 2 - 15;
// Image Shadow Core (Mocking a preview file card)
ctx.shadowColor = 'rgba(0, 0, 0, 0.15)';
ctx.shadowBlur = 15;
ctx.shadowOffsetY = 8;
ctx.drawImage(originalImg, imgX, imgY, scaledImgW, scaledImgH);
ctx.shadowColor = 'transparent';
// File Name Label below the image
ctx.fillStyle = '#374151';
ctx.font = '15px sans-serif';
ctx.textAlign = 'center';
ctx.fillText(fileName, imgX + scaledImgW / 2, imgY + scaledImgH + 30);
ctx.restore(); // Remove clipping region
return canvas;
}Apply Changes
