You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, language = 'eng') {
// Main container
const container = document.createElement('div');
container.style.position = 'relative';
container.style.display = 'block';
container.style.fontFamily = 'Arial, sans-serif';
container.style.maxWidth = '100%';
container.style.background = '#f9f9f9';
container.style.border = '1px solid #ddd';
container.style.borderRadius = '8px';
container.style.padding = '15px';
container.style.boxSizing = 'border-box';
// Header
const header = document.createElement('h3');
header.style.marginTop = '0';
header.style.color = '#333';
header.innerText = 'Select Text to Identify Movie';
container.appendChild(header);
// Image wrapper for absolute overlay positioning
const imageWrapper = document.createElement('div');
imageWrapper.style.position = 'relative';
imageWrapper.style.display = 'inline-block';
imageWrapper.style.maxWidth = '100%';
imageWrapper.style.overflow = 'hidden';
imageWrapper.style.borderRadius = '4px';
imageWrapper.style.boxShadow = '0 2px 6px rgba(0,0,0,0.1)';
// Canvas representing the image
const canvas = document.createElement('canvas');
canvas.width = originalImg.naturalWidth;
canvas.height = originalImg.naturalHeight;
canvas.style.maxWidth = '100%';
canvas.style.height = 'auto';
canvas.style.display = 'block';
const ctx = canvas.getContext('2d');
ctx.drawImage(originalImg, 0, 0);
imageWrapper.appendChild(canvas);
container.appendChild(imageWrapper);
// Bottom Control Panel
const panel = document.createElement('div');
panel.style.marginTop = '15px';
panel.style.display = 'flex';
panel.style.gap = '10px';
panel.style.flexWrap = 'wrap';
const textInput = document.createElement('input');
textInput.type = 'text';
textInput.placeholder = 'Click highlighted words on image to pick movie title...';
textInput.style.flex = '1';
textInput.style.minWidth = '250px';
textInput.style.padding = '10px';
textInput.style.fontSize = '16px';
textInput.style.border = '1px solid #ccc';
textInput.style.borderRadius = '4px';
const clearBtn = document.createElement('button');
clearBtn.innerText = 'Clear';
clearBtn.style.padding = '10px 16px';
clearBtn.style.fontSize = '16px';
clearBtn.style.cursor = 'pointer';
clearBtn.style.border = '1px solid #ccc';
clearBtn.style.backgroundColor = '#fff';
clearBtn.style.borderRadius = '4px';
const searchBtn = document.createElement('button');
searchBtn.innerText = 'Search Movie';
searchBtn.style.padding = '10px 16px';
searchBtn.style.fontSize = '16px';
searchBtn.style.cursor = 'pointer';
searchBtn.style.border = 'none';
searchBtn.style.backgroundColor = '#007BFF';
searchBtn.style.color = '#fff';
searchBtn.style.borderRadius = '4px';
searchBtn.style.fontWeight = 'bold';
searchBtn.addEventListener('click', () => {
const query = textInput.value.trim();
if (query) {
window.open(`https://www.imdb.com/find/?q=${encodeURIComponent(query)}&s=tt`, '_blank');
} else {
alert('Please select or type a movie title text first.');
}
});
panel.appendChild(textInput);
panel.appendChild(clearBtn);
panel.appendChild(searchBtn);
container.appendChild(panel);
// Initial Loading Overlay
const loadingOverlay = document.createElement('div');
loadingOverlay.style.position = 'absolute';
loadingOverlay.style.top = '0';
loadingOverlay.style.left = '0';
loadingOverlay.style.width = '100%';
loadingOverlay.style.height = '100%';
loadingOverlay.style.background = 'rgba(0,0,0,0.7)';
loadingOverlay.style.color = '#fff';
loadingOverlay.style.display = 'flex';
loadingOverlay.style.alignItems = 'center';
loadingOverlay.style.justifyContent = 'center';
loadingOverlay.style.fontSize = '20px';
loadingOverlay.style.fontWeight = 'bold';
loadingOverlay.style.fontFamily = 'monospace';
loadingOverlay.innerText = 'Loading OCR Engine...';
imageWrapper.appendChild(loadingOverlay);
// State
let selectedWords = [];
let overlays = [];
function updateInput() {
textInput.value = selectedWords.map(w => w.text).join(' ');
}
clearBtn.onclick = () => {
selectedWords = [];
updateInput();
overlays.forEach(overlay => {
overlay.dataset.selected = "false";
overlay.style.border = '2px solid rgba(0, 150, 255, 0.4)';
overlay.style.backgroundColor = 'rgba(0, 150, 255, 0.1)';
});
};
// Helper functions for overlays
function updateOverlayPositions() {
const scaleX = canvas.clientWidth / canvas.width;
const scaleY = canvas.clientHeight / canvas.height;
overlays.forEach(overlay => {
overlay.style.left = (parseFloat(overlay.dataset.x0) * scaleX) + 'px';
overlay.style.top = (parseFloat(overlay.dataset.y0) * scaleY) + 'px';
overlay.style.width = (parseFloat(overlay.dataset.w) * scaleX) + 'px';
overlay.style.height = (parseFloat(overlay.dataset.h) * scaleY) + 'px';
});
}
function initializeOCR() {
if (typeof Tesseract === 'undefined') {
loadingOverlay.innerText = 'Error: Failed to load Tesseract.js';
return;
}
Tesseract.recognize(
canvas,
language,
{
logger: m => {
if (m.status === 'recognizing text') {
loadingOverlay.innerText = `Analyzing image text... ${Math.round(m.progress * 100)}%`;
} else {
loadingOverlay.innerText = `Status: ${m.status}...`;
}
}
}
).then(({ data: { words } }) => {
loadingOverlay.style.display = 'none';
words.forEach(word => {
if (word.text.trim() === '') return;
const box = word.bbox;
const overlay = document.createElement('div');
overlay.style.position = 'absolute';
overlay.style.border = '2px solid rgba(0, 150, 255, 0.4)';
overlay.style.backgroundColor = 'rgba(0, 150, 255, 0.1)';
overlay.style.cursor = 'pointer';
overlay.style.boxSizing = 'border-box';
overlay.style.borderRadius = '3px';
overlay.style.transition = 'all 0.2s';
overlay.dataset.x0 = box.x0;
overlay.dataset.y0 = box.y0;
overlay.dataset.w = box.x1 - box.x0;
overlay.dataset.h = box.y1 - box.y0;
overlay.dataset.text = word.text;
overlay.dataset.selected = "false";
// Click handler to toggle selection
overlay.addEventListener('click', () => {
const isSelected = overlay.dataset.selected === "true";
if (isSelected) {
overlay.dataset.selected = "false";
overlay.style.border = '2px solid rgba(0, 150, 255, 0.4)';
overlay.style.backgroundColor = 'rgba(0, 150, 255, 0.1)';
selectedWords = selectedWords.filter(w => w.id !== overlay);
} else {
overlay.dataset.selected = "true";
overlay.style.border = '2px solid rgba(255, 50, 50, 0.9)';
overlay.style.backgroundColor = 'rgba(255, 50, 50, 0.4)';
selectedWords.push({ id: overlay, text: word.text });
}
updateInput();
});
overlays.push(overlay);
imageWrapper.appendChild(overlay);
});
// Make sure overlays match visual canvas size accurately
updateOverlayPositions();
// Track resize events to keep bounds aligned
if (typeof ResizeObserver !== 'undefined') {
const resizeObserver = new ResizeObserver(() => {
if (canvas.clientWidth > 0) {
updateOverlayPositions();
}
});
resizeObserver.observe(canvas);
}
window.addEventListener('resize', updateOverlayPositions);
}).catch(err => {
console.error(err);
loadingOverlay.innerText = 'Failed to analyze text: ' + err.message;
});
}
// Load External OCR Library dynamically
if (typeof Tesseract === 'undefined') {
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
script.onload = initializeOCR;
script.onerror = () => {
loadingOverlay.innerText = 'Failed to load OCR script. Please check your network connection.';
};
document.head.appendChild(script);
} else {
initializeOCR();
}
return container;
}Apply Changes
