You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, themeColor = "#FF0000", scanSpeed = 2) {
// Determine the dominant color by sampling the image
const canvas = document.createElement('canvas');
canvas.width = originalImg.width;
canvas.height = originalImg.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(originalImg, 0, 0);
let r = 0, g = 0, b = 0, count = 0;
try {
const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
// Sample every 10th pixel for performance
for (let i = 0; i < data.length; i += 4 * 10) {
r += data[i];
g += data[i + 1];
b += data[i + 2];
count++;
}
r = Math.floor(r / count);
g = Math.floor(g / count);
b = Math.floor(b / count);
} catch (e) {
// Fallback if image is tainted by CORS
r = 255; g = 0; b = 0;
}
const dominantColor = `rgb(${r}, ${g}, ${b})`;
// Create the main container div
const container = document.createElement('div');
container.style.fontFamily = "'Roboto', sans-serif, Arial";
container.style.maxWidth = "400px";
container.style.margin = "0 auto";
container.style.border = "1px solid #e1e1e1";
container.style.borderRadius = "12px";
container.style.overflow = "hidden";
container.style.boxShadow = "0 8px 24px rgba(0,0,0,0.12)";
container.style.backgroundColor = "#ffffff";
// Inject CSS for animations and Google font
const style = document.createElement('style');
const animName = 'scanAnim_' + Math.random().toString(36).substring(2, 9);
style.innerHTML = `
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@keyframes ${animName} {
0% { top: -5%; opacity: 0; }
10% { opacity: 1; }
50% { opacity: 1; }
90% { opacity: 1; }
100% { top: 105%; opacity: 0; }
}
`;
container.appendChild(style);
// Header Area (YouTube Style)
const header = document.createElement('div');
header.style.backgroundColor = themeColor;
header.style.color = "#ffffff";
header.style.padding = "12px 16px";
header.style.fontWeight = "700";
header.style.fontSize = "16px";
header.style.display = "flex";
header.style.alignItems = "center";
header.style.gap = "10px";
header.innerHTML = `
<svg fill="#ffffff" width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M21.582,6.186c-0.23-0.86-0.908-1.538-1.768-1.768C18.254,4,12,4,12,4S5.746,4,4.186,4.418 c-0.86,0.23-1.538,0.908-1.768,1.768C2,7.746,2,12,2,12s0,4.254,0.418,5.814c0.23,0.86,0.908,1.538,1.768,1.768 C5.746,20,12,20,12,20s6.254,0,7.814-0.418c0.86-0.23,1.538-0.908,1.768-1.768C22,16.254,22,12,22,12S22,7.746,21.582,6.186z M10,15.464V8.536L16,12L10,15.464z"/>
</svg>
<span>Обзор & Сканер (Profile Scanner)</span>
`;
container.appendChild(header);
// Image & Scanning Visual Area
const imgArea = document.createElement('div');
imgArea.style.position = "relative";
imgArea.style.padding = "40px";
imgArea.style.display = "flex";
imgArea.style.justifyContent = "center";
imgArea.style.backgroundColor = "#f5f5f5";
imgArea.style.backgroundImage = "radial-gradient(#e5e5e5 1px, transparent 1px)";
imgArea.style.backgroundSize = "20px 20px";
const imgWrapper = document.createElement('div');
imgWrapper.style.position = "relative";
imgWrapper.style.width = "160px";
imgWrapper.style.height = "160px";
imgWrapper.style.borderRadius = "50%";
imgWrapper.style.overflow = "hidden";
imgWrapper.style.border = "4px solid #ffffff";
imgWrapper.style.boxShadow = "0 4px 14px rgba(0,0,0,0.15)";
const img = document.createElement('img');
img.src = originalImg.src;
img.style.width = "100%";
img.style.height = "100%";
img.style.objectFit = "cover";
imgWrapper.appendChild(img);
// Animated Scanner Laser
const scannerBeam = document.createElement('div');
scannerBeam.style.position = "absolute";
scannerBeam.style.left = "0";
scannerBeam.style.width = "100%";
scannerBeam.style.height = "2px";
scannerBeam.style.backgroundColor = themeColor;
scannerBeam.style.boxShadow = `0 0 8px ${themeColor}, 0 0 15px ${themeColor}`;
scannerBeam.style.animation = `${animName} ${scanSpeed}s linear infinite`;
imgWrapper.appendChild(scannerBeam);
imgArea.appendChild(imgWrapper);
container.appendChild(imgArea);
// Identification / Statistics Area
const statsArea = document.createElement('div');
statsArea.style.padding = "20px";
statsArea.style.backgroundColor = "#ffffff";
const title = document.createElement('h3');
title.innerText = "Идентификатор / Properties";
title.style.margin = "0 0 16px 0";
title.style.fontSize = "15px";
title.style.color = "#0f0f0f";
statsArea.appendChild(title);
const statsGrid = document.createElement('div');
statsGrid.style.display = "grid";
statsGrid.style.gridTemplateColumns = "1fr 1fr";
statsGrid.style.gap = "12px 16px";
const addStat = (label, value, isColor = false) => {
const item = document.createElement('div');
item.style.fontSize = "13px";
const l = document.createElement('div');
l.innerText = label;
l.style.color = "#606060";
l.style.marginBottom = "5px";
const v = document.createElement('div');
v.style.color = "#0f0f0f";
v.style.fontWeight = "500";
if (isColor) {
v.style.display = "flex";
v.style.alignItems = "center";
v.style.gap = "6px";
const colorBox = document.createElement('span');
colorBox.style.display = "inline-block";
colorBox.style.width = "14px";
colorBox.style.height = "14px";
colorBox.style.backgroundColor = value;
colorBox.style.border = "1px solid #d3d3d3";
colorBox.style.borderRadius = "3px";
v.appendChild(colorBox);
const t = document.createElement('span');
t.innerText = value;
v.appendChild(t);
} else {
v.innerText = value;
}
item.appendChild(l);
item.appendChild(v);
statsGrid.appendChild(item);
};
const aspectRatio = (originalImg.width / originalImg.height).toFixed(2);
const megapixels = ((originalImg.width * originalImg.height) / 1000000).toFixed(2);
addStat("Ширина (Width)", `${originalImg.width} px`);
addStat("Высота (Height)", `${originalImg.height} px`);
addStat("Формат (Aspect Ratio)", `${aspectRatio}:1`);
addStat("Разрешение (MP)", `${megapixels} MP`);
addStat("Цвет (Dominant Color)", dominantColor, true);
addStat("Статус (Status)", "Сканирование... (OK)");
statsArea.appendChild(statsGrid);
container.appendChild(statsArea);
return container;
}Apply Changes
