You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, colorCount = 5) {
// Ensure parameters are correct types
colorCount = parseInt(colorCount, 10) || 5;
// Create the main container element
const container = document.createElement('div');
container.style.fontFamily = 'Segoe UI, Roboto, Helvetica, Arial, sans-serif';
container.style.margin = '10px auto';
container.style.padding = '25px';
container.style.border = '1px solid #e0e0e0';
container.style.borderRadius = '12px';
container.style.backgroundColor = '#ffffff';
container.style.color = '#333333';
container.style.maxWidth = '850px';
container.style.boxShadow = '0 4px 12px rgba(0,0,0,0.05)';
// Header
const header = document.createElement('h2');
header.textContent = 'Image Idea Generator & Search Tool';
header.style.marginTop = '0';
header.style.marginBottom = '20px';
header.style.color = '#1a1a1a';
header.style.borderBottom = '2px solid #f0f0f0';
header.style.paddingBottom = '10px';
container.appendChild(header);
// Flex layout for image thumbnail and analysis details
const content = document.createElement('div');
content.style.display = 'flex';
content.style.gap = '30px';
content.style.flexWrap = 'wrap';
container.appendChild(content);
// Image Canvas (Thumbnail)
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const MAX_DIM = 280;
let w = originalImg.width;
let h = originalImg.height;
// Scale down for thumbnail display
if (w > MAX_DIM || h > MAX_DIM) {
if (w > h) {
h = Math.round((MAX_DIM / w) * h);
w = MAX_DIM;
} else {
w = Math.round((MAX_DIM / h) * w);
h = MAX_DIM;
}
}
canvas.width = w;
canvas.height = h;
canvas.style.border = '1px solid #e8e8e8';
canvas.style.borderRadius = '8px';
canvas.style.objectFit = 'contain';
canvas.style.backgroundColor = '#fafafa';
ctx.drawImage(originalImg, 0, 0, w, h);
const imageContainer = document.createElement('div');
imageContainer.appendChild(canvas);
content.appendChild(imageContainer);
// Details column
const details = document.createElement('div');
details.style.flex = '1';
details.style.minWidth = '300px';
content.appendChild(details);
// Hidden canvas for full resolution analysis
const origCanvas = document.createElement('canvas');
origCanvas.width = originalImg.width;
origCanvas.height = originalImg.height;
const origCtx = origCanvas.getContext('2d');
origCtx.drawImage(originalImg, 0, 0);
const imgData = origCtx.getImageData(0, 0, origCanvas.width, origCanvas.height).data;
let totalR = 0, totalG = 0, totalB = 0;
let colorMap = {};
let count = 0;
// Sample pixels for color extraction and theme detection
for (let i = 0; i < imgData.length; i += 16) { // step by 4 pixels to improve performance
let r = imgData[i];
let g = imgData[i + 1];
let b = imgData[i + 2];
let a = imgData[i + 3];
if (a < 128) continue; // Skip mostly transparent pixels
totalR += r;
totalG += g;
totalB += b;
count++;
// Group similar colors together
let rGroup = Math.min(255, Math.round(r / 32) * 32);
let gGroup = Math.min(255, Math.round(g / 32) * 32);
let bGroup = Math.min(255, Math.round(b / 32) * 32);
let key = `${rGroup},${gGroup},${bGroup}`;
colorMap[key] = (colorMap[key] || 0) + 1;
}
if (count > 0) {
totalR = Math.round(totalR / count);
totalG = Math.round(totalG / count);
totalB = Math.round(totalB / count);
}
// Calculate brightness to determine mood/theme
let brightness = Math.round((totalR * 299 + totalG * 587 + totalB * 114) / 1000);
// Sort grouped colors and get the top requests
let sortedColors = Object.entries(colorMap)
.sort((a, b) => b[1] - a[1])
.slice(0, colorCount)
.map(c => c[0]);
// Generator Idea Section
const ideaSection = document.createElement('div');
ideaSection.style.marginBottom = '25px';
let ratio = originalImg.width / originalImg.height;
let orientation = ratio > 1.1 ? "Landscape" : (ratio < 0.9 ? "Portrait" : "Square");
let theme = brightness < 128 ? "Dark & moody" : "Light & vibrant";
let useCase = "";
if (orientation === 'Landscape') {
useCase = "Ideal for desktop backgrounds, website hero sections, wide banners, cinematic frames, or video thumbnails.";
} else if (orientation === 'Portrait') {
useCase = "Perfect for mobile application interfaces, Pinterest pins, Instagram stories, or print poster designs.";
} else {
useCase = "Great for social media feeds, profile portraits, grid layouts, icon designs, or album covers.";
}
ideaSection.innerHTML = `
<h3 style="margin-top: 0; margin-bottom: 15px; color: #333;">Generator Idea</h3>
<p style="margin: 5px 0; font-size: 14px;"><strong>Format:</strong> ${orientation} (${originalImg.width} × ${originalImg.height}px)</p>
<p style="margin: 5px 0; font-size: 14px;"><strong>Visual Vibe:</strong> ${theme} aesthetic</p>
<p style="margin: 5px 0; font-size: 14px; line-height: 1.5;"><strong>Design Suggestions:</strong> ${useCase}</p>
`;
details.appendChild(ideaSection);
// Color Palette Extraction
const paletteContainer = document.createElement('div');
paletteContainer.innerHTML = '<strong style="font-size: 14px;">Extracted Color Theme:</strong>';
const colorBoxContainer = document.createElement('div');
colorBoxContainer.style.display = 'flex';
colorBoxContainer.style.gap = '8px';
colorBoxContainer.style.marginTop = '10px';
colorBoxContainer.style.marginBottom = '20px';
sortedColors.forEach(rgb => {
const cBox = document.createElement('div');
cBox.style.width = '35px';
cBox.style.height = '35px';
cBox.style.backgroundColor = `rgb(${rgb})`;
cBox.style.borderRadius = '6px';
cBox.style.border = '1px solid rgba(0,0,0,0.1)';
cBox.style.boxShadow = '0 2px 5px rgba(0,0,0,0.08)';
cBox.title = `rgb(${rgb})`;
colorBoxContainer.appendChild(cBox);
});
paletteContainer.appendChild(colorBoxContainer);
details.appendChild(paletteContainer);
// Search Tools Section Builder
const searchSection = document.createElement('div');
searchSection.style.paddingTop = '15px';
searchSection.style.borderTop = '1px solid #f0f0f0';
searchSection.innerHTML = `
<h3 style="margin-top: 0; margin-bottom: 5px; color: #333;">All Search Tools</h3>
<p style="font-size: 13px; color: #666; margin-bottom: 15px; line-height: 1.4;">
Processing Your Request... Use these tools to find visually similar images, reverse search origins, or find higher resolutions.
</p>
`;
const buttonContainer = document.createElement('div');
buttonContainer.style.display = 'flex';
buttonContainer.style.gap = '10px';
buttonContainer.style.flexWrap = 'wrap';
const engines = [
{ name: 'Google Images', url: 'https://images.google.com/', color: '#4285F4' },
{ name: 'Bing Visual', url: 'https://www.bing.com/visualsearch', color: '#00809D' },
{ name: 'TinEye', url: 'https://tineye.com/', color: '#14467c' },
{ name: 'Yandex', url: 'https://yandex.com/images/', color: '#FC3F1D' }
];
engines.forEach(eng => {
const btn = document.createElement('a');
btn.href = eng.url;
btn.target = '_blank';
btn.textContent = `Search on ${eng.name}`;
btn.style.padding = '8px 16px';
btn.style.backgroundColor = eng.color;
btn.style.color = '#ffffff';
btn.style.textDecoration = 'none';
btn.style.borderRadius = '6px';
btn.style.fontSize = '13px';
btn.style.fontWeight = '500';
btn.style.transition = 'opacity 0.2s ease';
btn.addEventListener('mouseover', () => btn.style.opacity = '0.85');
btn.addEventListener('mouseout', () => btn.style.opacity = '1');
buttonContainer.appendChild(btn);
});
searchSection.appendChild(buttonContainer);
details.appendChild(searchSection);
return container;
}Apply Changes
