You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, scannerColor = "#00ffcc", overlayTitle = "ЛОГОТИП / CORPID SCAN ID", scanLinesCount = 50, scanConfidence = "98.7%") {
// Reformat inputs
const linesCount = parseInt(scanLinesCount, 10) || 50;
// Create Canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const W = originalImg.width;
const H = originalImg.height;
canvas.width = W;
canvas.height = H;
// Draw background (in case of transparent PNG)
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, W, H);
// Draw original image
ctx.drawImage(originalImg, 0, 0);
// Heuristics to find the TV logo.
// We will analyze the 4 corners of the image, as TV logos are typically placed there.
// We will use standard deviation of pixel brightness to find the most "contrasty" corner.
const cw = Math.floor(W * 0.20);
const ch = Math.floor(H * 0.20);
const padX = Math.floor(W * 0.05);
const padY = Math.floor(H * 0.05);
const corners = [
{ name: "TOP-LEFT", x: padX, y: padY, w: cw, h: ch },
{ name: "TOP-RIGHT", x: W - cw - padX, y: padY, w: cw, h: ch },
{ name: "BOTTOM-LEFT", x: padX, y: H - ch - padY, w: cw, h: ch },
{ name: "BOTTOM-RIGHT", x: W - cw - padX, y: H - ch - padY, w: cw, h: ch }
];
let bestCorner = corners[1]; // Default to Top-Right
let maxVar = -1;
try {
const imgData = ctx.getImageData(0, 0, W, H);
const data = imgData.data;
for (const c of corners) {
let sum = 0;
let sqSum = 0;
let count = 0;
for (let y = c.y; y < c.y + c.h; y++) {
for (let x = c.x; x < c.x + c.w; x++) {
const idx = (y * W + x) * 4;
const r = data[idx];
const g = data[idx + 1];
const b = data[idx + 2];
// Grayscale conversion
const gray = 0.299 * r + 0.587 * g + 0.114 * b;
sum += gray;
sqSum += gray * gray;
count++;
}
}
if (count > 0) {
const mean = sum / count;
const variance = Math.max(0, (sqSum / count) - (mean * mean));
if (variance > maxVar) {
maxVar = variance;
bestCorner = c;
}
}
}
} catch (e) {
// Fallback if image has cross-origin restrictions preventing getImageData
console.warn("CORS issue detected. Defaulting to Top-Right corner for logo identification.");
bestCorner = corners[1];
}
// DRAW HUD OVERLAY
// 1. Darken the non-selected areas slightly to emphasize scanning process
ctx.globalAlpha = 0.3;
ctx.fillStyle = "#001122";
ctx.fillRect(0, 0, W, H);
ctx.globalAlpha = 1.0;
// 2. Vintage CRT / Scanlines effect over the image
ctx.globalAlpha = 0.15;
ctx.fillStyle = "#000000";
const lineThickness = Math.max(1, Math.floor(H / (linesCount * 2)));
for (let y = 0; y < H; y += Math.max(2, Math.floor(H / linesCount))) {
ctx.fillRect(0, y, W, lineThickness);
}
ctx.globalAlpha = 1.0;
// 3. Draw scanning bounding box around detected logo
const { x, y, w, h } = bestCorner;
const len = Math.max(10, Math.floor(Math.min(W, H) * 0.05));
ctx.strokeStyle = scannerColor;
ctx.lineWidth = Math.max(2, Math.floor(W * 0.005));
ctx.lineJoin = "round";
ctx.beginPath();
// Top-Left corner of box
ctx.moveTo(x, y + len); ctx.lineTo(x, y); ctx.lineTo(x + len, y);
// Top-Right corner of box
ctx.moveTo(x + w - len, y); ctx.lineTo(x + w, y); ctx.lineTo(x + w, y + len);
// Bottom-Right corner of box
ctx.moveTo(x + w, y + h - len); ctx.lineTo(x + w, y + h); ctx.lineTo(x + w - len, y + h);
// Bottom-Left corner of box
ctx.moveTo(x, y + h - len); ctx.lineTo(x, y + h); ctx.lineTo(x + len, y + h);
ctx.stroke();
// Box Scanner Tint Overlay
ctx.globalAlpha = 0.15;
ctx.fillStyle = scannerColor;
ctx.fillRect(x, y, w, h);
ctx.globalAlpha = 1.0;
// Internal targets within the bounding box
ctx.beginPath();
ctx.moveTo(x + w / 2, y + h / 2 - len);
ctx.lineTo(x + w / 2, y + h / 2 + len);
ctx.moveTo(x + w / 2 - len, y + h / 2);
ctx.lineTo(x + w / 2 + len, y + h / 2);
ctx.lineWidth = 1;
ctx.stroke();
// 4. Text and Identification Data Overlay
const fontSize = Math.max(10, Math.floor(H * 0.025));
ctx.font = `bold ${fontSize}px "Courier New", Courier, monospace`;
ctx.fillStyle = scannerColor;
// General Main HUD Frame
const margin = Math.floor(Math.min(W, H) * 0.02);
ctx.lineWidth = Math.max(1, Math.floor(W * 0.002));
ctx.strokeRect(margin, margin, W - margin * 2, H - margin * 2);
// Title HUD
ctx.fillText(`[ ${overlayTitle} ]`, margin * 2, margin * 2 + fontSize);
// Target Info Placement Calculation
// Ensure text does not go off the screen
let tx = x + w + margin;
let ty = y + margin + fontSize;
if (tx + fontSize * 15 > W) {
// Drop to left side if no space on right
tx = x - margin - (fontSize * 15);
}
// If somehow still off-screen, clamp it safely
tx = Math.max(margin * 2, Math.min(tx, W - (fontSize * 15)));
// Background block for text ease of reading
const textLines = [
`STATUS: IDENTIFIED`,
`SECTOR: ${bestCorner.name}`,
`CLASS : CORPORATE MARK`,
`MTCH %: ${scanConfidence}`
];
ctx.globalAlpha = 0.6;
ctx.fillStyle = "#000000";
ctx.fillRect(tx - margin/2, ty - fontSize*1.2, (fontSize * 14), (fontSize * 1.5 * textLines.length) + margin);
ctx.globalAlpha = 1.0;
ctx.fillStyle = scannerColor;
for (const infoLine of textLines) {
ctx.fillText(infoLine, tx, ty);
ty += fontSize * 1.5;
}
// 5. Draw horizontal scanner laser line
const laserY = Math.floor(H * 0.65);
ctx.beginPath();
ctx.moveTo(margin, laserY);
ctx.lineTo(W - margin, laserY);
ctx.lineWidth = Math.max(2, Math.floor(H * 0.004));
ctx.stroke();
// Laser glow
const glowH = Math.max(10, Math.floor(H * 0.05));
const gradient = ctx.createLinearGradient(0, laserY - glowH, 0, laserY + glowH);
gradient.addColorStop(0, "transparent"); // transparent hex fallback not strictly safe everywhere, use rgba 0
gradient.addColorStop(0, "rgba(0,0,0,0)");
// Parse scanner color to apply alpha (if possible, fallback to globalAlpha)
ctx.globalAlpha = 0.4;
ctx.fillStyle = scannerColor;
ctx.fillRect(margin, laserY - glowH, W - margin*2, glowH * 2);
ctx.globalAlpha = 1.0;
return canvas;
}Apply Changes
