You can edit the below JavaScript code to customize the image tool.
Apply Changes
async function processImage(originalImg, defaultCompany = "Universal", defaultYear = "2023", lang = "eng") {
// Determine the sizing based on the input image
const w = Math.max(originalImg.width, 600);
const h = Math.max(originalImg.height, 400);
// Create the main container div
const container = document.createElement('div');
container.style.position = 'relative';
container.style.width = '100%';
container.style.maxWidth = w + 'px';
container.style.aspectRatio = `${w} / ${h}`;
container.style.display = 'flex';
container.style.flexDirection = 'column';
container.style.alignItems = 'center';
container.style.justifyContent = 'center';
container.style.fontFamily = '"Segoe UI", Roboto, Helvetica, Arial, sans-serif';
container.style.overflow = 'hidden';
container.style.borderRadius = '12px';
container.style.boxShadow = '0 6px 16px rgba(0,0,0,0.5)';
container.style.backgroundColor = '#111';
// Create a background canvas and draw the original image
const canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
const ctx = canvas.getContext('2d');
// Equivalent of object-fit: cover for drawing the image on the canvas
const imgRatio = originalImg.width / originalImg.height;
const canvasRatio = w / h;
let drawW = w, drawH = h, offsetX = 0, offsetY = 0;
if (imgRatio > canvasRatio) {
drawW = h * imgRatio;
offsetX = (w - drawW) / 2;
} else {
drawH = w / imgRatio;
offsetY = (h - drawH) / 2;
}
ctx.drawImage(originalImg, offsetX, offsetY, drawW, drawH);
// Apply a dark overlay so the UI remains clearly readable
ctx.fillStyle = 'rgba(0, 0, 0, 0.75)';
ctx.fillRect(0, 0, w, h);
canvas.style.position = 'absolute';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.style.zIndex = '1';
container.appendChild(canvas);
// Foreground UI Panel
const uiPanel = document.createElement('div');
uiPanel.style.position = 'relative';
uiPanel.style.zIndex = '2';
uiPanel.style.background = 'rgba(30, 30, 30, 0.6)';
uiPanel.style.backdropFilter = 'blur(10px)';
uiPanel.style.padding = '30px 40px';
uiPanel.style.borderRadius = '16px';
uiPanel.style.textAlign = 'center';
uiPanel.style.color = '#fff';
uiPanel.style.border = '1px solid rgba(255,255,255,0.15)';
uiPanel.style.display = 'flex';
uiPanel.style.flexDirection = 'column';
uiPanel.style.gap = '15px';
uiPanel.style.width = '85%';
uiPanel.style.maxWidth = '500px';
const title = document.createElement('h2');
title.innerText = 'FilmStudio IMDb Search';
title.style.margin = '0';
title.style.color = '#f5c518'; // IMDb Gold color
title.style.fontSize = '24px';
title.style.letterSpacing = '0.5px';
uiPanel.appendChild(title);
const statusText = document.createElement('div');
statusText.innerText = 'Loading OCR Engine to scan poster/image...';
statusText.style.fontSize = '14px';
statusText.style.color = '#ccc';
statusText.style.marginBottom = '10px';
uiPanel.appendChild(statusText);
// Input fields for Film Studio / Movie and Release Year
const inputRow = document.createElement('div');
inputRow.style.display = 'flex';
inputRow.style.gap = '10px';
inputRow.style.flexWrap = 'wrap';
const queryInput = document.createElement('input');
queryInput.type = 'text';
queryInput.value = defaultCompany;
queryInput.placeholder = 'Film Studio / Title';
queryInput.style.flex = '1';
queryInput.style.minWidth = '150px';
queryInput.style.padding = '12px';
queryInput.style.border = '1px solid rgba(255,255,255,0.2)';
queryInput.style.borderRadius = '6px';
queryInput.style.background = 'rgba(0,0,0,0.5)';
queryInput.style.color = '#fff';
queryInput.style.fontSize = '14px';
queryInput.style.outline = 'none';
const yearInput = document.createElement('input');
yearInput.type = 'number';
yearInput.value = defaultYear;
yearInput.placeholder = 'Year';
yearInput.style.flex = '0 0 80px';
yearInput.style.padding = '12px';
yearInput.style.border = '1px solid rgba(255,255,255,0.2)';
yearInput.style.borderRadius = '6px';
yearInput.style.background = 'rgba(0,0,0,0.5)';
yearInput.style.color = '#fff';
yearInput.style.fontSize = '14px';
yearInput.style.outline = 'none';
yearInput.style.textAlign = 'center';
inputRow.appendChild(queryInput);
inputRow.appendChild(yearInput);
uiPanel.appendChild(inputRow);
// Search Execution Button
const searchBtn = document.createElement('button');
searchBtn.innerText = 'Search IMDb';
searchBtn.style.padding = '12px 24px';
searchBtn.style.background = '#444';
searchBtn.style.color = '#aaa';
searchBtn.style.border = 'none';
searchBtn.style.borderRadius = '6px';
searchBtn.style.fontWeight = 'bold';
searchBtn.style.fontSize = '16px';
searchBtn.style.cursor = 'not-allowed';
searchBtn.style.transition = 'all 0.2s';
searchBtn.disabled = true;
uiPanel.appendChild(searchBtn);
container.appendChild(uiPanel);
// Helper function to prepare button once ready
const enableSearchBtn = () => {
searchBtn.disabled = false;
searchBtn.style.background = '#f5c518';
searchBtn.style.color = '#000';
searchBtn.style.cursor = 'pointer';
searchBtn.onmouseover = () => searchBtn.style.background = '#e3b616';
searchBtn.onmouseout = () => searchBtn.style.background = '#f5c518';
};
searchBtn.onclick = () => {
if (searchBtn.disabled) return;
const q = queryInput.value.trim();
const y = yearInput.value.trim();
// Form the query (e.g. "Warner Bros 2023 movie")
const queryTerms = [q, y].filter(Boolean).join(' ') + ' film';
const searchUrl = `https://www.imdb.com/find/?q=${encodeURIComponent(queryTerms)}&s=all`;
window.open(searchUrl, '_blank');
};
// Dynamically load Tesseract.js (Optical Character Recognition) to automatically scan the originalImage for text
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@4.1.2/dist/tesseract.min.js';
script.onload = () => {
statusText.innerText = 'Analyzing image for recognizable words...';
Tesseract.recognize(
originalImg,
lang,
{ logger: m => {
if (m.status === 'recognizing text') {
statusText.innerText = `Analyzing image... ${Math.round(m.progress * 100)}%`;
}
}}
).then(({ data: { text } }) => {
const cleanedText = text.replace(/[\r\n]+/g, ' ').trim();
if (cleanedText.length > 3) {
// Keep only alphanumeric characters and spaces
let extractedQuery = cleanedText.replace(/[^a-zA-Z0-9\s]/g, '');
// Identify standalone 4-digit numbers as potential release years
const yearMatch = extractedQuery.match(/\b(18\d{2}|19\d{2}|20\d{2})\b/);
if (yearMatch) {
yearInput.value = yearMatch[0];
extractedQuery = extractedQuery.replace(yearMatch[0], '').trim();
}
// Safely truncate string length to keep UI tidy
if (extractedQuery.length > 40) {
extractedQuery = extractedQuery.substring(0, 40) + '...';
}
if (extractedQuery.length > 0) {
queryInput.value = extractedQuery.replace(/\s+/g, ' ');
}
statusText.innerText = 'Scan complete. Adjust details and search!';
} else {
statusText.innerText = 'No predominant text found. Using defaults.';
}
enableSearchBtn();
}).catch(err => {
console.error('OCR Error:', err);
statusText.innerText = 'OCR extraction failed. Proceed with manual entry.';
enableSearchBtn();
});
};
script.onerror = () => {
statusText.innerText = 'Could not load OCR engine. Proceed with manual entry.';
enableSearchBtn();
};
document.head.appendChild(script);
return container;
}Apply Changes
