You can edit the below JavaScript code to customize the image tool.
Apply Changes
async function processImage(originalImg, themeColor = "#00ffcc", enableAI = "1", confidenceThreshold = "0.4") {
const canvas = document.createElement('canvas');
canvas.width = originalImg.width;
canvas.height = originalImg.height;
const ctx = canvas.getContext('2d');
// Draw original
ctx.drawImage(originalImg, 0, 0);
// Dynamic Script Loader
const loadScript = (src, checkVar) => {
return new Promise((resolve, reject) => {
if (window[checkVar]) return resolve(window[checkVar]);
const script = document.createElement('script');
script.src = src;
script.onload = () => resolve(window[checkVar]);
script.onerror = reject;
document.head.appendChild(script);
});
};
// Helper: Draw Scanner Bounding Box
const drawScannerBox = (x, y, w, h, label, score) => {
// Bounding Box
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.lineWidth = 2;
ctx.strokeStyle = themeColor;
ctx.stroke();
// Crosshair corners
const len = Math.max(10, Math.min(w, h) * 0.15);
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(x, y + len); ctx.lineTo(x, y); ctx.lineTo(x + len, y);
ctx.moveTo(x + w - len, y); ctx.lineTo(x + w, y); ctx.lineTo(x + w, y + len);
ctx.moveTo(x + w, y + h - len); ctx.lineTo(x + w, y + h); ctx.lineTo(x + w - len, y + h);
ctx.moveTo(x + len, y + h); ctx.lineTo(x, y + h); ctx.lineTo(x, y + h - len);
ctx.stroke();
// Identifier Label Overlay
ctx.font = "bold 16px monospace";
const text = `${label} ${score ? '[' + score + ']' : ''}`;
const tw = ctx.measureText(text).width;
ctx.fillStyle = themeColor;
const boxY = (y - 25 < 0 ? y : y - 25);
ctx.fillRect(x, boxY, tw + 10, 25);
ctx.fillStyle = "#000000";
ctx.fillText(text, x + 5, boxY + 18);
};
// 1. Initial base visual layer: Scanlines and tint
ctx.fillStyle = "rgba(0, 0, 0, 0.15)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = themeColor;
ctx.globalAlpha = 0.15;
for (let i = 0; i < canvas.height; i += 5) {
ctx.fillRect(0, i, canvas.width, 1);
}
ctx.globalAlpha = 1.0;
let detected = false;
// 2. Try identifying via actual Object Detection AI Scanner
if (enableAI === "1") {
try {
// Draw loading state
ctx.fillStyle = themeColor;
ctx.font = "14px monospace";
ctx.fillText("Initializing Deep Scanner...", 10, 20);
// Load TF.js and Coco-SSD dynamically
await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.21.0/dist/tf.min.js', 'tf');
await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@2.2.2/dist/coco-ssd.min.js', 'cocoSsd');
// Clear loading text by recreating top portion
ctx.drawImage(originalImg, 0, 0, canvas.width, 30, 0, 0, canvas.width, 30);
ctx.fillStyle = "rgba(0, 0, 0, 0.15)";
ctx.fillRect(0, 0, canvas.width, 30);
ctx.fillStyle = themeColor;
ctx.globalAlpha = 0.15;
for (let i = 0; i < 30; i += 5) ctx.fillRect(0, i, canvas.width, 1);
ctx.globalAlpha = 1.0;
const model = await window.cocoSsd.load();
const predictions = await model.detect(canvas);
const threshold = parseFloat(confidenceThreshold);
if (predictions && predictions.length > 0) {
predictions.forEach(p => {
if (p.score > threshold) {
detected = true;
drawScannerBox(p.bbox[0], p.bbox[1], p.bbox[2], p.bbox[3], p.class.toUpperCase(), Math.round(p.score * 100) + "%");
}
});
}
} catch (e) {
console.warn("AI Load/Scan failed, falling back to basic analysis.", e);
}
}
// 3. Fallback: Edge / Transparency Isolation (Identifies Isolated Logo/Icon Form)
if (!detected) {
try {
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
const bgR = data[0], bgG = data[1], bgB = data[2];
// Assume top-left pixel is background; identify distinct pixels.
const isBg = (r, g, b, a) => {
if (a < 20) return true;
return Math.abs(r - bgR) < 30 && Math.abs(g - bgG) < 30 && Math.abs(b - bgB) < 30;
};
let minX = canvas.width, minY = canvas.height, maxX = 0, maxY = 0;
let found = false;
for (let y = 0; y < canvas.height; y++) {
for (let x = 0; x < canvas.width; x++) {
const idx = (y * canvas.width + x) * 4;
if (!isBg(data[idx], data[idx + 1], data[idx + 2], data[idx + 3])) {
if (x < minX) minX = x;
if (x > maxX) maxX = x;
if (y < minY) minY = y;
if (y > maxY) maxY = y;
found = true;
}
}
}
if (found && (maxX - minX > 20) && (maxY - minY > 20) && (maxX - minX < canvas.width * 0.95)) {
// Detected a distinct logo/icon region inside
const p = 15; // padding
minX = Math.max(0, minX - p);
minY = Math.max(0, minY - p);
const w = Math.min(canvas.width - minX, (maxX - minX) + p * 2);
const h = Math.min(canvas.height - minY, (maxY - minY) + p * 2);
drawScannerBox(minX, minY, w, h, "ISOLATED ICON", "EST");
} else {
// Ultimate fallback: Screen Center
const cx = canvas.width * 0.2;
const cy = canvas.height * 0.2;
const cw = canvas.width * 0.6;
const ch = canvas.height * 0.6;
drawScannerBox(cx, cy, cw, ch, "UNRECOGNIZED TARGET", "N/A");
}
} catch (e) {
// Catch cross-origin taint errors
const cx = canvas.width * 0.1;
const cy = canvas.height * 0.1;
drawScannerBox(cx, cy, canvas.width * 0.8, canvas.height * 0.8, "EXTERNAL SOURCE", "ERR");
}
}
// 4. Overlays: Sci-fi Crosshairs & HUD Elements
ctx.beginPath();
ctx.strokeStyle = themeColor;
ctx.globalAlpha = 0.4;
ctx.lineWidth = 1;
// Central lines
ctx.moveTo(canvas.width / 2, 0); ctx.lineTo(canvas.width / 2, canvas.height);
ctx.moveTo(0, canvas.height / 2); ctx.lineTo(canvas.width, canvas.height / 2);
ctx.stroke();
// Central scanning ring
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width, canvas.height) * 0.25, 0, 2 * Math.PI);
ctx.stroke();
ctx.globalAlpha = 1.0;
// HUD Info Display
const hudWidth = Math.min(250, canvas.width - 20);
ctx.fillStyle = "rgba(0, 0, 0, 0.75)";
ctx.fillRect(10, canvas.height - 55, hudWidth, 45);
ctx.fillStyle = themeColor;
ctx.font = "12px monospace";
ctx.fillText(`SCAN IDENTIFIER: ACTIVE`, 20, canvas.height - 38);
ctx.fillText(`RESOLUTION: ${canvas.width}x${canvas.height} PX`, 20, canvas.height - 20);
return canvas;
}Apply Changes
