You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, searchQuery = "site:imdb.com movie") {
// 1. Create the robust UI Container
const container = document.createElement("div");
container.style.cssText = "font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 25px; background: #ffffff; border: 1px solid #eaeaea; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); text-align: center;";
// 2. Add Header
const header = document.createElement("h2");
header.textContent = "IMDb Movie Finder via Google Lens";
header.style.cssText = "color: #1a1a1a; margin-top: 0; margin-bottom: 20px; font-size: 24px; font-weight: 700;";
container.appendChild(header);
// 3. Image Preview Area
const imgWrapper = document.createElement("div");
imgWrapper.style.cssText = "margin-bottom: 25px; display: flex; justify-content: center; background: #f9f9f9; padding: 15px; border-radius: 8px; border: 1px dashed #cccccc;";
const previewImg = document.createElement("img");
previewImg.src = originalImg.src;
previewImg.style.cssText = "max-width: 100%; max-height: 320px; border-radius: 4px; object-fit: contain; box-shadow: 0 2px 8px rgba(0,0,0,0.1);";
imgWrapper.appendChild(previewImg);
container.appendChild(imgWrapper);
// 4. Instructions
const instructionBox = document.createElement("div");
instructionBox.style.cssText = "background-color: #fdfdfd; border: 1px solid #eeeeee; border-left: 4px solid #f5c518; padding: 15px 20px; border-radius: 6px; margin-bottom: 25px; font-size: 15px; color: #444444; line-height: 1.6; text-align: left;";
instructionBox.innerHTML = `
<p style="margin: 0 0 10px 0; font-weight: 600; color: #222;">How to find this movie:</p>
<ol style="margin: 0; padding-left: 20px;">
<li style="margin-bottom: 6px;">Click the <b>Search</b> button to instantly upload and reverse-search this image.</li>
<li style="margin-bottom: 6px;"><b>Google Lens</b> will automatically open.</li>
<li>We will copy <code>${searchQuery}</code> to your clipboard. <b>Paste it</b> into the Lens search box to accurately filter for exact IMDb hits!</li>
</ol>
`;
container.appendChild(instructionBox);
// 5. Hidden Form for Google Lens Proxy Upload
const form = document.createElement('form');
form.action = 'https://lens.google.com/upload';
form.method = 'POST';
form.enctype = 'multipart/form-data';
form.target = '_blank';
form.style.display = 'none';
const hiddenEp = document.createElement('input');
hiddenEp.type = 'hidden';
hiddenEp.name = 'ep';
hiddenEp.value = 'ccm';
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.name = 'encoded_image';
form.appendChild(hiddenEp);
form.appendChild(fileInput);
container.appendChild(form);
// 6. Action Button
const submitBtn = document.createElement("button");
submitBtn.type = "button";
const searchIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16" style="vertical-align: text-bottom; margin-right: 8px;"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>`;
submitBtn.innerHTML = `${searchIcon}<span style="vertical-align: middle;">Search IMDb via Google Lens</span>`;
submitBtn.style.cssText = "display: inline-block; background-color: #f5c518; color: #000000; border: none; padding: 14px 28px; font-size: 16px; font-weight: 700; border-radius: 6px; cursor: not-allowed; transition: all 0.2s ease; box-shadow: 0 4px 6px rgba(245, 197, 24, 0.25); opacity: 0.7;";
// Add hover styles using a dynamic style tag
const styleHover = document.createElement("style");
styleHover.textContent = `
.btn-imdb-lens:not(:disabled):hover {
background-color: #e3b616 !important;
transform: translateY(-1px);
box-shadow: 0 6px 12px rgba(245, 197, 24, 0.3) !important;
}
.btn-imdb-lens:not(:disabled):active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(245, 197, 24, 0.2) !important;
}
`;
container.appendChild(styleHover);
submitBtn.className = "btn-imdb-lens";
submitBtn.disabled = true;
const statusMsg = document.createElement("div");
statusMsg.style.cssText = "margin-top: 12px; font-size: 13px; color: #888888; font-weight: 500;";
statusMsg.textContent = "Processing image...";
container.appendChild(submitBtn);
container.appendChild(statusMsg);
// 7. Image Extraction Logic
let fileReady = false;
async function extractFileFromImage(img) {
// If it's a data URL, we decode directly to avoid canvas tainting
if (img.src.startsWith('data:')) {
const arr = img.src.split(',');
const mimeMatch = arr[0].match(/:(.*?);/);
const mime = mimeMatch ? mimeMatch[1] : 'image/png';
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
for (let i = 0; i < n; i++) {
u8arr[i] = bstr.charCodeAt(i);
}
return new File([u8arr], "movie_scene.png", { type: mime });
}
// If it's a blob url
if (img.src.startsWith('blob:')) {
try {
const res = await fetch(img.src);
const blob = await res.blob();
return new File([blob], "movie_scene.png", { type: blob.type });
} catch (e) {
console.warn("Blob fetch failed, falling back to canvas", e);
}
}
// Universal fallback to Canvas
return new Promise((resolve, reject) => {
const canvas = document.createElement("canvas");
canvas.width = img.naturalWidth || img.width || 800;
canvas.height = img.naturalHeight || img.height || 600;
const ctx = canvas.getContext("2d");
try {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
canvas.toBlob((blob) => {
if (blob) resolve(new File([blob], "movie_scene.jpg", { type: "image/jpeg" }));
else reject(new Error("Canvas toBlob failed"));
}, "image/jpeg", 0.9);
} catch (err) {
reject(err);
}
});
}
// Process immediately in background
extractFileFromImage(originalImg).then(file => {
const dt = new DataTransfer();
dt.items.add(file);
fileInput.files = dt.files;
fileReady = true;
submitBtn.disabled = false;
submitBtn.style.cursor = "pointer";
submitBtn.style.opacity = "1";
statusMsg.textContent = "Ready to search.";
statusMsg.style.color = "#2e7d32";
}).catch(err => {
console.error("Image processing error:", err);
statusMsg.textContent = "Error processing image. The image may be restricted by cross-origin policies.";
statusMsg.style.color = "#c62828";
});
// 8. Handle Search Dispatch
submitBtn.addEventListener("click", () => {
if (!fileReady) return;
// Auto Copy Query safely to clipboard for easy paste into Google Lens
try {
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(searchQuery).catch(() => {});
} else {
// Fallback approach
const tempInput = document.createElement("textarea");
tempInput.value = searchQuery;
tempInput.style.position = "fixed";
tempInput.style.opacity = "0";
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
}
} catch (err) { }
// Execute POST to Lens
form.submit();
statusMsg.textContent = `Search executing! Query "${searchQuery}" copied to clipboard.`;
setTimeout(() => {
statusMsg.textContent = "Ready to search again.";
}, 5000);
});
return container;
}Apply Changes
