You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, thumbnailSizeStr = "120") {
const thumbSize = Number(thumbnailSizeStr) || 120;
// Create the main container for the UI
const container = document.createElement('div');
container.style.display = 'flex';
container.style.flexDirection = 'column';
container.style.alignItems = 'center';
container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
container.style.gap = '20px';
container.style.width = '100%';
container.style.boxSizing = 'border-box';
container.style.padding = '20px';
container.style.background = '#ffffff';
container.style.borderRadius = '12px';
container.style.boxShadow = '0 8px 24px rgba(0,0,0,0.05)';
// Header Title
const header = document.createElement('h2');
header.innerText = 'Full Image Collection Browser';
header.style.margin = '0';
header.style.color = '#2c3e50';
header.style.textAlign = 'center';
// Preview Section
const previewSection = document.createElement('div');
previewSection.style.display = 'flex';
previewSection.style.flexDirection = 'column';
previewSection.style.alignItems = 'center';
previewSection.style.gap = '15px';
previewSection.style.width = '100%';
// Title for active image variation
const title = document.createElement('h4');
title.innerText = 'Variation: Original';
title.style.margin = '0';
title.style.color = '#34495e';
title.style.fontSize = '18px';
// Calculate dimensions for the preview canvas
const largeCanvas = document.createElement('canvas');
const maxW = 800;
const maxH = 500;
const scale = Math.min(maxW / originalImg.width, maxH / originalImg.height, 1);
largeCanvas.width = Math.max(1, originalImg.width * scale);
largeCanvas.height = Math.max(1, originalImg.height * scale);
largeCanvas.style.border = '1px solid #e1e8ed';
largeCanvas.style.borderRadius = '8px';
largeCanvas.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
largeCanvas.style.maxWidth = '100%';
// Checkered background for images with transparency
largeCanvas.style.backgroundColor = '#ccc';
largeCanvas.style.backgroundImage = 'linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee)';
largeCanvas.style.backgroundSize = '20px 20px';
largeCanvas.style.backgroundPosition = '0 0, 10px 10px';
const ctx = largeCanvas.getContext('2d');
ctx.drawImage(originalImg, 0, 0, largeCanvas.width, largeCanvas.height);
// Download Button
const downloadBtn = document.createElement('button');
downloadBtn.innerText = 'Download Current Variation';
downloadBtn.style.padding = '10px 20px';
downloadBtn.style.cursor = 'pointer';
downloadBtn.style.border = 'none';
downloadBtn.style.borderRadius = '6px';
downloadBtn.style.background = '#3498db';
downloadBtn.style.color = '#FFF';
downloadBtn.style.fontSize = '14px';
downloadBtn.style.fontWeight = 'bold';
downloadBtn.style.transition = 'background 0.2s';
downloadBtn.onmouseover = () => downloadBtn.style.background = '#2980b9';
downloadBtn.onmouseout = () => downloadBtn.style.background = '#3498db';
downloadBtn.onclick = () => {
// Render at original resolution for download
const offCanvas = document.createElement('canvas');
offCanvas.width = originalImg.width;
offCanvas.height = originalImg.height;
const offCtx = offCanvas.getContext('2d');
offCtx.filter = ctx.filter;
offCtx.drawImage(originalImg, 0, 0);
const a = document.createElement('a');
a.href = offCanvas.toDataURL('image/png');
a.download = `collection_variation_${Date.now()}.png`;
a.click();
};
previewSection.appendChild(title);
previewSection.appendChild(largeCanvas);
previewSection.appendChild(downloadBtn);
// Thumbnail Collection Section
const thumbsWrapper = document.createElement('div');
thumbsWrapper.style.width = '100%';
const thumbsTitle = document.createElement('h4');
thumbsTitle.innerText = 'Browse Variations';
thumbsTitle.style.margin = '0 0 10px 0';
thumbsTitle.style.color = '#34495e';
thumbsTitle.style.textAlign = 'center';
const thumbsContainer = document.createElement('div');
thumbsContainer.style.display = 'flex';
thumbsContainer.style.flexWrap = 'wrap';
thumbsContainer.style.gap = '15px';
thumbsContainer.style.justifyContent = 'center';
thumbsContainer.style.padding = '20px';
thumbsContainer.style.background = '#f8f9fa';
thumbsContainer.style.border = '1px solid #e1e8ed';
thumbsContainer.style.borderRadius = '10px';
thumbsContainer.style.maxHeight = '400px';
thumbsContainer.style.overflowY = 'auto';
thumbsWrapper.appendChild(thumbsTitle);
thumbsWrapper.appendChild(thumbsContainer);
// Collection of filter-based variants
const filters = [
{ name: 'Original', value: 'none' },
{ name: 'Grayscale', value: 'grayscale(100%)' },
{ name: 'Vintage', value: 'sepia(80%) contrast(120%)' },
{ name: 'Noir', value: 'grayscale(100%) contrast(150%)' },
{ name: 'Invert', value: 'invert(100%)' },
{ name: 'Soft Blur', value: `blur(${Math.max(1, largeCanvas.width/150)}px)` },
{ name: 'Brighten', value: 'brightness(140%)' },
{ name: 'Darken', value: 'brightness(60%)' },
{ name: 'Contrast', value: 'contrast(180%)' },
{ name: 'Muted', value: 'contrast(60%) saturate(60%)' },
{ name: 'Neon', value: 'hue-rotate(90deg) saturate(300%)' },
{ name: 'Alien', value: 'hue-rotate(180deg)' },
{ name: 'Cyberpunk', value: 'hue-rotate(270deg) saturate(200%)' },
{ name: 'Vibrant', value: 'saturate(300%)' },
{ name: 'Washed Out', value: 'saturate(30%)' },
{ name: 'Warm Warmth', value: 'sepia(40%) hue-rotate(-20deg) saturate(130%)' },
{ name: 'Cool Breeze', value: 'sepia(30%) hue-rotate(150deg) saturate(120%)' },
{ name: 'Golden Hour', value: 'sepia(50%) brightness(110%) contrast(110%) hue-rotate(-10deg)' },
{ name: 'Midnight', value: 'brightness(70%) hue-rotate(200deg) saturate(120%)' }
];
filters.forEach(filter => {
const thumbDiv = document.createElement('div');
thumbDiv.style.cursor = 'pointer';
thumbDiv.style.display = 'flex';
thumbDiv.style.flexDirection = 'column';
thumbDiv.style.alignItems = 'center';
thumbDiv.style.gap = '8px';
thumbDiv.style.padding = '8px';
thumbDiv.style.borderRadius = '8px';
thumbDiv.style.transition = 'all 0.2s ease-in-out';
thumbDiv.style.background = '#ffffff';
thumbDiv.style.boxShadow = '0 2px 6px rgba(0,0,0,0.05)';
thumbDiv.style.outline = '3px solid transparent';
thumbDiv.onmouseover = () => {
thumbDiv.style.transform = 'translateY(-3px)';
thumbDiv.style.boxShadow = '0 6px 12px rgba(0,0,0,0.1)';
};
thumbDiv.onmouseout = () => {
thumbDiv.style.transform = 'translateY(0)';
thumbDiv.style.boxShadow = '0 2px 6px rgba(0,0,0,0.05)';
};
const thumbCanvas = document.createElement('canvas');
const tScale = Math.min(thumbSize / originalImg.width, thumbSize / originalImg.height);
thumbCanvas.width = Math.max(1, originalImg.width * tScale);
thumbCanvas.height = Math.max(1, originalImg.height * tScale);
thumbCanvas.style.borderRadius = '4px';
// Thumbnail generation
const tCtx = thumbCanvas.getContext('2d');
tCtx.filter = filter.value;
tCtx.drawImage(originalImg, 0, 0, thumbCanvas.width, thumbCanvas.height);
const lbl = document.createElement('span');
lbl.innerText = filter.name;
lbl.style.fontSize = '12px';
lbl.style.fontWeight = '500';
lbl.style.color = '#2c3e50';
thumbDiv.appendChild(thumbCanvas);
thumbDiv.appendChild(lbl);
thumbDiv.onclick = () => {
ctx.clearRect(0, 0, largeCanvas.width, largeCanvas.height);
ctx.filter = filter.value;
ctx.drawImage(originalImg, 0, 0, largeCanvas.width, largeCanvas.height);
title.innerText = `Variation: ${filter.name}`;
Array.from(thumbsContainer.children).forEach(c => {
c.style.outline = '3px solid transparent';
});
thumbDiv.style.outline = '3px solid #3498db';
};
// Select 'Original' variation initially
if (filter.name === 'Original') {
thumbDiv.style.outline = '3px solid #3498db';
}
thumbsContainer.appendChild(thumbDiv);
});
container.appendChild(header);
container.appendChild(previewSection);
container.appendChild(thumbsWrapper);
return container;
}Apply Changes
