You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, themeColor = "#00FFCC", maxElements = 25, sensitivity = 50) {
const canvas = document.createElement('canvas');
const width = originalImg.width;
const height = originalImg.height;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
// Draw original image
ctx.drawImage(originalImg, 0, 0);
// Get image data for region analysis
const imgData = ctx.getImageData(0, 0, width, height);
const data = imgData.data;
// Determine grid block size based on image size
const blockSize = Math.max(20, Math.floor(Math.min(width, height) / 15));
// Draw the overall faint technical grid
ctx.strokeStyle = themeColor;
ctx.lineWidth = 1;
ctx.globalAlpha = 0.15;
for (let x = 0; x < width; x += blockSize) {
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, height); ctx.stroke();
}
for (let y = 0; y < height; y += blockSize) {
ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(width, y); ctx.stroke();
}
// Analyze regions of the image to find areas of high contrast/detail
// This simulates finding structural UI/UX elements
let regions = [];
const minVarianceThreshold = (101 - Math.max(1, Math.min(100, sensitivity))) * 15;
for (let y = 0; y < height - blockSize; y += blockSize) {
for (let x = 0; x < width - blockSize; x += blockSize) {
let sum = 0;
let sqSum = 0;
let pixels = 0;
// Sample pixels to calculate block variance (details/edges indicator)
for(let by = 0; by < blockSize; by += 4) {
for(let bx = 0; bx < blockSize; bx += 4) {
const idx = ((y + by) * width + (x + bx)) * 4;
const r = data[idx];
const g = data[idx+1];
const b = data[idx+2];
// Convert to grayscale for contrast checking
const gray = 0.299 * r + 0.587 * g + 0.114 * b;
sum += gray;
sqSum += gray * gray;
pixels++;
}
}
const mean = sum / pixels;
const variance = (sqSum / pixels) - (mean * mean);
// If the region has enough detail, consider it a pseudo UI element
if (variance > minVarianceThreshold) {
regions.push({ x, y, size: blockSize, variance });
}
}
}
// Sort regions by most dense/high-variance and take top N elements
regions.sort((a, b) => b.variance - a.variance);
regions = regions.slice(0, maxElements);
// Overlay settings for the intrusion map
ctx.globalAlpha = 1.0;
ctx.textBaseline = "top";
// Draw Intrusion Elements (bounding boxes with labels)
regions.forEach((r, i) => {
const len = Math.floor(blockSize / 4);
ctx.strokeStyle = themeColor;
ctx.lineWidth = 2;
ctx.beginPath();
// Top Left
ctx.moveTo(r.x, r.y + len); ctx.lineTo(r.x, r.y); ctx.lineTo(r.x + len, r.y);
// Top Right
ctx.moveTo(r.x + r.size - len, r.y); ctx.lineTo(r.x + r.size, r.y); ctx.lineTo(r.x + r.size, r.y + len);
// Bottom Right
ctx.moveTo(r.x + r.size, r.y + r.size - len); ctx.lineTo(r.x + r.size, r.y + r.size); ctx.lineTo(r.x + r.size - len, r.y + r.size);
// Bottom Left
ctx.moveTo(r.x + len, r.y + r.size); ctx.lineTo(r.x, r.y + r.size); ctx.lineTo(r.x, r.y + r.size - len);
ctx.stroke();
// Inner highlight
ctx.fillStyle = themeColor;
ctx.globalAlpha = 0.15;
ctx.fillRect(r.x, r.y, r.size, r.size);
// Center reticle dot
ctx.globalAlpha = 0.8;
ctx.beginPath();
ctx.arc(r.x + r.size / 2, r.y + r.size / 2, 2, 0, Math.PI * 2);
ctx.fill();
// Technical readout labels for each bounding box
ctx.globalAlpha = 0.9;
const text = `NODE.${i.toString().padStart(2, '0')}`;
ctx.font = "10px monospace";
const tw = ctx.measureText(text).width;
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
ctx.fillRect(r.x, r.y - 12, tw + 4, 12);
ctx.fillStyle = themeColor;
ctx.fillText(text, r.x + 2, r.y - 11);
});
// Main HUD Frame
ctx.globalAlpha = 0.7;
ctx.strokeStyle = themeColor;
ctx.lineWidth = 3;
ctx.strokeRect(10, 10, width - 20, height - 20);
// Inner HUD details (corners)
const cornerSize = 20;
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(10, 10 + cornerSize); ctx.lineTo(10, 10); ctx.lineTo(10 + cornerSize, 10);
ctx.moveTo(width - 10 - cornerSize, 10); ctx.lineTo(width - 10, 10); ctx.lineTo(width - 10, 10 + cornerSize);
ctx.moveTo(width - 10, height - 10 - cornerSize); ctx.lineTo(width - 10, height - 10); ctx.lineTo(width - 10 - cornerSize, height - 10);
ctx.moveTo(10 + cornerSize, height - 10); ctx.lineTo(10, height - 10); ctx.lineTo(10, height - 10 - cornerSize);
ctx.stroke();
// System Analysis info display box
const infoBoxW = Math.min(260, width - 40);
ctx.fillStyle = "rgba(0, 0, 0, 0.75)";
ctx.fillRect(15, 15, infoBoxW, 100);
ctx.fillStyle = themeColor;
ctx.font = "bold 14px monospace";
ctx.fillText("UI/UX INTRUSION SYSTEM", 25, 25);
ctx.font = "12px monospace";
ctx.fillText(`TARGET DIM : ${width}x${height}px`, 25, 45);
ctx.fillText(`BLOCK SIZE : ${blockSize}px`, 25, 60);
ctx.fillText(`NODES FOUND: ${regions.length}`, 25, 75);
ctx.fillText(`STATUS : INTRUSION ACTIVE`, 25, 90);
// Center screen reticle
ctx.globalAlpha = 0.4;
ctx.lineWidth = 1;
ctx.strokeStyle = themeColor;
ctx.beginPath();
ctx.moveTo(width / 2 - 30, height / 2); ctx.lineTo(width / 2 + 30, height / 2);
ctx.moveTo(width / 2, height / 2 - 30); ctx.lineTo(width / 2, height / 2 + 30);
ctx.stroke();
ctx.beginPath();
ctx.arc(width / 2, height / 2, 15, 0, Math.PI * 2);
ctx.stroke();
ctx.beginPath();
ctx.arc(width / 2, height / 2, 2, 0, Math.PI * 2);
ctx.fill();
// Cinematic Scanline Effect for the "UI Analyzer screen" look
ctx.globalAlpha = 0.1;
ctx.fillStyle = '#000000';
for (let y = 0; y < height; y += 3) {
ctx.fillRect(0, y, width, 1);
}
return canvas;
}Apply Changes
