You can edit the below JavaScript code to customize the image tool.
Apply Changes
// Function creates an animated "Scanner" Interface Canvas that analyzes an image
// using Exif metadata extraction and falls back to OCR via Tesseract Neural Core
// to identify a "Company" and "Year" associated with the image.
function processImage(originalImg, enableOCR = "true", primaryColor = "#00ff00") {
// Scaffold Canvas
const canvas = document.createElement('canvas');
canvas.width = 600;
canvas.height = 800;
const ctx = canvas.getContext('2d');
// Canvas Logger State
let logs = [];
const maxLogs = 12;
const pushLog = (text, color = primaryColor, overwrite = false) => {
const maxChars = 52;
const shortText = text.length > maxChars ? text.substring(0, maxChars - 3) + '...' : text;
if (overwrite && logs.length > 0) {
logs[logs.length - 1] = { text: shortText, color };
} else {
logs.push({ text: shortText, color });
if (logs.length > maxLogs) logs.shift();
}
};
// Scanner Animation State
let scanning = true;
let scanY = 0;
let scanDir = 1;
let lastTime = performance.now();
// Render Loop
const render = (time) => {
const dt = time - lastTime;
lastTime = time;
// Background
ctx.fillStyle = '#0a0a0a';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Header View
ctx.fillStyle = primaryColor;
ctx.font = 'bold 22px monospace';
ctx.textAlign = 'center';
ctx.fillText('COMPANY & YEAR IDENTIFIER SCANNER', canvas.width / 2, 45);
ctx.fillRect(50, 65, canvas.width - 100, 2);
// Image Boundary Box
const imgBox = { x: 50, y: 90, w: 500, h: 400 };
ctx.fillStyle = '#111111';
ctx.fillRect(imgBox.x, imgBox.y, imgBox.w, imgBox.h);
// Render Techy Grid
ctx.strokeStyle = '#1f1f1f';
ctx.lineWidth = 1;
for (let x = 20; x < imgBox.w; x += 40) {
ctx.beginPath(); ctx.moveTo(imgBox.x + x, imgBox.y); ctx.lineTo(imgBox.x + x, imgBox.y + imgBox.h); ctx.stroke();
}
for (let y = 20; y < imgBox.h; y += 40) {
ctx.beginPath(); ctx.moveTo(imgBox.x, imgBox.y + y); ctx.lineTo(imgBox.x + imgBox.w, imgBox.y + y); ctx.stroke();
}
// Clip and Draw the Image
ctx.save();
ctx.beginPath();
ctx.rect(imgBox.x, imgBox.y, imgBox.w, imgBox.h);
ctx.clip();
if (originalImg.complete && originalImg.naturalWidth > 0) {
const imgAspect = originalImg.naturalWidth / originalImg.naturalHeight;
const boxAspect = imgBox.w / imgBox.h;
let drawW, drawH;
if (imgAspect > boxAspect) {
drawW = imgBox.w;
drawH = imgBox.w / imgAspect;
} else {
drawH = imgBox.h;
drawW = imgBox.h * imgAspect;
}
const drawX = imgBox.x + (imgBox.w - drawW) / 2;
const drawY = imgBox.y + (imgBox.h - drawH) / 2;
ctx.drawImage(originalImg, drawX, drawY, drawW, drawH);
}
// Overlay Scanner Bar
if (scanning) {
scanY += scanDir * (dt * 0.2);
if (scanY > imgBox.h) scanDir = -1;
if (scanY < 0) scanDir = 1;
ctx.fillStyle = primaryColor;
ctx.globalAlpha = 0.6;
ctx.fillRect(imgBox.x, imgBox.y + scanY, imgBox.w, 4);
ctx.globalAlpha = 0.15;
ctx.fillRect(imgBox.x, imgBox.y + scanY - (scanDir === 1 ? 30 : -30), imgBox.w, 30);
ctx.globalAlpha = 1.0;
}
ctx.restore(); // Eliminate clip mask
// Img Box Border
ctx.strokeStyle = primaryColor;
ctx.lineWidth = 2;
ctx.strokeRect(imgBox.x, imgBox.y, imgBox.w, imgBox.h);
// Render Terminal Boundary Box
const termBox = { x: 50, y: 520, w: 500, h: 250 };
ctx.fillStyle = '#050505';
ctx.fillRect(termBox.x, termBox.y, termBox.w, termBox.h);
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
ctx.strokeRect(termBox.x, termBox.y, termBox.w, termBox.h);
// Print Logs
ctx.textAlign = 'left';
ctx.font = '14px monospace';
let tx = termBox.x + 15;
let ty = termBox.y + 25;
for (let i = 0; i < logs.length; i++) {
ctx.fillStyle = logs[i].color;
ctx.fillText('> ' + logs[i].text, tx, ty);
ty += 18;
}
// Blinking Terminal Cursor
if (Math.floor(time / 400) % 2 === 0 && logs.length > 0) {
const lastLine = logs[logs.length - 1];
const lastLogWidth = ctx.measureText('> ' + lastLine.text).width;
ctx.fillStyle = lastLine.color;
ctx.fillRect(tx + lastLogWidth + 5, termBox.y + 25 + (logs.length - 1) * 18 - 12, 8, 14);
}
requestAnimationFrame(render);
};
// Start Animation Engine
requestAnimationFrame(render);
const delay = ms => new Promise(res => setTimeout(res, ms));
// Orchestrator Logic
(async () => {
pushLog('Initializing System Diagnostics...', primaryColor);
await delay(600);
pushLog('Image Target Acquired. Beginning Analysis...', primaryColor);
await delay(400);
let companyName = null;
let year = null;
// Phase 1: EXIF Metadata Extraction
try {
pushLog('Engaging EXIF Engine Module...', '#ffffff');
const exifrModule = await import('https://cdn.jsdelivr.net/npm/exifr@7.1.3/dist/full.esm.js');
const exifr = exifrModule.default;
pushLog('Parsing Image Headers and Metadata...', '#ffffff');
const exifData = await exifr.parse(originalImg);
if (exifData) {
if (exifData.Make) companyName = exifData.Make;
if (exifData.Software && !companyName) companyName = exifData.Software;
if (exifData.DateTimeOriginal) {
year = new Date(exifData.DateTimeOriginal).getFullYear();
} else if (exifData.ModifyDate) {
year = new Date(exifData.ModifyDate).getFullYear();
}
if (companyName || year) {
pushLog('✓ EXIF Metadata identified!', primaryColor);
} else {
pushLog('! EXIF present, but missing standard Make/Date elements.', '#ffa500');
}
} else {
pushLog('! No EXIF metadata detected.', '#ffa500');
}
} catch(e) {
pushLog(`- EXIF Extraction Bypass: ${e.message}`, '#ff5555');
}
// Phase 2: Heuristic OCR Fallback Integration
if ((!companyName || !year) && String(enableOCR).toLowerCase() === "true") {
try {
await delay(500);
pushLog('Missing identifiers. Switching to Matrix OCR...', '#00ccff');
if(!window.Tesseract) {
pushLog('Downloading Tesseract Neural Core...', '#00ccff');
await new Promise((res, rej) => {
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js';
script.onload = res;
script.onerror = rej;
document.head.appendChild(script);
});
}
pushLog('Tesseract Subsystem Active.', '#00ccff');
const worker = await window.Tesseract.createWorker({
logger: m => {
if (m.status === 'recognizing text') {
pushLog(`Scanning Visual Matrix: ${Math.floor(m.progress * 100)}%`, '#00ccff', true);
}
}
});
await worker.loadLanguage('eng');
await worker.initialize('eng');
// Transpile to independent canvas to evade subset CORS blocks locally
const tempCanvas = document.createElement('canvas');
tempCanvas.width = originalImg.naturalWidth || 800;
tempCanvas.height = originalImg.naturalHeight || 600;
const tcCtx = tempCanvas.getContext('2d');
tcCtx.drawImage(originalImg, 0, 0);
const { data: { text } } = await worker.recognize(tempCanvas);
await worker.terminate();
pushLog('✓ Textural Analysis Complete.', '#00ccff', true);
// Year Recognition Logic (Regex)
if (!year) {
const yearMatch = text.match(/\b(19|20)\d{2}\b/);
if (yearMatch) year = yearMatch[0];
}
// Company Nomenclature Recognition Logic (Regex pattern & Heuristics)
if (!companyName) {
const companyMatch = text.match(/([A-Z][A-Za-z0-9\-&]+(?:\s+[A-Z][A-Za-z0-9\-&]+)*\s+(?:Inc|LLC|Corp|Corporation|Company|Co|Ltd|GmbH|System|Studios?)\b\.?)/i);
if (companyMatch) {
companyName = companyMatch[1].trim();
} else {
// Extract leading longest contiguous proper noun
const titleMatch = text.match(/\b([A-Z][a-z]{4,}(?:\s+[A-Z][a-z]{4,})*)\b/g);
if (titleMatch && titleMatch.length > 0) {
companyName = titleMatch[0] + ' (Est.)';
}
}
}
} catch(e) {
pushLog(`- Optical Interpretation Error: ${e.message}`, '#ff5555');
}
}
// Final Output
await delay(800);
pushLog('==============================================', '#ffff00');
pushLog(`TARGET COMPANY : ${companyName || 'UNKNOWN / NOT FOUND'}`, '#ffff00');
pushLog(`TARGET YEAR : ${year || 'UNKNOWN / NOT FOUND'}`, '#ffff00');
pushLog('==============================================', '#ffff00');
await delay(300);
pushLog('SCAN SEQUENCE COMPLETE.', primaryColor);
setTimeout(() => { scanning = false; }, 1000);
})();
return canvas;
}Apply Changes
