You can edit the below JavaScript code to customize the image tool.
Apply Changes
async function processImage(originalImg, accentColor = "#f5c518", cropLetterbox = 1) {
// 1. Setup Main Container
const container = document.createElement('div');
container.style.fontFamily = "system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
container.style.backgroundColor = "#1a1a1a";
container.style.color = "#ffffff";
container.style.padding = "20px";
container.style.borderRadius = "12px";
container.style.maxWidth = "550px";
container.style.margin = "0 auto";
container.style.boxShadow = "0 8px 24px rgba(0,0,0,0.6)";
// Setup Header
const title = document.createElement('h2');
title.innerText = "IMDb Photo & Movie Identifier";
title.style.color = accentColor;
title.style.textAlign = "center";
title.style.margin = "0 0 5px 0";
title.style.fontSize = "22px";
container.appendChild(title);
const subtitle = document.createElement('p');
subtitle.innerText = "Identify TV shows and movies from screenshots, posters, and scenes.";
subtitle.style.textAlign = "center";
subtitle.style.fontSize = "14px";
subtitle.style.color = "#cccccc";
subtitle.style.margin = "0 0 20px 0";
container.appendChild(subtitle);
// 2. Auto-crop functionality for Letterboxing (Black Bars)
function autoCrop(image) {
const tempCanvas = document.createElement('canvas');
tempCanvas.width = image.width;
tempCanvas.height = image.height;
const ctx = tempCanvas.getContext('2d');
ctx.drawImage(image, 0, 0);
if (image.width < 50 || image.height < 50) return tempCanvas;
try {
const imgData = ctx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
const data = imgData.data;
const threshold = 20;
let top = 0, bottom = tempCanvas.height - 1;
let left = 0, right = tempCanvas.width - 1;
const isRowBlack = (y) => {
let blackCount = 0;
for (let x = 0; x < tempCanvas.width; x++) {
const i = (y * tempCanvas.width + x) * 4;
if (data[i] <= threshold && data[i + 1] <= threshold && data[i + 2] <= threshold) {
blackCount++;
}
}
return (blackCount / tempCanvas.width) > 0.95;
};
const isColBlack = (x) => {
let blackCount = 0;
let height = bottom - top + 1;
for (let y = top; y <= bottom; y++) {
const i = (y * tempCanvas.width + x) * 4;
if (data[i] <= threshold && data[i + 1] <= threshold && data[i + 2] <= threshold) {
blackCount++;
}
}
return (blackCount / height) > 0.95;
};
while (top < bottom && isRowBlack(top)) top++;
while (bottom > top && isRowBlack(bottom)) bottom--;
while (left < right && isColBlack(left)) left++;
while (right > left && isColBlack(right)) right--;
if (right - left > 10 && bottom - top > 10) {
const croppedCanvas = document.createElement('canvas');
croppedCanvas.width = right - left + 1;
croppedCanvas.height = bottom - top + 1;
croppedCanvas.getContext('2d').drawImage(
tempCanvas,
left, top, croppedCanvas.width, croppedCanvas.height,
0, 0, croppedCanvas.width, croppedCanvas.height
);
return croppedCanvas;
}
} catch (e) {
console.warn("Auto-crop skipped due to cross-origin constraints or error", e);
}
return tempCanvas;
}
const processCanvas = cropLetterbox === 1 ? autoCrop(originalImg) : (() => {
const c = document.createElement('canvas');
c.width = originalImg.width;
c.height = originalImg.height;
c.getContext('2d').drawImage(originalImg, 0, 0);
return c;
})();
// 3. Display Processed Details
const imgContainer = document.createElement('div');
imgContainer.style.textAlign = "center";
imgContainer.style.marginBottom = "20px";
imgContainer.style.backgroundColor = "#000000";
imgContainer.style.padding = "10px";
imgContainer.style.borderRadius = "8px";
const previewImg = document.createElement('img');
previewImg.src = processCanvas.toDataURL('image/jpeg', 0.9);
previewImg.style.maxWidth = "100%";
previewImg.style.maxHeight = "280px";
previewImg.style.borderRadius = "4px";
previewImg.style.boxShadow = `0 0 10px ${accentColor}55`;
imgContainer.appendChild(previewImg);
container.appendChild(imgContainer);
// 4. Form Submission Helper
const submitToSearch = (url, inputName) => {
processCanvas.toBlob((blob) => {
const file = new File([blob], "movie-frame.jpg", { type: "image/jpeg" });
try {
const dt = new DataTransfer();
dt.items.add(file);
const form = document.createElement('form');
form.method = 'POST';
form.action = url;
form.enctype = 'multipart/form-data';
form.target = '_blank';
const input = document.createElement('input');
input.type = 'file';
input.name = inputName;
input.files = dt.files;
form.appendChild(input);
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
} catch (err) {
alert("Your browser restricts automatic file posting. Try the Google Lens manual method.");
}
}, 'image/jpeg');
};
// 5. Build Actions UI
const actionsDiv = document.createElement('div');
actionsDiv.style.display = "flex";
actionsDiv.style.flexDirection = "column";
actionsDiv.style.gap = "10px";
const createBtn = (text, icon, onClick) => {
const btn = document.createElement('button');
btn.innerHTML = `<span style="font-size:20px; width:25px; display:inline-block">${icon}</span> ${text}`;
btn.style.backgroundColor = "#2c2c2c";
btn.style.color = "#ffffff";
btn.style.border = `1px solid ${accentColor}`;
btn.style.padding = "12px 15px";
btn.style.fontSize = "16px";
btn.style.fontWeight = "600";
btn.style.borderRadius = "6px";
btn.style.cursor = "pointer";
btn.style.display = "flex";
btn.style.alignItems = "center";
btn.style.justifyContent = "center";
btn.style.transition = "all 0.2s ease-in-out";
btn.onmouseover = () => {
btn.style.backgroundColor = accentColor;
btn.style.color = "#000000";
};
btn.onmouseout = () => {
btn.style.backgroundColor = "#2c2c2c";
btn.style.color = "#ffffff";
};
btn.onclick = onClick;
return btn;
};
const btnLens = createBtn("Identify Visually (Google Lens)", "📷", () => {
const confirmMsg = "Google Lens is best for identifying actors and scenes.\n\nWe will download this frame to your device and open Google Lens in a new tab. Please drag and drop the downloaded frame there to find the movie.\n\nProceed?";
if (confirm(confirmMsg)) {
const a = document.createElement('a');
a.href = processCanvas.toDataURL('image/jpeg', 1.0);
a.download = "IMDb_Search_Frame.jpg";
a.click();
setTimeout(() => {
window.open('https://lens.google.com/', '_blank');
}, 800);
}
});
const btnYandex = createBtn("Reverse Image Search (Yandex)", "🔍", () => {
submitToSearch('https://yandex.com/images/search?rpt=imageview', 'upfile');
});
const btnBing = createBtn("Reverse Image Search (Bing)", "🌐", () => {
submitToSearch('https://www.bing.com/images/search?view=detailv2&iss=sbi', 'imageBin');
});
const btnOCR = createBtn("Read Subtitles/Text → Search IMDb", "📝", async () => {
const originalText = btnOCR.innerHTML;
try {
btnOCR.innerHTML = "⏳ Loading OCR Engine...";
btnOCR.disabled = true;
btnOCR.style.opacity = "0.7";
btnOCR.style.cursor = "wait";
if (!window.Tesseract) {
await new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = "https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js";
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
btnOCR.innerHTML = "👀 Analyzing Scene Text...";
const tesseractResult = await Tesseract.recognize(processCanvas, 'eng', {
logger: m => {
if (m.status === 'recognizing text') {
btnOCR.innerHTML = `👀 Analyzing Text... ${Math.round(m.progress * 100)}%`;
}
}
});
const text = tesseractResult.data.text.replace(/\n/g, ' ').trim();
if (text.length > 2) {
window.open(`https://www.imdb.com/find?q=${encodeURIComponent(text)}`, '_blank');
} else {
alert("Could not identify clear text or subtitles in the image. Please try a visual search instead.");
}
} catch (e) {
console.error(e);
alert("An error occurred during text extraction.");
} finally {
btnOCR.innerHTML = originalText;
btnOCR.disabled = false;
btnOCR.style.opacity = "1";
btnOCR.style.cursor = "pointer";
}
});
actionsDiv.appendChild(btnLens);
actionsDiv.appendChild(btnOCR);
actionsDiv.appendChild(btnYandex);
actionsDiv.appendChild(btnBing);
container.appendChild(actionsDiv);
const tip = document.createElement('p');
tip.innerText = "Tip: 'Google Lens' provides the best results for IMDb movie identification. 'Read Subtitles' works perfectly for poster titles and subtitled anime/movies.";
tip.style.fontSize = "12px";
tip.style.color = "#888888";
tip.style.textAlign = "center";
tip.style.marginTop = "20px";
tip.style.lineHeight = "1.5";
container.appendChild(tip);
return container;
}Apply Changes
